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

contact.liquid

Das Template <keyword>contact.liquid</keyword> rendert die Kontakt-Seite des Shops.

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:

Beispiel Template

Das nachfolgende Beispiel zeigt das Markup eines einfachen Kontaktformulars:

{% assign form = forms.contact %}
{% assign fields = form.fields %}

<form method="post">
    <label for="{{ fields.first_name.name }}">Vorname *</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 }}">Nachname *</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 }}">Telefon</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 }}">Betreff *</label>
     <input type="text" name="{{ fields.subject.name }}" required maxlength="60" value="{{ fields.subject.value }}" />
     <div class="clear"> </div>
              
     <label for="{{ fields.message.name }}">Nachricht *</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">Senden</button>
     <div class="clear"> </div>
 </form>

Beispiel Template mit Captcha-Box

Das nachfolgende Beispiel zeigt das Markup eines einfachen Kontaktformulars mit einer Captcha-Box:

{% assign form = forms.contact %}
{% assign fields = form.fields %}
{% assign recaptcha = form.recaptcha %}

{% if recaptcha.recaptcha_challenge_error == true %}
  <p>Bitte überprüfen Sie das ausgefüllte Captcha!</p>
{% endif %}

<form method="post">
    <label for="{{ fields.first_name.name }}">Vorname *</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 }}">Nachname *</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 }}">Telefon</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 }}">Betreff *</label>
    <input type="text" name="{{ fields.subject.name }}" required maxlength="60" value="{{ fields.subject.value }}" />
    <div class="clear"> </div>
              
    <label for="{{ fields.message.name }}">Nachricht *</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">Senden</button>
    <div class="clear"> </div>
 </form>