Individuell gestaltetes Beispielformular
Veröffentlichungsdatum: 05. August 2010
Änderungsdatum: 21. Juni 2021
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.