Individuell gestaltetes Beispielformular

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

Formular

Beispiel: Individuell gestaltetes Beispielformular

Quelltext

<?php

$formular = new wForm();
$formular->resetIfHasBeenCalledWithStatus();

$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' => 'M'), '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' => 'M'), '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', '
if(wRequest::getParameter("wFormAction") == "reset"){
  $this->reset();
  wResponse::redirect($this->url);
}

  $this->setFormData(wRequest::getParameters());
  if($this->validate()){ 
    $this->initFormData();
    $this->setStatus("sent");
    wCache::clearCachePath($this->url);
    //wResponse::redirect($this->referrer);
    $redirectURL = wURL::setParameter($this->url, \'wFormStatus\', \'\');
    wOutput::loadWithoutCache($redirectURL);
    wResponse::redirect($redirectURL);
  }
  else{
    $this->setStatus("failed");    
    //wResponse::redirect($this->referrer);
    $redirectURL = wURL::setParameter($this->url, \'wFormStatus\', \'failed\');
    wOutput::loadWithoutCache($redirectURL);
    wResponse::redirect($redirectURL.\'#wFormErrorMessages\');
  }
');

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

?>
<div class="elementForm">
  <div name="frmDefault" method="POST" action="<?php print $formular->action; ?>">
    <?php
      if(!$formular->validate()){
        print '<div class="errorMessages">';
        print $formular->elements['name']->renderErrorMessage();
        print $formular->elements['street']->renderErrorMessage();
        print $formular->elements['streetNumber']->renderErrorMessage();
        print $formular->elements['zip']->renderErrorMessage();
        print $formular->elements['town']->renderErrorMessage();
        print $formular->elements['type']->renderErrorMessage();
        print '</div>';
      }
    ?>
    <dl class="formTable">
      <dt>Ihr Name*</dt>
      <dd><?php print $formular->elements['name']->renderElement(); ?><br /><span class="textInfo">(Nachname, Vorname)</span></dd>
      <dt><?php print $formular->elements['street']->renderLabel(); ?> / <?php print $formular->elements['streetNumber']->renderLabel(); ?></dt>
      <dd><?php print $formular->elements['street']->renderElement(); ?><?php print $formular->elements['streetNumber']->renderElement(); ?></dd>
      <dt><?php print $formular->elements['zip']->renderLabel(); ?> / <?php print $formular->elements['town']->renderLabel(); ?></dt>
      <dd><?php print $formular->elements['zip']->renderElement(); ?><?php print $formular->elements['town']->renderElement(); ?></dd>
      <dt><?php print $formular->elements['type']->renderLabel(); ?></dt>
      <dd><?php print $formular->elements['type']->renderElement(); ?></dd>
      <dt><?php print $formular->elements['email']->renderLabel(); ?></dt>
      <dd><?php print $formular->elements['email']->renderElement(); ?></dd>              
      <dt> </dt>
      <dd><?php print $formular->elements['submit']->renderElement(); ?></dd>
    </dl>
  </div>
</div>
<?php  
}

?>

Ergebnis

Ihr Name*

(Nachname, Vorname)
/
/
 
FAQs
Wie ist das Beispiel-Formular aufgebaut?
Das Beispiel zeigt ein individuell gestaltetes Kontaktformular, bei dem die Formularelemente direkt im Code platziert und Style-Attribute (z. B. Klassen wie <code class="codeInline">L</code>, <code class="codeInline">M</code>, <code class="codeInline">XS</code>) an die einzelnen Elemente übergeben werden. Es enthält Felder für Name, Straße, Hausnummer, PLZ, Stadt, Typ (Dropdown) und E-Mail sowie einen Absenden-Button.
Welche Pflichtfelder gibt es im Formular?
Pflichtfelder sind: Name (<code class="codeInline">Name*</code>), Straße (<code class="codeInline">Strasse*</code>), Hausnummer (<code class="codeInline">Hausnr.*</code>), PLZ (<code class="codeInline">PLZ*</code>), Stadt (<code class="codeInline">Stadt*</code>), Typ (<code class="codeInline">Typ*</code>) und E-Mail (<code class="codeInline">E-Mail*</code>). Für jedes Pflichtfeld ist ein <code class="codeInline">required</code>-Validator hinterlegt, der bei fehlenden Eingaben eine entsprechende Fehlermeldung ausgibt.
Wie wird die E-Mail-Validierung durchgeführt?
Das E-Mail-Feld nutzt einen <code class="codeInline">email</code>-Validator (<code class="codeInline">type => 'email'</code>). Zusätzlich ist eine Fehlermeldung hinterlegt: „Bitte geben Sie eine gültige E-Mail Adresse an“.
Wie funktioniert das Dropdown-Feld „Typ“?
Das Feld „Typ“ ist ein <code class="codeInline">select</code> mit Optionen: eine leere Vorgabe („Bitte wählen Sie Ihren Status aus“), sowie <code class="codeInline">customer => 'Kunde'</code> und <code class="codeInline">prospect => 'Interessent'</code>. Es ist ebenfalls als Pflichtfeld konfiguriert (<code class="codeInline">required</code>).
Welche Fehlermeldungen werden angezeigt?
Wenn das Formular nicht validiert, werden im Bereich <code class="codeInline">errorMessages</code> die jeweiligen Fehlermeldungen der betroffenen Felder gerendert (u. a. für <code class="codeInline">name</code>, <code class="codeInline">street</code>, <code class="codeInline">streetNumber</code>, <code class="codeInline">zip</code>, <code class="codeInline">town</code> und <code class="codeInline">type</code>). Das Formular setzt den Status auf „failed“ und leitet anschließend zur Seite mit einem Anker <code class="codeInline">#wFormErrorMessages</code> weiter.
Was passiert bei einem Klick auf „Absenden“?
Beim Submit wird ein Server-Event <code class="codeInline">onSubmit</code> ausgeführt. Dabei werden die Formulardaten gesetzt (<code class="codeInline">setFormData(...)</code>), anschließend wird das Formular validiert (<code class="codeInline">validate()</code>). Bei Erfolg wird der Status auf „sent“ gesetzt, der Cache wird bereinigt und der Nutzer wird per Redirect auf eine URL umgeleitet, die <code class="codeInline">wFormStatus</code> entfernt.
Wie wird „Formular zurücksetzen“ im Beispiel behandelt?
Wenn <code class="codeInline">wFormAction</code> den Wert <code class="codeInline">reset</code> hat, wird das Formular zurückgesetzt (<code class="codeInline">$this->reset()</code>) und der Browser wird auf die Formular-URL umgeleitet (<code class="codeInline">wResponse::redirect($this->url)</code>).
Was wird angezeigt, wenn die Übermittlung erfolgreich war?
Wenn der Status des Formulars auf <code class="codeInline">sent</code> steht, gibt das Beispiel eine Bestätigungsmeldung aus: „Vielen Dank für Ihre Anmeldung!“. Danach wird der Status wieder zurück auf leer gesetzt (<code class="codeInline">setStatus("")</code>).
Wie werden die Elemente im Layout gerendert?
Die Ausgabe erfolgt im HTML-Teil über eine Definition nach dem Schema <code class="codeInline"><dl class="formTable"></code> mit <code class="codeInline"><dt></code> (Label) und <code class="codeInline"><dd></code> (Feld). Zusätzlich wird beim Namen ein Hinweis angezeigt: „(Nachname, Vorname)“. Die Felder werden über <code class="codeInline">renderElement()</code> sowie teilweise über <code class="codeInline">renderLabel()</code> und <code class="codeInline">renderErrorMessage()</code> ausgegeben.
Warum wird beim Redirect die URL-Parameter-Logik verwendet?
Nach erfolgreicher Validierung wird <code class="codeInline">wFormStatus</code> für den Redirect-URL bereinigt, indem der Parameter mit <code class="codeInline">wURL::setParameter($this->url, 'wFormStatus', '')</code> gesetzt und anschließend ohne Cache geladen (<code class="codeInline">wOutput::loadWithoutCache</code>) umgeleitet wird. Bei Fehlern wird dagegen <code class="codeInline">wFormStatus</code> auf „failed“ gesetzt und zusätzlich ein Anker <code class="codeInline">#wFormErrorMessages</code> verwendet.