contact.liquid
Das Template <keyword>contact.liquid</keyword> rendert die Formular-Seiten (Formular mit Mailfunktion), die Sie in der Shopmanagement-Software im Bereich <keyword>Seiten</keyword> konfiguriert haben.
Speicherort
Das Template muss unter <keyword>templates/contact.liquid</keyword> abgelegt werden.
Verfügbare Objekte
Innerhalb des <keyword>contact.liquid</keyword> Templates stehen folgende Objekte zur Verfügung:
- globale Objekte
- <obj>page</obj>
- <obj>forms.contact</obj>
Beschreibung
Eine Formular-Seite ermöglicht dem Kunden, per Mail Kontakt mit Ihnen aufzunehmen. Sie können in der Shopmanagement-Software im Bereich <keyword>Seiten</keyword> Formulare mit Mailfunktion hinterlegen. Für das Rendern dieser Seiten wird das hier beschriebene Template genutzt.
Der Kunde kann auf einer solchen Formular-Seite relevante Daten (Email-Addresse des Kunden, Vorname, Nachname, ...) erfassen und sobald er das Versenden mit einem Klick auf den Button bestätigt hat, werden diese Daten von der Webshop-Software verarbeitet und per Mail an Sie weitergeleitet. Sie können außerdem eine Captcha-Prüfung aktivieren, falls ein Schutz vor Spam-Emails erforderlich ist. Die folgenden Beispiele zeigen, wie das Template gestaltet werden kann.
Die Email, welche durch die Webshop-Software an Sie verschickt wird, können Sie ebenfalls individuell gestalten. Sehen Sie hierzu folgende Beschreibungen:
- <keyword>templates/email/contact_message.liquid</keyword>
- <keyword>templates/email/contact_message_html.liquid</keyword>
Beispiel Template
Das nachfolgende Beispiel zeigt das Markup einer einfachen Formular-Seite (ohne Captcha-Box).
In dem Beispiel wird ein HTML-Form aufgebaut. Das HTML-Form schickt die vom Kunden erfassten Daten an die Webshop-Software zur Verarbeitung. Damit die Webshop-Software eine korrekte Zuordnung der gegebenen Daten machen kann, müssen die Formularfelder wie hier ersichtlich mit den Werten bestückt werden, die über das <obj>forms.contact</obj> Objekt zur Verfügung stehen. Sie können selbst entscheiden, welche Felder Sie benötigen. Die Email-Addresse des Kunden ist jedoch Pflicht und muss daher immer übergeben werden. Sie können außerdem über das <obj>page</obj> Objekt auswerten, welche Formular-Seite vorliegt, falls eine unterschiedliche Darstellung pro Formular-Seite gewünscht ist.
{% assign form = forms.contact %}
{% assign fields = form.fields %}
<form method="post">
<label for="{{ fields.first_name.name }}">First name *</label>
<input type="text" name="{{ fields.first_name.name }}" required maxlength="30" value="{{ fields.first_name.value }}" />
<div class="clear"> </div>
<label for="{{ fields.last_name.name }}">Last name *</label>
<input type="text" name="{{ fields.last_name.name }}" required maxlength="30" value="{{ fields.last_name.value }}" />
<div class="clear"> </div>
<label for="{{ fields.phone.name }}">Phone</label>
<input type="text" name="{{ fields.phone.name }}" maxlength="30" value="{{ fields.phone.value }}" />
<div class="clear"> </div>
<label for="{{ fields.email.name }}">Email *</label>
<input type="email" name="{{ fields.email.name }}" required maxlength="40" value="{{ fields.email.value }}" />
<div class="clear"> </div>
<label for="{{ fields.subject.name }}">Subject *</label>
<input type="text" name="{{ fields.subject.name }}" required maxlength="60" value="{{ fields.subject.value }}" />
<div class="clear"> </div>
<label for="{{ fields.message.name }}">Message *</label>
<textarea name="{{ fields.message.name }}" required cols="40" rows="3" style="resize: none;" maxlength="1024">{{ fields.message.value }}</textarea>
<div class="clear"> </div>
<button type="submit">Submit</button>
<div class="clear"> </div>
</form>
Beispiel Template mit Captcha-Box
Das nachfolgende Beispiel zeigt das Markup einer einfachen Formular-Seite mit einer Captcha-Box:
Sie können in der Shopmanagement-Software für jedes Formular mit Mailfunktion separat einstellen, ob der Kunde eine Captcha-Prüfung durchführen muss. In folgendem Beispiel wird hierzu über das <obj>forms.contact.recaptcha</obj> Objekt abgefragt, ob die Captcha-Prüfung für die Seite aktiv ist. Falls ja, wird das Captcha angezeigt. Wenn das Captcha falsch ausgefüllt wurde, findet keine Weiterleitung der Email-Nachricht statt. Der Kunde wird aufgefordert, das Captcha entsprechend zu korrigieren, bevor er es erneut versuchen kann.
{% assign form = forms.contact %}
{% assign fields = form.fields %}
{% assign recaptcha = form.recaptcha %}
{% if recaptcha.recaptcha_challenge_error == true %}
<p>Please check the completed Captcha!</p>
{% endif %}
<form method="post">
<label for="{{ fields.first_name.name }}">First name *</label>
<input type="text" name="{{ fields.first_name.name }}" required maxlength="30" value="{{ fields.first_name.value }}" />
<div class="clear"> </div>
<label for="{{ fields.last_name.name }}">Last name *</label>
<input type="text" name="{{ fields.last_name.name }}" required maxlength="30" value="{{ fields.last_name.value }}" />
<div class="clear"> </div>
<label for="{{ fields.phone.name }}">Phone</label>
<input type="text" name="{{ fields.phone.name }}" maxlength="30" value="{{ fields.phone.value }}" />
<div class="clear"> </div>
<label for="{{ fields.email.name }}">Email *</label>
<input type="email" name="{{ fields.email.name }}" required maxlength="40" value="{{ fields.email.value }}" />
<div class="clear"> </div>
<label for="{{ fields.subject.name }}">Subject *</label>
<input type="text" name="{{ fields.subject.name }}" required maxlength="60" value="{{ fields.subject.value }}" />
<div class="clear"> </div>
<label for="{{ fields.message.name }}">Message *</label>
<textarea name="{{ fields.message.name }}" required cols="40" rows="3" style="resize: none;" maxlength="1024">{{ fields.message.value }}</textarea>
<div class="clear"> </div>
{% if recaptcha.show_captcha == 1 %}
{% comment %} Google-ReCaptcha -- captcha-themes: red, white, blackglass, clean {% endcomment %}
<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
function showRecaptcha(pubkey, element) {
Recaptcha.create(pubkey, element, {
theme: "white",
callback: Recaptcha.focus_response_field
});
}
</script>
<label {{ recaptcha.recaptcha_public_key }} >Captcha *</label>
<div id="captcha"></div>
<script type="text/javascript">
showRecaptcha('{{ recaptcha.recaptcha_public_key }}', 'captcha');
</script>
{% endif %}
<button type="submit">Submit</button>
<div class="clear"> </div>
</form>