Beispiel für Abbildung mehrerer Formulare mit Mailfunktion
Beispiel Umsetzung mehrerer Formulare im Template contact.liquid
Das nachfolgende Beispiel zeigt das Markup im contact.liquid Template um mehrere einfache Formulare abzubilden, anhand des jeweiligen Handles der Seiten vom Typ "Formular mit Mailfunktion". Das Handle der Seite ist im <obj>page</obj> Objekt gespeichert. Wie die Handles der jeweilgen Seite vergeben werden, ist im Abschnitt Shopmanagement-Navigation-Seiten beschrieben.
In dem Beispiel wird anhand des Seiten Handles eine if-Abfrage aufgebaut. Bei passendem Handle wir dann nur das jeweilige Formular eingeblendet. Wir gehen in diesem Beispiel von der Annahme aus, es existieren 2 Seiten vom Typ "Formular mit Mailfunktion" mit den jeweiligen Handles "contactform" und "anothermailform".
So wie unter contact.liquid beschrieben, können nun die unterschiedlichen Sektionen mit unterschiedlichen Formularfelder mit unterschiedlichem Pflichtverhalten ausgestattet werden. Felder die über das <obj>forms.contact</obj> Objekt zur Verfügung gestellt werden.
Um eine gesonderte Darstellung der versendeten Emails zu ermöglichen ist es zwingend notwendig das Handle der Seite als verstecktes Inputfeld mit zu versenden.
{% assign form = forms.contact %}
{% assign fields = form.fields %}
{% if page.handle == "contactform" %}
<form method="post">
<input type="hidden" name="{{ fields.handle.name }}" value="{{ page.handle }}">
...
</form>
{ % endif % }
{% if page.handle == "anothermailform" %}
<form method="post">
<input type="hidden" name="{{ fields.handle.name }}" value="{{ page.handle }}">
...
</form>
{ % endif % }
Beispiel Umsetzung Formulare außerhalb Template contact.liquid
Formulare können auch außerhalb des contact.liquid Templates erstellt und abgesendet werden.
Das nachfolgende Beispiel zeigt das Markup um ein Formular mit 6 Felder auf der Starteite des Shops (index.liquid) darzustellen. Nach dem gleichen Muster können Formulare auch in den anderen Shop-Templates erstellt werden.
Info
Beachten Sie: in allen Templates, abgesehen von contact.liquid, steht das <obj>forms.contact</obj> Objekt nicht zur Verfügung.
Weil das <obj>forms.contact</obj> Objekt nicht verfügbar ist muss für das "name" Attribut der Formularfelder eine andere Notation verwendet werden.
Der Name des Feldes muss nach folgendem Muster aufgebaut werden: contact[Hier der Name des Feldes] . Die Namen der Felder finden Sie hier.
Beispiele:
- für Vorname contact[first_name]
- für Nachname contact[last_name]
- für Telefon contact[phone]
- ... usw
Das "action" Attribut des Formulars muss die URL der Seite vom Typ "Formular mit Mailfunktion" enthalten. An diese Seite werden die Formulardaten gepostet. Anhand des vergebenen Handles kann auf der Seite eine gesonderte Meldung nach dem Absenden des Formulars angezeigt werden.
In unserem Beispiel gehen wir davon aus existiert eine Seite vom Typ "Formular mit Mailfunktion" mit dem Handle "contactform" und der URL "/kontakt-formular/".
Um eine gesonderte Darstellung der versendeten Emails zu ermöglichen ist es zwingend notwendig das Handle der Seite als verstecktes Inputfeld mit zu versenden.
Markup in der Datei index.liquid:
<form method="post" action="/kontakt-formular/">
<input type="hidden" name="contact[handle]" value="contactform">
<label for="contact[first_name]">First name *</label>
<input type="text" name="contact[first_name]" required maxlength="30" value="" />
<div class="clear"> </div>
<label for="contact[last_name]">Last name *</label>
<input type="text" name="contact[last_name]" required maxlength="30" value="" />
<div class="clear"> </div>
<label for="contact[phone]">Phone</label>
<input type="text" name="contact[phone]" maxlength="30" value="" />
<div class="clear"> </div>
<label for="contact[email]">Email *</label>
<input type="email" name="contact[email]" required maxlength="40" value="" />
<div class="clear"> </div>
<label for="contact[subject]">Subject *</label>
<input type="text" name="contact[subject]" required maxlength="60" value="" />
<div class="clear"> </div>
<label for="contact[message]">Message *</label>
<textarea name="contact[message]" required cols="40" rows="3" style="resize: none;" maxlength="1024"></textarea>
<div class="clear"> </div>
<button type="submit">Submit</button>
<div class="clear"> </div>
</form>
Markup in der Datei contact.liquid:
{% assign form = forms.contact %}
{% if form.post_successful == true %}
{% if page.handle == "contactform" %}
The success message for the page with the handle "contactform"
{% else %}
The success message for pages with other handles then "contactform"
{% endif %}
{% else %}
{% if page.handle == "contactform" %}
The failure message for the page with the handle "contactform"
{% else %}
The failure message for pages with other handles then "contactform"
{% endif %}
{% endif %}
Beispiel Umsetzung mehrerer Formulare im Mail-Template contact_message.liquid / contact_message_html.liquid
Das nachfolgende Beispiel zeigt das Markup um eine gesonderte Darstellung, abhänging vom vergebenen Handle Attribut in den jeweiligen Seiten vom Typ "Formular mit Mailfunktion", in den Mail Templates contact_message.liquid und contact_message_html.liquid zu realisieren.
In folgendem Beispiel gehen wir von der Annahme aus, es existieren 2 Seiten vom Typ "Formular mit Mailfunktion" mit den jeweiligen Handles "contactform" und "anothermailform" und jeweils mit 6 bzw. 3 Feldern.
Markup in der Datei contact_message.liquid:
{% nooutput %}
{% assign form = forms.contact %}
{% assign fields = form.fields %}
{% endnooutput %}
{% if fields.handle.value == 'contactform' %}
{% capture mail_output %}Contact details:
First name: {{ fields.first_name.value }}
Last name: {{ fields.last_name.value }}
Phone: {{ fields.phone.value }}
Email: {{ fields.email.value }}
Subject: {{ fields.subject.value }}
Message:
{{ fields.message.value }}{% endcapture %}{{ mail_output | dangerous }}
{% capture mail_subject %}{{ fields.subject.value | dangerous }}{% endcapture %}
{% endif %}
{% if fields.handle.value == 'anothermailform' %}
{% capture mail_output %}Contact details:
First name: {{ fields.first_name.value }}
Last name: {{ fields.last_name.value }}
Subject: {{ fields.subject.value }}
{% endcapture %}{{ mail_output | dangerous }}
{% capture mail_subject %}{{ fields.subject.value | dangerous }}{% endcapture %}
{% endif %}
Markup in der Datei contact_message_html.liquid:
{% nooutput %}
{% assign form = forms.contact %}
{% assign fields = form.fields %}
{% endnooutput %}
{% if fields.handle.value == 'contactform' %}
<!DOCTYPE html>
<html lang="{{ shop.locale.language }}">
<body>
<h3>Contact details:</h3>
<b>First name:</b> {{ fields.first_name.value }}<br/>
<b>Last name:</b> {{ fields.last_name.value }}<br/>
<b>Phone:</b> {{ fields.phone.value }}<br/>
<b>Email:</b> {{ fields.email.value }}<br/>
<b>Subject:</b> {{ fields.subject.value }}<br/><br/>
<b>Message:</b><br/>
{{ fields.message.value | newline_to_br }}<br/><br/>
</body>
</html>
{% capture mail_subject %}{{ fields.subject.value | dangerous }}{% endcapture %}
{% endif %}
{% if fields.handle.value == 'anothermailform' %}
<!DOCTYPE html>
<html lang="{{ shop.locale.language }}">
<body>
<h3>Contact details:</h3>
<b>First name:</b> {{ fields.first_name.value }}<br/>
<b>Last name:</b> {{ fields.last_name.value }}<br/>
<b>Subject:</b> {{ fields.subject.value }}<br/><br/>
</body>
</html>
{% capture mail_subject %}{{ fields.subject.value | dangerous }}{% endcapture %}
{% endif %}