Startseite > Template- und Themeprogrammierung > Shop-Templates > contact.liquid

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:

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:

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>

Weiter Informationen

Beispiel für Abbildung mehrerer Formulare mit Mailfunktion