Erweitern - Radiobutton

Erweitern - Checkbox

Einleitung

Das Formular soll um eine Liste mit Auswahlfeldern erweitert werden, welche vom Benutzer ausgewählt werden können.
Als Beispiel nehmen wir eine Liste mit Farben, hierfür habe ich mir folgendes fieldset erstellt und habe drei Auswahlfelder eingefügt.

HTML Code

<legend>Ihre Lieblingsfarben</legend>
<div class="ct_checkbox">
<span style="display: inline;">
<label for="blau">Blau</label>
<input {[checkbox_blau_ja]} id="blau" type="checkbox" name="blau" class="checkbox" value="ja" />
<label for="schwarz">Schwarz</label>
<input {[checkbox_schwarz_ja]} id="schwarz" type="checkbox" name="schwarz" class="checkbox" value="ja" />
<label for="lila">Lila</label>
<input {[checkbox_lila_ja]} id="lila" type="checkbox" name="lila" class="checkbox" value="ja" />
</span>
</div>
</fieldset>

Der obere HTML Code erstellt ein Fieldset mit dem Titel "Ihre Lieblingsfarben" . Weiterhin enthält es drei Auswahlfelder mit den Wert ja je Farbe, die Auswahlfelder tragen die Namen blau, schwarz, lila. Der wichtige Bereich ist rot markiert, dieser ist wichtig, damit nach absenden des Formulares die Auswahlfelder wieder ausgewählt werden, wenn der Benutzer bereits eine Auswahl getroffen hat.

{[checkbox_blau_ja]}

{[checkbox_schwarz_ja]}

{[checkbox_lila_ja]}

Diese Variablen bestehen aus 3 Bereichen durch _ getrennt

als erstes das Keyword für eine Checkbox - checkbox

als zweites der Name der Checkbox - blau, schwarz oder lila

als drittes der value Wert der Checkbox - ja

Beides wird in {[]} eingeschlossen, daraus ergibt sich {[checkbox_blau_ja]}

HTML Template des Formulares

Öffnen Sie die Datei template/contactForm.html mit Ihrem HTML Editor oder einen Texteditor

Fügen Sie jetzt den erstellten HTML Code an die Stelle ins Formular ein, wo das Fieldset mit den Auswahlfeldern erscheinen soll und speichern Sie die Datei.

Einfügen der Variable in die E-Mail Vorlagen

Jede E-Mail wird als Alternative Mail versendet, das bedeutet das Benutzer die HTML E-Mails aktiviert haben eine HTML Mail bekommen und Benutzer die nur Text Mails empfangen können eine Text E-Mail.

Deshalb gibt es für E-Mails zwei Vorlagen eine für Text und eine für HTML E-Mails

template/email/email_html.html

template/email/email_text.html

Öffnen Sie beide Dateien und fügen Sie die Variable {[blau]}, {[schwarz]} und {[lila]} an die Stelle ein, an der die Auswahl des Benutzer erscheinen soll.

Die Variable besteht wie in den oberen Texten aus {[ ]} und dem Namen der Checkbox.

Farbauswahl
Blau: {[blau]}
Schwarz: {[schwarz]}
Lila: {[lila]}

Definieren des Pflichtfeldes

Informationen zum definieren von Pflichtfeldern finden Sie im folgenden Abschnitt.

Pflichtfelder

Hinweise zum Design und Layout in CSS

Sämtliche Positionen und Farbschemen wurden in CSS Dateien angegeben, diese können nach belieben angepasst werden.

weitere Informationen zu den CSS Dateien