ProcessWire - FormBuilder (Module)

2022-04-29T10:56:40Z

46.114.149.122: /* Propopulated Fields */

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:
<pre>
{
"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"
}
}
}
</pre>
Mit Adresse...
<pre>
{
"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"
}
}
}
</pre>

==Tipps und Tricks für Formbuilder==
=== Links in Checkbox-Label ===
HTML geht nicht aber Markdown funktioniert:
<pre>
Ich habe die [Datenschutzerklärung](https://fbz-vet.de/datenschutz) gelesen und willige in die dort dargestellte Verarbeitung meiner personenbezogenen Daten ein.
</pre>

=== Formbuilder CSV Export der Eingaben automatisch ===
<syntaxhighlight lang="php">
$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");
</syntaxhighlight>

=== 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
<syntaxhighlight lang="php">

<?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
}
}
);

}

</syntaxhighlight>

=== 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...
<syntaxhighlight lang="php">
$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);
}
});
</syntaxhighlight>
... 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...

<syntaxhighlight lang="php">
$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");
}
});
</syntaxhighlight>

=== E-Mail Adressen per Hook manipulieren ===
Nicht getestet. Von:
https://processwire.com/talk/topic/26261-solved-send-email-to-email-address-field-in-dynamic-page/#comment-218230
In ready.php
<syntaxhighlight lang="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)
});
</syntaxhighlight>

=== 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

Wikizone - Benutzerbeiträge [de]

ProcessWire - FormBuilder (Module)