ProcessWire - FormBuilder (Module)

Aus Wikizone
Wechseln zu: Navigation, Suche
https://processwire.com/store/form-builder/

Mails per smtp versenden

ProcessWire - WireMailSmtp (Module)

CSS bei einfachem embed per iFrame anpassen

Einfache Lösung:

  • auf Basic Output stellen
  • Standard CSS von /site/templates/FormBuilder/main.css kopieren
  • Neuen Pfad im Formbuilder Formular eingeben.

Nachteil, das könnte für den User zu kompliziert sein.

Import Daten für Standard Formular

Hiermit kann man schnell ein Formular erstellen. Einfach in Import Feld des Formbuilder kopieren. Einfaches Standardformular: 

{
    "action": "./",
    "method": "post",
    "roles": {
        "form-submit": [
            "guest"
        ],
        "form-list": [],
        "form-edit": [],
        "form-delete": [],
        "entries-list": [],
        "entries-edit": [],
        "entries-delete": [],
        "entries-page": []
    },
    "framework": "Basic",
    "submitText": "Senden",
    "successMessage": "Vielen Dank, ihre Nachricht wurde versendet.",
    "errorMessage": "Entschuldigung, das Formular konnte nicht versendet werden. Bitte füllen Sie alle Pflichtfelder aus. Zur Kontaktaufnahme benötigen wir entweder Ihre E-Mail oder Ihre Telefonnummer.",
    "emailSubject": "Nachricht über Ihr Kontaktformular",
    "responderSubject": "Auto-Response",
    "saveFlags": 2,
    "emailTo": "post@stephanschlegel.de",
    "emailFrom": "e_mail",
    "submitText1018": "Senden",
    "successMessage1018": "Vielen Dank, ihre Nachricht wurde versendet.",
    "errorMessage1018": "Entschuldigung, das Formular konnte nicht versendet werden. Bitte füllen Sie alle Pflichtfelder aus.",
    "frBasic_cssURL": "/site/templates/styles/forms.css",
    "frFoundation_foundationURL": "/site/modules/FormBuilder/frameworks/foundation/",
    "frFoundation_horizHeaderClass": "small-5 medium-3 right inline",
    "frFoundation_horizContentClass": "small-7 medium-9",
    "frUikit_ukURL": "/site/modules/FormBuilder/frameworks/uikit/",
    "frUikit_css": "uikit.gradient.min.css",
    "frUikit_horizHeaderWidth": 30,
    "frAdmin_styleSet": "AdminThemeDefault/styles/main-classic.css",
    "frBootstrap_bootURL": "/site/modules/FormBuilder/frameworks/bootstrap/",
    "frBootstrap_bootHorizHeaderClass": "col-xs-5 col-sm-4 col-md-3",
    "frBootstrap_bootHorizContentClass": "col-xs-7 col-sm-8 col-md-9",
    "children": {
        "name_1": {
            "type": "Text",
            "label": "Name",
            "label1018": "Ihr Name",
            "maxlength": 2048,
            "requiredAttr": 1
        },
        "telefon": {
            "type": "Text",
            "label": "Telefon",
            "required": 1,
            "columnWidth": 50,
            "label1018": "Ihre Telefonnummer",
            "maxlength": 2048,
            "requiredAttr": 1,
            "requiredIf": "e_mail=''",
            "stripTags": 1
        },
        "e_mail": {
            "type": "Text",
            "label": "E-Mail",
            "required": 1,
            "columnWidth": 50,
            "label1018": "Ihre E-Mail",
            "maxlength": 2048,
            "requiredIf": "telefon=''",
            "stripTags": 1
        },
        "ihre_nachricht": {
            "type": "Textarea",
            "label": "Ihre Nachricht",
            "required": 1,
            "label1018": "Ihre Nachricht",
            "rows": 5
        },
        "datenschutz": {
            "type": "Checkbox",
            "label": "Datenschutz",
            "description": "Mit meiner Kontaktaufnahme willige ich ein, dass meine Daten gespeichert und zur Bearbeitung meiner Anfrage/Kontaktaufnahme genutzt werden. Meine Daten werden niemals an Dritte weitergeleitet. Diese Einwilligung kann jederzeit widerrufen werden.",
            "required": 1,
            "label1018": "Datenschutz",
            "description1018": "Mit meiner Kontaktaufnahme willige ich ein, dass meine Daten gespeichert und zur Bearbeitung meiner Anfrage/Kontaktaufnahme genutzt werden. Meine Daten werden niemals an Dritte weitergeleitet. Diese Einwilligung kann jederzeit widerrufen werden.",
            "checkedValue": "Ich stimme zu"
        }
    }
}

Mit Adresse... 

{
    "roles": {
        "form-submit": [
            "guest"
        ],
        "form-list": [],
        "form-edit": [],
        "form-delete": [],
        "entries-list": [],
        "entries-edit": [],
        "entries-delete": [],
        "entries-page": []
    },
    "framework": "Basic",
    "submitText": "Senden",
    "successMessage": "Vielen Dank, ihre Nachricht wurde versendet.",
    "errorMessage": "Entschuldigung, das Formular konnte nicht versendet werden. Bitte füllen Sie alle Pflichtfelder aus. Zur Kontaktaufnahme benötigen wir entweder Ihre E-Mail oder Ihre Telefonnummer.",
    "emailSubject": "Nachricht über Ihr Kontaktformular",
    "responderSubject": "Auto-Response",
    "saveFlags": 2,
    "emailTo": "post@stephanschlegel.de",
    "emailFrom": "e_mail",
    "submitText1018": "Senden",
    "successMessage1018": "Vielen Dank, ihre Nachricht wurde versendet.",
    "errorMessage1018": "Entschuldigung, das Formular konnte nicht versendet werden. Bitte füllen Sie alle Pflichtfelder aus.",
    "frBasic_cssURL": "/site/templates/styles/forms.css",
    "frFoundation_foundationURL": "/site/modules/FormBuilder/frameworks/foundation/",
    "frFoundation_horizHeaderClass": "small-5 medium-3 right inline",
    "frFoundation_horizContentClass": "small-7 medium-9",
    "frUikit_ukURL": "/site/modules/FormBuilder/frameworks/uikit/",
    "frUikit_css": "uikit.gradient.min.css",
    "frUikit_horizHeaderWidth": 30,
    "frAdmin_styleSet": "AdminThemeDefault/styles/main-classic.css",
    "frBootstrap_bootURL": "/site/modules/FormBuilder/frameworks/bootstrap/",
    "frBootstrap_bootHorizHeaderClass": "col-xs-5 col-sm-4 col-md-3",
    "frBootstrap_bootHorizContentClass": "col-xs-7 col-sm-8 col-md-9",
    "children": {
        "name_1": {
            "type": "Text",
            "label": "Name",
            "label1018": "Ihr Name",
            "maxlength": 2048,
            "requiredAttr": 1
        },
        "telefon": {
            "type": "Text",
            "label": "Telefon",
            "required": 1,
            "columnWidth": 50,
            "label1018": "Ihre Telefonnummer",
            "maxlength": 2048,
            "requiredAttr": 1,
            "requiredIf": "e_mail=''",
            "stripTags": 1
        },
        "e_mail": {
            "type": "Text",
            "label": "E-Mail",
            "required": 1,
            "columnWidth": 50,
            "label1018": "Ihre E-Mail",
            "maxlength": 2048,
            "requiredIf": "telefon=''",
            "stripTags": 1
        },
        "ihre_adresse": {
            "type": "Text",
            "label": "Straße",
            "columnWidth": 80,
            "label1018": "Straße",
            "requiredAttr": 1,
            "maxlength": 2048,
            "size": 100
        },
        "hausnummer": {
            "type": "Text",
            "label": "Hausnr.",
            "required": 1,
            "columnWidth": 20,
            "label1018": "Hausnr.",
            "maxlength": 2048
        },
        "plz_ort": {
            "type": "Text",
            "label": "PLZ Ort",
            "label1018": "PLZ Ort",
            "maxlength": 2048
        },
        "ihre_nachricht": {
            "type": "Textarea",
            "label": "Ihre Nachricht",
            "required": 1,
            "label1018": "Ihre Nachricht",
            "rows": 5,
            "requiredAttr": 1
        },
        "datenschutz": {
            "type": "Checkbox",
            "label": "Datenschutz",
            "description": "Mit meiner Kontaktaufnahme willige ich ein, dass meine Daten gespeichert und zur Bearbeitung meiner Anfrage/Kontaktaufnahme genutzt werden. Meine Daten werden niemals an Dritte weitergeleitet. Diese Einwilligung kann jederzeit widerrufen werden.",
            "required": 1,
            "label1018": "Datenschutz",
            "description1018": "Mit meiner Kontaktaufnahme willige ich ein, dass meine Daten gespeichert und zur Bearbeitung meiner Anfrage/Kontaktaufnahme genutzt werden. Meine Daten werden niemals an Dritte weitergeleitet. Diese Einwilligung kann jederzeit widerrufen werden.",
            "checkedValue": "1"
        }
    }
}

Tipps und Tricks für Formbuilder

DatePicker

Lokalisierung / Sprache einstellen

Der Formbuilder nutzt das Standard InputField Datetime. Das kann man übersetzen: 

https://processwire.com/talk/topic/19049-changin-datetime-field-language/#comment-165941
https://processwire.com/talk/topic/4547-possibility-to-translate-timepicker-addon-on-datepicker/?tab=comments#comment-49746

you need to translate /wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.module file via Setup > Languages, i.e. the built-in multi-language support. Once you start translating that file, insert the datepicker translation file you wish to use into the first input titled "Datepicker translation file."

You can see a list of available translation files here: https://github.com/ryancramerdesign/ProcessWire/tree/master/wire/modules/Jquery/JqueryUI/i18n. To get german translations, you'd insert "/wire/modules/Jquery/JqueryUI/i18n/jquery.ui.datepicker-de.js" etc.

Links in Checkbox-Label

HTML geht nicht aber Markdown funktioniert: 

Ich habe die [Datenschutzerklärung](https://fbz-vet.de/datenschutz) gelesen und willige in die dort dargestellte Verarbeitung meiner personenbezogenen Daten ein.

Formbuilder CSV Export der Eingaben automatisch

$form = $forms->load('my-formname');
$formBuilderEntries = $form->entries();
$formBuilderEntries->exportCSV($form, "any_field=any_value");

//Same as above, but shorter:

$form = $forms->load('my-formname');
$form->entries()->exportCSV($form, "any_field=any_value");

Hooks in general

https://processwire.com/talk/topic/26362-general-question-on-formbuilder-and-hooks/#comment-218911

In Hooks auf Page zugreifen

Im Hook 

$page = $event->wire()->page; // current $page API var

Oder per use (siehe Beispiel unten)

Relevante Hooks

Beispiele aus site/ready.php 

// if (isset($forms)) //...possible too

<?php namespace ProcessWire;

if(!defined("PROCESSWIRE")) die();


// E-Mails (Wert aus Template 'job' Feld: job_organizationname => Mailadresse)
if($page->template->name=='job'){

  $formname = 'schnellkontakt';
  $emailList = array(
    'intensiv' => 'post@stephanschlegel.de',
    'karlsruhe' => 'post@stephanschlegel.de',
    'rastatt' => 'info@indiharart.de',
    'pforzheim' => 'info@indiharart.de',
    'rheinhausen' => 'info@indiharart.de',
    'tagespflege' => 'info@indiharart.de',
  );
  $organization = $page->job->job_organizationname->title;
  $organizationName = $page->job->job_organizationname->value;
  $jobtitle = $page->title;

  $wire->addHookBefore('FormBuilderProcessor::renderReady', 
    function($event) use($organization, $jobtitle, $formname) {
      $form = $event->arguments(0);
      if($form->name !== $formname) return;
      $form->getChildByName('ich_bewerbe_mich_fur_folgende_einrichtung')
        ->val($organization)
        ->attr('disabled', 'disabled'); 
      $form->getChildByName('ich_bewerbe_mich_als')
        ->val($jobtitle)
        ->attr('disabled', 'disabled');
    }
  ); 
  // nach dem übermitteln der eingaben (user kann nichts mehr ändern)
  $wire->addHook('FormBuilderProcessor::processInputDone', 
    function($event) use($organization, $jobtitle, $formname) {
      $form = $event->arguments(0);
      if($form->name !== $formname) return;
      $form->getChildByName('ich_bewerbe_mich_fur_folgende_einrichtung')->val($organization);
      $form->getChildByName('ich_bewerbe_mich_als')->val($jobtitle);  
    }
  ); 
  // change email based on job
  $wire->addHookBefore('FormBuilderProcessor::emailForm', 
    function($event) use($organizationName, $emailList, $formname) {
      $processor = $event->object;
      if($processor->formName != $formname) return; 
      if(array_key_exists($organizationName,$emailList)){
        $processor->emailTo = $emailList[$organizationName]; // tell FormBuilder to use that email
      }
    }
  );

}

Werte in Success Meldung anzeigen

https://processwire.com/talk/topic/12874-mini-how-to-display-submitted-values-in-success-message/#comment-116913

In site/ready.php I add this code... 

$forms->addHookAfter('FormBuilderProcessor::formSubmitSuccess', function($event) {
    $form = $event->object;
    if ($form->formName == 'YOUR-FORM-NAME-HERE' && $form->isSubmitted()) {
        $values = $form->getValues();
        array_walk($values, function(&$i){ $i = htmlentities($i, ENT_QUOTES, 'UTF-8', false); });
        $form->successMessage = wirePopulateStringTags($form->successMessage, $values);
    }
});

... changing 'YOUR-FORM-NAME-HERE' for the actual name of your form.

I can now include submitted values in my success messages. Like this;

Thank you, {name}. A confirmation email has been sent to {email}.

If I also want to clean up submitted values, prior to the form entry being saved (and, therefore, prior to success message display) I do that in another ready.php hook. In the following example I simply make sure that my collected email field is all lowercase... 

$forms->addHookBefore('FormBuilderProcessor::saveForm', function($event) {
    $form  = $event->arguments(0);
    if($form->name == 'YOUR-FORM-NAME-HERE') {
        // Sanitise the email field (all lower case)...
        $f = $form->get('email');
        $email = strtolower($f->value);
        $f->attr('value', "$email");
    }
});

E-Mail Adressen per Hook manipulieren

Admin E-Mail via User Option Feld auswählen

Im Formular Feld "auswahl" 

+Standortauswahl
salusklinik=Salus Klinik Bad Reichenhall
mvzreichenhall=MVZ Bad Reichenhall
mvztraunstein=MVZ Traunstein
mvzfeldmoching=MVZ Außenstelle Feldmoching

site/ready.php 

// E-Mails (Wert aus Template 'job' Feld: job_organizationname => Mailadresse)
if($page->template->name=='layout-blocks'){

  $formName = 'kontakt';
  $optionField = 'auswahl';
  $emailList = array(
    // We could use e-mail adresses as a value in the select field. But to keep it more secret we use a table.
    'salusklinik' => 'post@stephanschlegel.de',
    'mvzreichenhall' => 'stephanschlegel@gmx.de',
    'mvztraunstein' => 'info@mvztraunstein.de',
    'mvzfeldmoching' => 'info@hautarzt-feldmoching.de'
  );

  // nach dem übermitteln der eingaben (user kann nichts mehr ändern)
  $wire->addHook('FormBuilderProcessor::processInputDone', 
    function($event) use($formName, $optionField, $emailList) {
      $processor = $event->object;
      $form = $event->arguments(0);
      if($form->name !== $formName) return;
      $values = $processor->getValues();
      if($email = $values[$optionField]){
        //bd($email,'email');
        if(array_key_exists($email, $emailList)) {
          $processor->emailTo = $emailList[$email];
          //bd($processor->emailTo,"email to");
        }
      }
      //$form->getChildByName('message')->val($email.' email'); // use for debugging
    }
  ); 
}

Beispiel Forum

Nicht getestet. Von: 

https://processwire.com/talk/topic/26261-solved-send-email-to-email-address-field-in-dynamic-page/#comment-218230

In ready.php 

$wire->addHookBefore('FormBuilderProcessor::emailForm', function($event) {
  $processor = $event->object; 
  if($processor->formName != 'myFormName') return; 
  $page = $event->wire()->page; // current $page API var
  $email = $page->get('emailFieldName'); // get "email" field from current page
  $processor->emailTo .= "\n" . $email; // use that email + admin Mail (Formbuilder uses one per line)
});

Feld Read Only bei Formular Rendering

https://processwire.com/talk/topic/26373-making-field-read-only/#comment-218986

Prepopulated Fields

https://processwire.com/talk/topic/25517-solved-pre-populated-fields/#comment-218903

PDF Download nach Form Submission

https://processwire.com/talk/topic/26309-solved-download-pdf-file-after-submitting-the-contact-form/#comment-218905
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_FormBuilder_(Module)&oldid=26842“