ProcessWire - Formulare: Unterschied zwischen den Versionen
(→Links) |
|||
| Zeile 12: | Zeile 12: | ||
Das '''Markup''' eines Formulars kann man entweder '''manuell''' erstellen oder mit einem '''Formobjekt''', das über eine render() Funktion ausgegeben wird. | Das '''Markup''' eines Formulars kann man entweder '''manuell''' erstellen oder mit einem '''Formobjekt''', das über eine render() Funktion ausgegeben wird. | ||
| − | Zur Auswertung und '''Validierung''' stellt PW ebenfalls einige Objekte und Funktionen zur Verfügung. Wichtig ist vor allem der Sanitizer und die Whitelist. In neueren PWs | + | Zur Auswertung und '''Validierung''' stellt PW ebenfalls einige Objekte und Funktionen zur Verfügung. Wichtig ist vor allem der '''Sanitizer''' und die '''Whitelist'''. In neueren PWs muss man diese Objekte nicht mehr von Hand implementieren, sondern kann diese automatisch nutzen. |
Für das Styling kann man eigene Stile nutzen. Als Inspiration für das Styling kann man inputfields.css aus dem templates-admin Ordner nutzen. Auch das CSS aus wire/modules/InputfieldRadios kann hilfreich sein. | Für das Styling kann man eigene Stile nutzen. Als Inspiration für das Styling kann man inputfields.css aus dem templates-admin Ordner nutzen. Auch das CSS aus wire/modules/InputfieldRadios kann hilfreich sein. | ||
| Zeile 27: | Zeile 27: | ||
$fs->attr("id+name", "myfieldset"); | $fs->attr("id+name", "myfieldset"); | ||
$fs->label = "My Fieldset"; | $fs->label = "My Fieldset"; | ||
| − | |||
// insert | // insert | ||
| Zeile 44: | Zeile 43: | ||
=== Fieldset Beispiele === | === Fieldset Beispiele === | ||
| + | |||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
$form = $modules->InputfieldForm; | $form = $modules->InputfieldForm; | ||
| Zeile 90: | Zeile 90: | ||
$fieldset->insertAfter($lastname, $firstnamefield); | $fieldset->insertAfter($lastname, $firstnamefield); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
=== Hooks === | === Hooks === | ||
Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren. | Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren. | ||
Version vom 4. Dezember 2021, 21:39 Uhr
Links
Processwire - Forms (Beispiel mit ProcessWire Form Objekt -> Inputfelder über PW generieren) ProcessWire Upload Formular https://processwire.com/talk/topic/2089-create-simple-forms-using-api/ von Soma https://processwire.com/talk/topic/14206-contact-form-tutorial/ Mit Google ReCaptcha https://www.spiria.com/en/blog/web-development/tutorial-how-to-create-a-form-in-processwire/ Mal lesen
Siehe auch
https://processwire.com/talk/topic/4066-activate-user-account-via-email/?page=2 // User Subscription Account via E-Mail verifizierung
Allgemeines
Das Markup eines Formulars kann man entweder manuell erstellen oder mit einem Formobjekt, das über eine render() Funktion ausgegeben wird.
Zur Auswertung und Validierung stellt PW ebenfalls einige Objekte und Funktionen zur Verfügung. Wichtig ist vor allem der Sanitizer und die Whitelist. In neueren PWs muss man diese Objekte nicht mehr von Hand implementieren, sondern kann diese automatisch nutzen.
Für das Styling kann man eigene Stile nutzen. Als Inspiration für das Styling kann man inputfields.css aus dem templates-admin Ordner nutzen. Auch das CSS aus wire/modules/InputfieldRadios kann hilfreich sein.
Wichtige Funktionen
$form->processInput($input->post) // prevent CSRF, append a hidden field
$form->getErrors();
$form->render();
$form->setMarkup();
// fieldsets
$fs = $modules->InputfieldFieldset;
$fs->attr("id+name", "myfieldset");
$fs->label = "My Fieldset";
// insert
$fieldset1->insertBefore($field, $someotherfield); // this works
$form->insertBefore($field, $someotherfield); // this does not work because $form object is a InputfieldWrapper
$fieldset = $form->get("myfieldset2");
$firstnamefield = $fieldset->get("firstname");
$fieldset->insertBefore($lastname, $firstnamefield);
// find a fieldset
$fieldset = $form->find("id=myfieldset2")->first();
Fieldset Beispiele
$form = $modules->InputfieldForm;
$form->action = "./";
$form->method = "post";
$fs = $modules->InputfieldFieldset;
$fs->attr("id+name", "myfieldset");
$fs->label = "My Fieldset";
$fs2 = $modules->InputfieldFieldset;
$fs2->attr("id+name", "myfieldset2");
$fs2->label = "My Fieldset2";
$field = $modules->InputfieldEmail;
$field->attr("name","email");
$field->label = "Email";
$fs2->add($field);
$field = $modules->InputfieldText;
$field->attr("name","firstname");
$field->label = "Firstname";
$fs2->add($field);
$fs->add($fs2);
$form->add($fs);
$lastname = $modules->InputfieldText;
$lastname->attr("name","lastname");
$lastname->label = "Lastname";
$fieldset = $form->get("myfieldset2");
$firstnamefield = $fieldset->get("firstname");
$fieldset->insertBefore($lastname, $firstnamefield);
$content .= $form->render();
//One more you can also get a field and get its parent InputfieldWrapper:
$lastname = $modules->InputfieldText;
$lastname->attr("name","lastname");
$lastname->label = "Lastname";
$firstnamefield = $form->get("firstname");
$fieldset = $firstnamefield->parent;
$fieldset->insertAfter($lastname, $firstnamefield);
Hooks
Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren.
Formular-Objekt und Felder definieren
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');
// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form
// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);
Formular rendering konfigurieren
Mit der Funktion setMarkup(array()) kann man die Ausgabe von $form->render() konfigurieren.
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>"
));
Formulardaten auswerten
// form was submitted so we process the form
if($input->post->submit) {
// user submitted the form, process it and check for errors
$form->processInput($input->post);
// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");
if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");
}
if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {
// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);
$out .= "<p>Thanks! Your submission was successful.";
}
} else {
// render out form without processing
$out .= $form->render();
}
Get und Post Daten holen und für Suchselektoren nutzen
// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords); // Sanizize user input
$selector .= "title|body|summary%=$value, "; // %= search parts // create a selector for later
$input->whitelist('keywords', $value); //
}
Die Whitelist und der Sanitizer
https://processwire.com/api/ref/sanitizer/ https://processwire.com/api/ref/input/#api-sanitizer https://processwire.com/api/ref/input/whitelist/
Den Sanitizer nutzt man um sich gegen manipulierte User-Eingaben zu schützen.
Wenn man Variablen Sanitized hat, kann man sie in die Whitlist legen. Im Grunde ist das nur eine Hilfe um zu beurteilen ob einer Variablen vertraut wird. Manche Funktionen in PW nutzen die Whitelist. Z.B. gibt das MarkupPagerNav Modul die Variablen darin weiter wenn man die Seite über den Seitenbrowser wechselt.
Beispiele
// Retrieve a "q" GET variable, sanitize and output
// Example request URL: domain.com/path/to/page/?q=TEST
$q = $input->get('q'); // retrieve value
$q = $sanitizer->text($q); // sanitize input as 1-line text
echo $sanitizer->entities($q); // sanitize for output, outputs "TEST"
// You can also combine $input and one $sanitizer call, replacing
// the "text" method call with any $sanitizer method:
$q = $input->get->text('q');
// Retrieve a GET variable, sanitize/validate it, and populate to whitelist
$limit = (int) $input->get('limit');
if($limit < 10 || $limit > 100) $limit = 25; // validate
$input->whitelist('limit', $limit);
// Retrieve a variable from the whitelist
$limit = $input->whitelist('limit');
Beispiele
Suchformular
Get Variablen auswerten (Genbänkle)
// SEARCH
// most of the code in this template file is here to build this selector string
// it will contain the search query that gets sent to $sortList
$selector = '';
// we use this to store the info that generates the summary of what was searched for
// the summary will appear above the search results
$summary = array(
"keywords" => "",
"sort_id" => "",
"sort_red_list" => "",
"sort_wild_plant" => "",
"sort_rare" => "",
"sort_winter_plant" => "",
"sort_useful_ornamental" => "",
"sort_bw_typical" => "",
);
//var_dump($input->get->keywords);
// if there are KEYWORDS, look in the title and body fields for the words
if($input->get->keywords) {
$value = $sanitizer->selectorValue($input->get->keywords);
$selector .= "title|body|summary%=$value, ";
$summary["Stichwort"] = $sanitizer->entities($value);
$input->whitelist('keywords', $value);
}
// SORTS_ID
if($input->get->sort_id) {
$value = $sanitizer->selectorValue($input->get->sort_id);
$selector .= "pr_types=$value, ";
$p = $pages->get($sanitizer->entities($value));
$summary["Art"] = $p->title;
$input->whitelist('sort_id', $value);
}
// PROPERTIES
// Checkbox names
$properties = array(
'sort_red_list',
'sort_bw_typical',
'sort_rare',
'sort_wild_plant',
'sort_winter_plant',
'sort_useful_ornamental'
);
foreach ($properties as $k){
$label = $pages->fields->get($k)->label;
if($input->get->{$k}) {
$value = $sanitizer->selectorValue($input->get->{$k});
$selector .= "$k=1, ";
$summary["$label"] = $sanitizer->entities($value);
$input->whitelist($k, $value);
}
}
// RED LIST
/*
if($input->get->sort_red_list) {
$value = $sanitizer->selectorValue($input->get->sort_red_list);
//$selector .= "sort_properties=1, "; // 1 = red_list
$selector .= "sort_red_list=1, ";
$summary["Rote Liste"] = $sanitizer->entities($value);
$input->whitelist('sort_red_list', $value);
}
*/
// SEARCH SUMMARY
$content = '<h5>Ihre Suche</h5><ul id="search_summary" class="uk-list">';
$browserTitle = "Sorten - ";
foreach($summary as $key => $value) {
if(!$value) continue;
$key = ucfirst($key);
$content .= "\n\t<li><strong>$key:</strong> $value</li>";
$browserTitle .= "$key: $value, ";
}
$content .= "\n</ul>";
// FINAL OUTPUT
$content .= renderSortList(findSorts($selector));
$browserTitle = rtrim($browserTitle, ", ");
$content = $layoutBlocks.$content;
?>
<div id="content" class="sort-search uk-width-expand">
<?=$content?>
</div>
<aside id='sidebar' class='uk-width-1-3@m'>
<div class='uk-card uk-card-muted uk-card-hover uk-card-body uk-margin-medium-top'>
<?php include("./includes/search_form_big.php"); ?>
</div>
<div class="uk-margin">
<?=$page->sidebar?>
</div>
</aside>
Einfaches Beispiel von Soma
<?php
$out = '';
// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'subscribe-form');
// create a text input
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
$form->append($field); // append the field to the form
// create email field
$field = $modules->get("InputfieldEmail");
$field->label = "E-Mail";
$field->attr('id+name','email');
$field->required = 1;
$form->append($field); // append the field
// you get the idea
$field = $modules->get("InputfieldPassword");
$field->label = "Passwort";
$field->attr("id+name","pass");
$field->required = 1;
$form->append($field);
// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","Subscribe");
$submit->attr("id+name","submit");
$form->append($submit);
// form was submitted so we process the form
if($input->post->submit) {
// user submitted the form, process it and check for errors
$form->processInput($input->post);
// here is a good point for extra/custom validation and manipulate fields
$email = $form->get("email");
if($email && (strpos($email->value,'@hotmail') !== FALSE)){ // attach an error to the field
// and it will get displayed along the field
$email->error("Sorry we don't accept hotmail addresses for now.");
}
if($form->getErrors()) {
// the form is processed and populated
// but contains errors
$out .= $form->render();
} else {
// do with the form what you like, create and save it as page
// or send emails. to get the values you can use
// $email = $form->get("email")->value;
// $name = $form->get("name")->value;
// $pass = $form->get("pass")->value;
//
// to sanitize input
// $name = $sanitizer->text($input->post->name);
// $email = $sanitizer->email($form->get("email")->value);
$out .= "<p>Thanks! Your submission was successful.";
}
} else {
// render out form without processing
$out .= $form->render();
}
include("./head.inc");
echo $out;
include("./foot.inc");
Einfaches Formular mit E-Mail versand (ohne Spamschutz)
<?php namespace ProcessWire;
function renderContactForm($backend_email, $subject) {
$out = '';
$modules = wire('modules'); // get access to pw modules object
$input = wire('input');
$sanitizer = wire('sanitizer');
// Create the new <form>
$form = $modules->get("InputfieldForm"); // get InputfieldForm Object
$form->action = "./";
$form->method = "post";
$form->attr("id+name",'contact-form');
// Set markup for form elements
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>",
//'item_label' => "<label for='{for}'>{out}</label>",
'item_label' => "", // no label markup for this form
'item_content' => "{out}",
'item_error' => "<p class=\"error\">{out}</p>",
'item_description' => "<p>{out}</p>",
'item_head' => "<h2>{out}</h2>",
'item_notes' => "<p class='notes'>{out}</p>",
));
// Set classes for form elements
$form->setClasses(array(
'list' => 'form-list',
'list_clearfix' => '',
'item' => '{class}',
'item_required' => 'required',
'item_error' => '',
'item_collapsed' => '',
'item_column_width' => '',
'item_column_width_first' => ''
));
// New field: First name
$field = $modules->get("InputfieldText");
$field->label = __("Name");
$field->attr([
'id+name' => 'name',
'placeholder' => 'Ihr Name',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);
// New field: E-Mail
$field = $modules->get("InputfieldEmail");
$field->label = __("E-mail");
$field->attr([
'id+name' => 'email',
'placeholder' => 'Ihre E-Mail Adresse',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);
// New field: Phone
$field = $modules->get("InputfieldText");
$field->label = __("Telefon");
$field->attr([
'id+name' => 'phone',
'placeholder' => 'Ihre Telefonnummer',
'class' => 'text'
]);
$field->required = 1;
$form->append($field);
// New field: Message
$field = $modules->get("InputfieldTextarea");
$field->label = __("Nachricht");
$field->attr([
'id+name' => 'message',
'placeholder' => 'Ihre Nachricht',
'class' => 'textarea'
]);
$field->required = 1;
$form->append($field);
// SUBMIT button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("id+name", "submit");
$submit->attr("class", "submit");
$form->append($submit);
// POST request, process the form
if($input->post->submit) {
$form->processInput($input->post);
$name = $sanitizer->text($input->post->firstname);
$email = $sanitizer->email($input->post->email);
$message = $sanitizer->text($input->post->message);
$phone = $sanitizer->text($input->post->phone);
// ERRORS...
if($form->getErrors()) {
$out .= $form->render();
} else {
// FORM OK...
// Process the form here!
$mail = wireMail();
$mail->to($backend_email)->from($email);
$mail->subject($subject);
$body = "Name: " . $firstname . "\n";
$body .= "E-Mail: " . $email . "\n";
$body .= "Telefon: " . $phone . "\n\n";
$body .= "Nachricht:\n" . $message;
$mail->body($body);
echo '<pre>'.$body.'</pre>';
$numSent = $mail->send();
$out .= '<p>'.__("Vielen Dank für Ihre Nachricht! Wir melden uns so bald wie möglich.").'</p>';
}
} else {
// GET request, simply show the form
$out .= $form->render();
}
return $out;
}
Formular mit Upload Funktion (von Soma)
CSRF in eigenen Formularen
ProcessWire - Formulare mit CSRF Schutz
Formulare mit Token und Sessionfunktionen von ProcessWire ausstatten. Das geht auch mit selbst erstelltem Markup.
https://processwire-recipes.com/recipes/use-csrf-in-your-own-forms/