Schritt 1
Lege eine neue CMS-Seite an. Auf dieser Seite soll später das Formular eingebunden werden. Füge im WYSIWYG Editor im HTML-Modus den nachfolgenden Platzhalter ein und speichern anschließend die Seite.
<div id="retoure-form"></div>
Das hier angelegte
div
wird das Contact Form Plugin später durch unser wirkliches Retourenformular ersetzen.
Schritt 2
Im Backend des Plugins legen wir zunächst unter dem Reiter "Formulare" ein neues Formular an. Hierbei tragen wir als PHP-Query Selektor
#retoure-form
ein und wählen als PHP-Query Funktion
replaceWith
Das wird den in Schritt 1 eingerichteten Platzhalter durch das aktuelle Formular ersetzen.
Grundlagen
Es geht nun daran das Formular Schritt für Schritt aufzubauen. Da sich vieles wiederholt gehe ich nur auf die wichtigsten Einstellungen ein. Im Feld HTML-Content des Formulars können wir HTML-Code schreiben und diesen mit sogenannten Shorttags anreichern. Diese generieren uns Eingabefelder, die beim Senden des Formulars automatisch validiert werden und deren Werte wir später wiederverwenden können, um ein Template für die zu versendene Mail zu gestalten.
Ein einfaches Textfeld mit dem Label "Name" würden wir mit diesem Code erstellen:
[text label="Name" name="name"]
Hierbei ist zu beachten, dass unbedingt die Eigenschaft
name
gesetzt werden muss. Diese dient als Referenz zu dem Eingabefeld. Die Eigenschaft
label
generiert ein Beschriftung, die über dem Eingabefeld im Formular zu sehen ist.
Möchten wir das Textfeld zu einem Pflichteingabefeld machen genügt es ein
*
hinter den Namen des Elementes zu setzen, also zum Beispiel:
[text* label="Name" name="name"]
Diese Plichtangaben wird beim Senden des Formulars automatisch validiert. Im Falle eines Fehlers wird der Nutzer zur Neueingabe aufgefordert.
Neben
text
Elementen gibt es noch weitere Formularelemente, die das Plugin erzeugen kann. Deren Eigenschaften kann man unter dem Reiter "Hilfe" nachlesen. Wir verwenden in unserem Retourenformular folgende:
checkbox,
select,
upload,
submit
Bevor ein Formular senden können, benötigen wir einen Submit-Button. Diesen pflegen wir wie folgt ein:
[submit name="mysubmit" id=submit caption=Absenden]
Schritt 3 - Das Template erstellen
Nach und nach füllen wir jetzt das HTML-Content Feld mit diesen Elementen und ergänzen ein wenig HTML-Code um die tatsächliche Ausgabe zu verschönern. Hierbei bietet es sich an, das Formular ab und an zu speichern und sich das Resultat auf der CMS-Seite anzusehen.
Das
fieldset
Element, in dem wir die Artikelnummer und Status der Bezahlung abfragen, würde am Ende so aussehen:
<fieldset>
<h3>Ihre Bestellung</h3>
<ul class="input_block">
<li class="clear">
[text* name="bestellnr" label="Bestellnummer / Kundennummer / AB-Nummer*"]<br>
</li>
<li class="clear">
[checkbox name="bezahlt" label="Die Rechnung wurde teilweise oder ganz bezahlt"]
</li>
</ul>
</fieldset>
Schritt 4 - Emails formatieren
Das Contact Forms Plugin erzeugt standardmäßig für jedes Formular eine Ausgabe für die Mail. Diese kann jedoch bei vielen Eingabefeldern sehr schnell unübersichtlich werden.
Um die Ausgabe der Mail zu verschönern, wählen wir im Formular den Haken "Eigenes Mailtemplate verwenden". Es erscheint ein neues Eingabefeld, in dem wir das Emailtemplate bearbeiten können.
Der Code
[element-name]
setzt hierbei bspw. den Wert des Elements mit der Eigenschaft
name="element-name"
in die Mail ein.
Auch Bedingungen sind im Template möglich: nachfolgender Code würde den Wert eines Elementes abfragen und in die Mail einfügen, falls dieses vom Formularausfüller gesetzt wurde. So können wir nicht ausgefüllte Spalten in der Mail ausblenden.
{{element-name}}Dieses Element wurde vom Nutzer ausgefüllt!{{/element-name}}
Für unser obiges Beispiel, in dem wir die Artikelnummer und Status der Bezahlung abfragen, könnten wir diese nun wie folgt im Mail-Template ausgeben:
<h2>Retourenschein für [bestellnr]</h2>
<strong>Bestellnummer: </strong>[bestellnr]
{{bezahlt}}<strong>Die Rechnung wurde teilweise oder ganz bezahlt!</strong>{{/bezahlt}}
Wenn die Checkbox bezahlt gesetzt wurde (und nur dann), möchten wir dass in der Email in Hinweis auf die Bezahlung auftaucht.
Alles zusammen
Der Vollständigkeit halber hier das komplette HTML- und Mailtemplate des Retourenformulars:
HTML-Template (in das Feld HTML-Content eintragen)
<div>
<fieldset>
<h3>Ihre Bestellung</h3>
<ul class="input_block">
<li class="clear">
[text* name="bestellnr" label="Bestellnummer/Kundennummer/AB-Nummer*"]<br>
</li>
<li class="clear">
[checkbox name="bezahlt" label="Die Rechnung wurde teilweise oder ganz bezahlt"]
</li>
</ul>
</fieldset>
<fieldset>
<h3>Kontaktangaben</h3>
<ul class="input_block">
<li class="clear">
[text* name="vorname" label="Vorname*"]<br>
</li>
<li class="">
[text* name="nachname" label="Nachname*"]<br>
</li>
<li class="clear">
[text* name="telefon" label="Telefon*"]<br>
</li>
<li class="">
[email* name="email" label="eMail*" copy=1]<br>
</li>
</ul>
</fieldset>
<fieldset>
<h3>Artikel zurücksenden</h3>
<ul class="input_block">
<li>
[text name=artikel01 label="Artikelnr."]
</li>
<li>
[text name=menge_artikel01 label="Menge"]
</li>
<li>
[select name=grund01 id="grund01" label="Grund" options=",defekt,Gefällt nicht,Falschlieferung,anders als beschrieben,anders als abgebildet,falsch bestellt"]
</li>
</ul>
<ul class="input_block">
<li>
[text name="artikel02" label="Artikelnr."]
</li>
<li>
[text name="menge_artikel02" label="Menge"]
</li>
<li>
[select name=grund02 id="grund02" label="Grund" options=",defekt,Gefällt nicht,Falschlieferung,anders als beschrieben,anders als abgebildet,falsch bestellt"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=artikel03 label="Artikelnr."]
</li>
<li>
[text name=menge_artikel03 label="Menge"]
</li>
<li>
[select name=grund03 id="grund03" label="Grund" options=",defekt,Gefällt nicht,Falschlieferung,anders als beschrieben,anders als abgebildet,falsch bestellt"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=artikel04 label="Artikelnr."]
</li>
<li>
[text name=menge_artikel04 label="Menge"]
</li>
<li>
[select name=grund04 id="grund04" label="Grund" options=",defekt,Gefällt nicht,Falschlieferung,anders als beschrieben,anders als abgebildet,falsch bestellt"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=artikel05 label="Artikelnr."]
</li>
<li>
[text name=menge_artikel05 label="Menge"]
</li>
<li>
[select name=grund05 label="Grund" options=",defekt,Gefällt nicht,Falschlieferung,anders als beschrieben,anders als abgebildet,falsch bestellt"]
</li>
</ul>
</fieldset>
<fieldset>
<h3>Neubestellung</h3>
<p class="box_info">Ich möchte folgende Artikel neu bestellen:</p>
<ul class="input_block">
<li>
[text name=neu_artikel_nr01 label="Artikelnr."]
</li>
<li>
[text name=neu_artikel_bemerkung01 label="Bemerkung"]
</li>
<li>
[text name=neu_artikel_menge01 label="Menge"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=neu_artikel_nr02 label="Artikelnr."]
</li>
<li>
[text name=neu_artikel_bemerkung02 label="Bemerkung"]
</li>
<li>
[text name=neu_artikel_menge02 label="Menge"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=neu_artikel_nr03 label="Artikelnr."]
</li>
<li>
[text name=neu_artikel_bemerkung03 label="Bemerkung"]
</li>
<li>
[text name=neu_artikel_menge03 label="Menge"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=neu_artikel_nr04 label="Artikelnr."]
</li>
<li>
[text name=neu_artikel_bemerkung04 label="Bemerkung"]
</li>
<li>
[text name=neu_artikel_menge04 label="Menge"]
</li>
</ul>
<ul class="input_block">
<li>
[text name=neu_artikel_nr05 label="Artikelnr."]
</li>
<li>
[text name=neu_artikel_bemerkung05 label="Bemerkung"]
</li>
<li>
[text name=neu_artikel_menge05 label="Menge"]
</li>
</ul>
</fieldset>
<fieldset>
<h3>Dateianhänge</h3>
<p class="box_info">Laden Sie hier bitte Bilder der defekten bzw. reklamierten Ware hoch.</p>
[upload name="bilder" maxsize=10000 extensions=png,jpg,jpeg,pdf,bmp]
</fieldset>
<fieldset>
<h3>Bemerkungen</h3>
<ul class="input_block">
<li class="clear">
[textarea name=bemerkungen rows=10 cols=90 label="Bemerkungen"]<br>
</li>
</ul>
</fieldset>
<p>[submit name="retouresubmit " id=submit caption=Absenden]<button name="Print" type="button" class="button" onclick="javascript:window.print()">Forumular drucken</button></p>
</div>
Mail-Template (in das Feld HTML Content für Mailtemplate eintragen)
<h2>Retourenschein für [bestellnr]</h2>
<strong>Bestellnummer: </strong>[bestellnr]
{{bezahlt}}<strong>Die Rechnung wurde teilweise oder ganz bezahlt!</strong>{{/bezahlt}}
<h3>Kontaktdaten</h3>
<strong>Name:</strong> [vorname] [nachname]
<strong>Telefon: </strong>[telefon]
<strong>Email:</strong> [email]
<h3>Diese Artikel zurücksenden</h3>
{{artikel01}}<strong>Artikelnr:</strong> [artikel01] | <strong>Menge:</strong> [menge_artikel01] | <strong>Grund:</strong> [grund01]<hr>{{/artikel01}}
{{artikel02}}<strong>Artikelnr:</strong> [artikel02] | <strong>Menge:</strong> [menge_artikel02] | <strong>Grund:</strong> [grund02]<hr>{{/artikel02}}
{{artikel03}}<strong>Artikelnr:</strong> [artikel03] | <strong>Menge:</strong> [menge_artikel03] | <strong>Grund:</strong> [grund03]<hr>{{/artikel03}}
{{artikel04}}<strong>Artikelnr:</strong> [artikel04] | <strong>Menge:</strong> [menge_artikel04] | <strong>Grund:</strong> [grund04]<hr>{{/artikel04}}
{{artikel05}}<strong>Artikelnr:</strong> [artikel05] | <strong>Menge:</strong> [menge_artikel05] | <strong>Grund:</strong> [grund05]<hr>{{/artikel05}}
<h3>Diese Artikel neu bestellen</h3>
{{neu_artikel_nr01}}<strong>Artikelnr:</strong> [neu_artikel_nr01] | <strong>Menge</strong>: [neu_artikel_menge01] | <strong>Bemerkung:</strong> [neu_artikel_bemerkung01]<hr>{{/neu_artikel_nr01}}
{{neu_artikel_nr02}}<strong>Artikelnr:</strong> [neu_artikel_nr02] | <strong>Menge</strong>: [neu_artikel_menge02] | <strong>Bemerkung:</strong> [neu_artikel_bemerkung02]<hr>{{/neu_artikel_nr02}}
{{neu_artikel_nr03}}<strong>Artikelnr:</strong> [neu_artikel_nr03] | <strong>Menge</strong>: [neu_artikel_menge03] | <strong>Bemerkung:</strong> [neu_artikel_bemerkung03]<hr>{{/neu_artikel_nr03}}
{{neu_artikel_nr04}}<strong>Artikelnr:</strong> [neu_artikel_nr04] | <strong>Menge</strong>: [neu_artikel_menge04] | <strong>Bemerkung:</strong> [neu_artikel_bemerkung04]<hr>{{/neu_artikel_nr04}}
{{neu_artikel_nr05}}<strong>Artikelnr:</strong> [neu_artikel_nr05] | <strong>Menge</strong>: [neu_artikel_menge05] | <strong>Bemerkung:</strong> [neu_artikel_bemerkung05]<hr>{{/neu_artikel_nr05}}
{{bemerkungen}}<h3>Weitere Bemerkungen</h3>[bemerkungen]{{/bemerkungen}}