Adjusting Contact Form Fields

Highlighted
Tourist
6 0 2

Hello! 

I've been trying to customize my contact form for my shop but I am having trouble adjusting "First Name" and "Last Name" fields to align side by side. I created the "Last Name" field. 

Take a look at the current coding below: 

{% form 'contact' %}

{% if form.posted_successfully? %}
<p class="note 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" required id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="First Name" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" class="input-full">
</div>

<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="Last Name" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" class="input-full">
</div>

<div class="grid__item">
<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" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" class="input-full">
</div>

<div class="grid__item">
<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 %}" class="input-full">
</div>

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

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

{% endform %}

0 Likes
Highlighted
Shopify Staff
Shopify Staff
655 35 107

Hi, @fcorner.

Tira here, from Shopify Support.

This is a great question. Typically custom coding would be outside our scope of support. I did want to find you a resource to help, and I did some digging and found this Shopify Community thread that may help: Change of contact form fields. A member of the community wanted to change the alignment of their first and last name fields, and was able to receive a coding solution from a Shopify Partner.

As a refresher, check out our help doc on creating a contact page: Add a contact page to your store

Let me know if this helps!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes