Example Shopify Register Form - Contact Form

{%- form 'contact', id: 'ContactForm' -%}
  {%- if form.posted_successfully? -%}
    <div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
  {%- elsif form.errors -%}
    <div class="form__message">
      <div class="form-status form-status-list caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }} 
        {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
      </div>
    </div>
  {%- endif -%}

  <div id="b2b-register" class="b2b-registration-form">     
    <div class="contact__fields">
      <input class="field__input" autocomplete="name" type="hidden" id="ContactForm-Trade" name="contact[Trade Application]"  value="New trade customer application to review">

      <div class="field">
        <input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}">
        <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
      </div>
      <div class="field field--with-error">
        <input
        autocomplete="email"
        type="email"
        id="ContactForm-email"
        class="field__input"
        name="contact[email]"
        spellcheck="false"
        autocapitalize="off"
        value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
        aria-required="true"
        {% if form.errors contains 'email' %}
            aria-invalid="true"
            aria-describedby="ContactForm-email-error"
        {% endif %}
        placeholder="{{ 'templates.contact.form.email' | t }}"
        >
        <label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
        {%- if form.errors contains 'email' -%}
        <small class="contact__field-error" id="ContactForm-email-error">
            <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
            <span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
        </small>
        {%- endif -%}
      </div>
    </div>
    <div class="field">
      <input type="tel" id="ContactForm-phone" class="field__input" name="contact[{{ 'templates.contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" placeholder="{{ 'templates.contact.form.phone' | t }}">
      <label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
    </div>
    <div class="field">
      <input class="field__input" autocomplete="name" type="text" id="ContactForm-company" name="contact[Company]" placeholder="Company">
      <label class="field__label" for="ContactForm-company">Company</label>
    </div>
    <div class="field">
      <input class="field__input" autocomplete="name" type="text" id="ContactForm-website" name="contact[Website]" placeholder="Website">
      <label class="field__label" for="ContactForm-website">Website</label>
    </div>

    <div class="field">
      <textarea
          rows="10"
          id="ContactForm-body"
          class="text-area field__input"
          name="contact[{{ 'templates.contact.form.comment' | t }}]"
          placeholder="{{ 'templates.contact.form.comment' | t }}"
      >
          {{- form.body -}}
      </textarea>
      <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
    </div>
    <div class="contact__button">
      <button type="submit" class="button">
        {{ 'templates.contact.form.send' | t }}
      </button>
    </div>
  </div>
{%- endform -%}