Contact2

<div class="index-section">
<div class="page-width">

<div class="grid" data-aos>
<div class="grid__item{% if section.settings.narrow_column %} medium-up--three-quarters medium-up--push-one-eighth{% endif %}">
{% if section.settings.title != blank %}
<header class="section-header">
<h2 class="section-header__title appear-delay">
{{ section.settings.title }}
</h2>
</header>
{% endif %}

<div class="form-vertical appear-delay-1">
{% form 'contact' %}

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

{{ form.errors | default_errors }}

<div class="grid grid--small">
<div class="grid__item medium-up--one-half">
<label for="ContactFormName-{{ section.id }}">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName-{{ section.id }}" class="input-full" name="contact[name]" 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-{{ section.id }}">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail-{{ section.id }}" class="input-full" name="contact[email]" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
</div>
</div>

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

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

<button type="submit" class="btn">
{{ 'contact.form.send' | t }}
</button>

{% endform %}
</div>
</div>
</div>
</div>
</div>

{% schema %}
{
"name": "Contact form",
"settings": [
{
"type": "paragraph",
"content": "All submissions are sent to the customer email address of your store. [Learn more](https://help.shopify.com/en/manual/using-themes/change-the-layout/add-contact-form#view-contact-form-submissions)."
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Contact us"
},
{
"type": "checkbox",
"id": "show_phone",
"label": "Show phone number"
},
{
"type": "checkbox",
"id": "narrow_column",
"label": "Narrow column",
"default": true
}
],
"presets": [{
"name": "Contact form",
"category": "Store information"
}]
}
{% endschema %}
{% schema %} { "name": "Contact form", "settings": [ { "type": "paragraph", "content": "All submissions are sent to the customer email address of your store. [Learn more](https://help.shopify.com/en/manual/using-themes/change-the-layout/add-contact-form#view-contact-form-submissions)." }, { "type": "text", "id": "title", "label": "Title", "default": "Contact us" }, { "type": "checkbox", "id": "show_phone", "label": "Show phone number" }, { "type": "checkbox", "id": "narrow_column", "label": "Narrow column", "default": true } ], "presets": [{ "name": "Contact form", "category": "Store information" }] } {% endschema %}