Über Dekoratoren gestaltetes Kontaktformular

Anwendungsbeispiel: Gestaltetes Kontaktformular, bei dem die Elemente individuell platziert und die Styleangaben direkt an die Elemente übergeben wurden

Formular

Beispiel: Gestaltetes Beispielformular

Quelltext

<?php

//$formular = new wForm();<br>
$formular = new wForm(array('decorators' => array(
'form' => '<dl class="form">')));

$formular->addElement('input', 'name', 'Name*', array('attributes' => array('class' => 'L'), 'validators' => array(array('type' => 'required', 'errorMessage' => 'Bitte geben Sie einen Namen an'))));
$formular->addElement('input', 'street', 'Strasse*', array('attributes' => array('class' => 'L'), 'validators' => array(array('type' => 'required', 'errorMessage' => 'Bitte geben Sie eine Strasse an'))));
$formular->addElement('input', 'streetNumber', 'Hausnr.*', array('attributes' => array('class' => 'XS'), 'validators' => array(array('type' => 'required', 'errorMessage' => 'Bitte geben Sie eine Hausnummer an'))));
$formular->addElement('input', 'zip', 'PLZ*', array('attributes' => array('class' => 'XS'), 'validators' => array(array('type' => 'required', 'errorMessage' => 'Bitte geben Sie eine gültige Postleitzahl an'))));
$formular->addElement('input', 'town', 'Stadt*', array('attributes' => array('class' => 'L'), 'validators' => array(array('type' => 'required', 'errorMessage' => 'Bitte geben Sie eine Stadt an'))));
$formular->addElement('input', 'email', 'E-Mail*', array('attributes' => array('class' => 'L'), 'validators' => array(array('type' => 'email', 'errorMessage' => 'Bitte geben Sie eine gültige E-Mail Adresse an'))));
$formular->addElement('select', 'type', 'Typ*', array('attributes' => array('class' => 'L'), 'options' => array('' => 'Bitte wählen Sie Ihren Status aus', 'customer' => 'Kunde', 'prospect' => 'Interessent'), 'validators' => array(array('type' => 'required', 'errorMessage' => 'Bitte wählen Sie Ihren Status aus.'))));
$formular->addElement('submit', 'submit', 'Absenden');

$formular->addEventServer('onSubmit', '
  $this->setFormData(wRequest::getParameters());
  if($this->validate()){ 
    $this->initFormData();
    $this->setStatus("sent");
    wResponse::redirect($this->url);
  }
  else{
    $this->setStatus("failed");  
    wResponse::redirect($this->url);
  }
');

if($formular->getStatus() == 'sent'){
  print '<div style="padding:8px;background-color:#ffffff;border:solid 1px #666666">Vielen Dank für Ihre Anmeldung!</div>';
  $formular->setStatus("");  
}
else{
  if($formular->getStatus() == 'failed'){
    $formular->setStatus(""); 
  }
  
  $formular->show();
}

?>

Ergebnis

FAQs
Wie kann ich ein Kontaktformular mit Decorators anpassen?
Du kannst beim Erstellen des Formulars einen Decorator für den Formular-Container übergeben, z. B. im Konstruktor von <code class="codeInline">wForm</code>: <pre><code class="codeBlock" style="color: #000000">php $formular = new wForm(array('decorators' =&gt; array( 'form' =&gt; '&lt;dl class="form"&gt;' ))); </code></pre>
Wie werden Formularelemente im Beispiel hinzugefügt?
Im Beispiel werden einzelne Felder über <code class="codeInline">addElement</code> registriert, z. B. ein <code class="codeInline">input</code>-Feld für den Namen: <pre><code class="codeBlock" style="color: #000000">php $formular-&gt;addElement('input', 'name', 'Name*', array( 'attributes' =&gt; array('class' =&gt; 'L'), 'validators' =&gt; array(array( 'type' =&gt; 'required', 'errorMessage' =&gt; 'Bitte geben Sie einen Namen an' )) )); </code></pre>
Welche Validatoren werden im Beispiel verwendet?
Das Beispiel nutzt vor allem zwei Validator-Typen: - <code class="codeInline">required</code> (Pflichtfeld) mit passender <code class="codeInline">errorMessage</code> - <code class="codeInline">email</code> (E-Mail-Validierung) mit entsprechender <code class="codeInline">errorMessage</code> Beispiel E-Mail: <pre><code class="codeBlock" style="color: #000000">php $formular-&gt;addElement('input', 'email', 'E-Mail*', array( 'attributes' =&gt; array('class' =&gt; 'L'), 'validators' =&gt; array(array( 'type' =&gt; 'email', 'errorMessage' =&gt; 'Bitte geben Sie eine gültige E-Mail Adresse an' )) )); </code></pre>
Wie werden Select-Optionen für ein Feld (z. B. Typ/Status) definiert?
Mit <code class="codeInline">addElement('select', ...)</code> und einer <code class="codeInline">options</code>-Liste. Zusätzlich wird mit <code class="codeInline">validators</code> sichergestellt, dass eine Auswahl getroffen wird. <pre><code class="codeBlock" style="color: #000000">php $formular-&gt;addElement('select', 'type', 'Typ*', array( 'attributes' =&gt; array('class' =&gt; 'L'), 'options' =&gt; array( '' =&gt; 'Bitte wählen Sie Ihren Status aus', 'customer' =&gt; 'Kunde', 'prospect' =&gt; 'Interessent' ), 'validators' =&gt; array(array( 'type' =&gt; 'required', 'errorMessage' =&gt; 'Bitte wählen Sie Ihren Status aus.' )) )); </code></pre>
Wie kann ich beim Absenden des Formulars serverseitig validieren und danach reagieren?
Im Beispiel wird ein <code class="codeInline">onSubmit</code>-Event verwendet. Dabei werden Formularwerte gesetzt, validiert und je nach Ergebnis der Status gesetzt sowie eine Redirect-Aktion durchgeführt. <pre><code class="codeBlock" style="color: #000000">php $formular-&gt;addEventServer('onSubmit', ' $this-&gt;setFormData(wRequest::getParameters()); if($this-&gt;validate()){ $this-&gt;initFormData(); $this-&gt;setStatus("sent"); wResponse::redirect($this-&gt;url); } else{ $this-&gt;setStatus("failed"); wResponse::redirect($this-&gt;url); } '); </code></pre>
Was passiert im Beispiel, wenn das Formular erfolgreich gesendet wurde?
Wenn <code class="codeInline">getStatus()</code> auf <code class="codeInline">'sent'</code> steht, wird eine Dankesmeldung ausgegeben und der Status wieder zurückgesetzt. <pre><code class="codeBlock" style="color: #000000">php if($formular-&gt;getStatus() == 'sent'){ print '&lt;div style="padding:8px;background-color:#ffffff;border:solid 1px #666666"&gt;Vielen Dank für Ihre Anmeldung!&lt;/div&gt;'; $formular-&gt;setStatus(""); } </code></pre>
Was passiert, wenn die Validierung fehlschlägt?
Wenn <code class="codeInline">getStatus()</code> auf <code class="codeInline">'failed'</code> steht, wird der Status im else-Zweig zurückgesetzt, sodass das Formular erneut angezeigt werden kann (inkl. Validierungsfehlern). <pre><code class="codeBlock" style="color: #000000">php else{ if($formular-&gt;getStatus() == 'failed'){ $formular-&gt;setStatus(""); } $formular-&gt;show(); } </code></pre>
Wann und wie wird das Formular angezeigt?
Das Formular wird im Beispiel im <code class="codeInline">else</code>-Block mit <code class="codeInline">$formular->show();</code> ausgegeben. Bei <code class="codeInline">'sent'</code> erfolgt stattdessen die Anzeige der Erfolgsmeldung.