contact form setup

b2b-contact.liquid

<div class="rich-text rich-text--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="rich-text">
    <div class="grid page-width">
        <div class="grid__item text-center{% unless section.settings.full_width %} medium-up--two-thirds medium-up--push-one-sixth{% endunless %}">
            {% if section.settings.section_title != blank %}
                <h2 class="rich-text__heading separator
                   {% if section.settings.text_size == 'large' %} h1{% elsif section.settings.text_size == 'small' %} h3{% endif %}"
                    data-animate>
                    {{ section.settings.section_title | escape }}
                </h2>
            {% endif %}

            {% if section.settings.text != blank %}
                <div class="rich-text__body-text rich-text__body-text--{{ section.settings.text_size }} rte-setting">
                    {{ section.settings.text }}
                </div>
            {% endif %}

        {% form 'contact' %}
            {% if form.posted_successfully? %}
                <p class="form-success">
                    {{ 'contact.form.post_success' | t }}
                </p>
            {% endif %}

            {{ form.errors | default_errors }}

            <div class="grid">
                <div class="grid__item medium-up--one-half">
                    <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
                    <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words"
                           value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
                </div>
                <div class="grid__item medium-up--one-half">
                    <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
                    <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off"
                           value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
                </div>
            </div>

            <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
            <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*"
                   value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

            <label for="ContactFormOffice" class="label--hidden">{{ 'contact.form.office' | t }}</label>
            <input type="text" id="ContactFormOffice" name="contact[{{ 'contact.form.office' | t }}]" placeholder="{{ 'contact.form.office' | t }}"
                   value="{% if form[office] %}{{ form[office] }}{% endif %}">

            <label for="ContactFormDemand" class="label--hidden">{{ 'contact.form.demand' | t }}</label>
            <input type="text" id="ContactFormDemand" name="contact[{{ 'contact.form.demand' | t }}]" placeholder="{{ 'contact.form.demand' | t }}"
                   value="{% if form[demand] %}{{ form[demand] }}{% endif %}">

            <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
            <textarea rows="6" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]"
                      placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

            <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
        {% endform %}
        </div>
    </div>
</div>

{% schema %}
{
  "name": {
    "de": "Kontaktformular",
    "en": "Contact Form"
  },
  "class": "index-section index-section--contact",
  "settings": [
    {
      "type": "checkbox",
      "id": "full_width",
      "label": {
        "de": "Breitbild-Display",
        "en": "Wide display"
      }
    },
    {
      "type": "text",
      "id": "section_title",
      "label": {
        "de": "Titel",
        "en": "Heading"
      },
      "default": {
        "de": "Kontaktieren Sie uns",
        "en": "Contact us now"
      }
    },
    {
      "type": "richtext",
      "id": "text",
      "label": {
        "de": "Text",
        "en": "Text"
      },
      "default": {
        "de": "<p>Per Telefon <strong>+4930 8832 443</strong> oder per Kontaktformular.</p>",
        "en": "<p>Via telephone <strong>+4930 8832 443</strong> or though the contact form below.</p>"
      }
    },
    {
      "type": "select",
      "id": "text_size",
      "label": {
        "de": "Größe",
        "en": "Size"
      },
      "default": "medium",
      "options": [
        {
          "label": {
            "de": "Klein",
            "en": "Small"
          },
          "value": "small"
        },
        {
          "label": {
            "de": "Mittel",
            "en": "Medium"
          },
          "value": "medium"
        },
        {
          "label": {
            "de": "Groß",
            "en": "Large"
          },
          "value": "large"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": {
        "de": "Rich Text",
        "en": "Rich text"
      },
      "category": {
        "de": "Text",
        "en": "Text"
      }
    }
  ]
}
{% endschema %}