ProcessWire - Formulare

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.

Formulare mit der ProcessWire API

Folgendermaßen kannst du vorgehen, wenn du Formulare mit der API Erstellen und Auswerten möchtest.

ProcessWire - Formulare mit der API erstellen (Tutorial)

Quickstart / 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();

Hooks in Formularen

Über Hooks lassen sich eigene Validierungen und vieles mehr realisieren.

Feldtypen

https://processwire.com/api/ref/inputfield-radios/

Formular rendering anpassen

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>"
));

/**
 * Markup used during the render() method - customize with InputfieldWrapper::setMarkup($array)
 *
 */
static protected $defaultMarkup = array(
	'list' => "<ul {attrs}>{out}</ul>",
	'item' => "<li {attrs}>{out}</li>", 
	'item_label' => "<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
	'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
	'item_content' => "<div class='InputfieldContent ui-widget-content{class}'>{out}</div>", 
	'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
	'item_description' => "<p class='description'>{out}</p>", 
	'item_head' => "<h2>{out}</h2>", 
	'item_notes' => "<p class='notes'>{out}</p>",
	'item_detail' => "<p class='detail'>{out}</p>", 
	'item_icon' => "<i class='fa fa-fw fa-{name}'></i> ",
	'item_toggle' => "<i class='toggle-icon fa fa-fw fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>", 
	// ALSO: 
	// InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
	);

But this applies to the whole InputfieldWrapper. In terms of making it more targeted you can set markup for individual inputfield types by using the inputfield class name as a key:

$wrapper->setMarkup([
	'InputfieldText' => [
		'item' => '<li {attrs}><p>Markup before</p>{out}<p>Markup after</p></li>',
	],
]);

// BEISPIEL
  $form->setMarkup(array(
    'list' => "<div {attrs}>{out}</div>",
    'item' => "<div {attrs}>{out}</div>",
    'InputfieldSubmit' => [
      'item' => '<div {attrs}><p>Markup before</p>{out}<p>Markup after</p></li>',
    ]
  ));

Skip Label / Label entfernen

https://processwire.com/talk/topic/19038-skiplabel-question/?tab=comments#comment-165689

$f->skipLabel = Inputfield::skipLabelHeader; // not working for checkbox
// for checkbox:
$f->label = ' ';
$f->label2 = $tag->title;

Formulardaten auswerten

Beispiel: Formulardaten auswerten

Wenn man ProcessWires Formobjekte nutzt kann man Formulare schick inklusive Fehlermeldungen validieren.

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

Beispiel: 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);

Get Variablen manuell auswerten (Genbänkle)

Ein etwas umständliches Beispiel - aber funktioniert.

<?php
// 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)

ProcessWire Upload Formular

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/

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