Erweitern - Select Auswahl

Einleitung

Das Formular soll um eine Liste erweitert werden, wo der Benutzer eine Farbe auswählen kann.
Als Beispiel nehmen wir eine Liste mit Farben, für eine Mehfachauswahl ändern Sie die Liste entsprechend.

HTML Code

<label for="farbe">Farbe</label>
<select id="farbe" name="farbe">
<option {[select_farbe_0]} value="0">Bitte treffen Sie eine Auswahl</option>
<option {[select_farbe_blau]} value="blau">Blau</option>
<option {[select_farbe_lila]} value="lila">Lila</option>
<option {[select_farbe_schwarz]} value="schwarz">Schwarz</option>
</select>

Der obere HTML Code erstellt Select mit der Auwahl von drei Farben. Der wichtige Bereich ist rot markiert, dieser ist wichtig, damit nach absenden des Formulares die Auswahl des Benutzer wieder ausgewählt wird.

{[select_farbe_blau]}

{[select_farbe_lila]}

{[select_farbe_schwarz]}

Diese Variablen bestehen aus 3 Bereichen durch _ getrennt

als erstes das Keyword für eine Auswahl - select

als zweites der Name des Auswahlfeldes - farbe

als drittes der value Wert der Option - blau, lila oder schwarz

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

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 Auswahlfeld 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 {[farbe]} an die Stelle ein, an der die Auswahl des Benutzer erscheinen soll.

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

Farbauswahl: {[farbe]}

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