Contact Us form - CrystalCommerce Liquid Documentation for Designers
CC Designer Docs

Contact Us form

The contact us page allows the customer to contact the store without using an email client by filling out the form. reCaptcha is used to prevent bots from spamming the stores.

Used in Route

  • /contact_us

File: contact_us.liquid

Default Liquid Template

<h1 class="pagetitle">{{ "contact_us.contact_us" | trans }}</h1>


{% if contact_us.success? %}
  <h2>{{ "contact_us.success_message" | trans }}</h2>
  <p>{{ "contact_us.get_back_to_you" | trans }}</p>
{% endif %}

{% if contact_us.errors? %}
  <h2>{{ "contact_us.errors.message" | trans }}</h2>
  {% if contact_us.email_invalid? %}
    <p>{{ "contact_us.errors.email_invalid" | trans }}</p>
  {% endif %}
  {% if contact_us.name_blank? %}
    <p>{{ "contact_us.errors.name_blank" | trans }}</p>
  {% endif %}
  {% if contact_us.message_blank? %}
    <p>{{ "contact_us.errors.message_blank" | trans }}</p>
  {% endif %}
{% endif %}

{% include "recaptcha_errors" %}

{% unless contact_us.success? %}
  <form id="contact_us_form" class="contact_us_form" action="/contact_us" method="POST">
    {{ token_tag }}
    <p>
      <label for="name">{{ "contact_us.your_name" | trans }}</label></br>
      <input type="text" id="name" class="rounded2 shadow1" name="name" value="{{ contact_us.name }}" />
    </p>
    <p>
      <label for="email">{{ "contact_us.your_email" | trans }}</label></br>
      <input type="email" id="email" class="rounded2 shadow1" name="email" value="{{ contact_us.email }}" />
    </p>
    <p>
      <label for="message">{{ "contact_us.your_message" | trans }}</label></br>
      <textarea type="message" id="message" class="rounded2 shadow1" name="message">{{ contact_us.message }}</textarea>
    </p>
    <p>
      {{ "recaptcha.please_verify_your_humanity" | trans }}
      {{ contact_us.recaptcha_tags }}
    </p>
    <p><input type="submit" id="input" class="rounded2 shadow1" value="{{ "buttons.submit" | trans }}" /></p>
  </form>
{% else %}
  <h3>{{ "contact_us.your_message_as_received" | trans }}</h3>
  <dl>
    <dt>{{ "contact_us.from" | trans }}</dt>
    <dd>{{ contact_us.name }} &lt;{{ contact_us.email }}&gt;</dd>
    <dt>{{ "contact_us.message" | trans }}</dt>
    <dd><pre>{{ contact_us.message }}</pre></dd>
  </dl>
{% endunless %}

Default Mobile Liquid Template

<h1 class="pagetitle">{{ "contact_us.contact_us" | trans }}</h1>

{% if contact_us.success? %}
  <h2>{{ "contact_us.success_message" | trans }}</h2>
  <p>{{ "contact_us.get_back_to_you" | trans }}</p>
{% endif %}

{% if contact_us.errors? %}
  <h2>{{ "contact_us.errors.message" | trans }}</h2>
  {% if contact_us.email_invalid? %}
    <p>{{ "contact_us.errors.email_invalid" | trans }}</p>
  {% endif %}
  {% if contact_us.name_blank? %}
    <p>{{ "contact_us.errors.name_blank" | trans }}</p>
  {% endif %}
  {% if contact_us.message_blank? %}
    <p>{{ "contact_us.errors.message_blank" | trans }}</p>
  {% endif %}
{% endif %}

{% if recaptcha %}
  {% unless recaptcha.valid? %}
    <h2>{{ "contact_us.errors.recaptcha_invalid" | trans }}</h2>
    {% for error in recaptcha.errors %}
      <p>{{ error }}</p>
    {% endfor %}
  {% endunless %}
{% endif %}

{% unless contact_us.success? %}
  <form id="contact_us_form" action="/contact_us" method="POST">
    {{ token_tag }}
    <p>
      <label for="name">{{ "contact_us.your_name" | trans }}</label>
      <input type="text" id="name" name="name" value="{{ contact_us.name }}" />
    </p>
    <p>
      <label for="email">{{ "contact_us.your_email" | trans }}</label>
      <input type="email" id="email" name="email" value="{{ contact_us.email }}" />
    </p>
    <p>
      <label for="message">{{ "contact_us.your_message" | trans }}</label>
      <textarea type="message" id="message" name="message">{{ contact_us.message }}</textarea>
    </p>
    <p>{{ contact_us.recaptcha_tags }}</p>
    <p><input type="submit" value="{{ "buttons.submit" | trans }}" /></p>
  </form>
{% else %}
  <h3>{{ "contact_us.your_message_as_received" | trans }}</h3>
  <dl>
    <dt>{{ "contact_us.from" | trans }}</dt>
    <dd>{{ contact_us.name }} &lt;{{ contact_us.email }}&gt;</dd>
    <dt>{{ "contact_us.message" | trans }}</dt>
    <dd><pre>{{ contact_us.message }}</pre></dd>
  </dl>
{% endunless %}

Drops Supported