Hello all,
I’m looking to add three more fields to the contact form, those being “Year,” “Make,” and “Model.” I’d like all three of these fields to be in the same row so that they are the same width as the other fields please.
If possible I’d also like to swap the “Email” and “Phone Number” field so that the Email field is the bigger one.
Thank you very much.
Hello @chrispabey ,
You can try to follow these steps:
- Save changes
Hope this can help. Let us know if you need any further support.
Ali Reviews team.Hello @irene-vintage ,
Thank you for your response. This has helped me in creating the new fields, but unfortunately the sizing is all now the same. For reference, the website is https://nisshokuautomotive.com/pages/contact.
I replaced the original code (which is below) with your code. This was likely my error, as I input the code in the wrong spot. Still, here is the code (lines 54-126) that I replaced with your code which resulted in this new look.
Please let me know how I can fix this.
Thank you very much.
<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 }}”
{{ ‘templates.contact.form.name’ | t }}
<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 }}”
{{- ‘templates.contact.form.email’ | t }}
*</label
{%- if form.errors contains ‘email’ -%}
{{ ‘accessibility.error’ | t }}
{%- render ‘icon-error’ -%}
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}
{%- endif -%}
<input
type=“tel”
id=“ContactForm-phone”
class=“field__input”
autocomplete=“tel”
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 }}”
{{ ‘templates.contact.form.phone’ | t }}
{{- ‘templates.contact.form.comment’ | t -}}
I’m having the exact same issue. How can we make the contact us page exactly how the original poster’s picture? Adding those codes messes up the table lines.
Hi @chrispabey , check out this YouTube video for the solution to add fields to contact page form in Shopify’s Dawn theme: https://www.youtube.com/watch?v=0LI7iyHABpo
Anyone looking for adding extra fields like text, dropdown, radio, checkbox fields to the Shopify contact form in 2024, you can check the below video. I hope it will help you.
Hi all,
I followed the instructions in the referrenced video and just like in the video I have the dropdowns first lines in need for adjustment - both their position and colors are off. Can someone please help? ChatGPT isn’t helping much. Ideally, I’d like to solve this in the liquid file without having to add additional CSS code.
website is: https://websitesforcoaches.myshopify.com/pages/contact
pass: reskay
Thank you kindly!
Yep, you can do this in Dawn, but it takes a bit of theme editing since the default contact form doesn’t let you add rows and columns from the editor.
1. Add the extra fields (Year / Make / Model)
You’ll want to edit the contact-form.liquid (or sometimes contact-form.liquid inside sections/) file.
Inside the form, duplicate one of the existing input blocks and adjust the names/labels, for example:
<div class="field-group">
<input type="text" name="contact[year]" placeholder="Year">
<input type="text" name="contact[make]" placeholder="Make">
<input type="text" name="contact[model]" placeholder="Model">
</div>
This groups them in one row.
2. Style them so they sit on the same line
Add some CSS in theme settings → custom CSS (or in base.css):
.field-group {
display: flex;
gap: 10px;
}
.field-group input {
flex: 1;
}
Now they’ll share the space evenly and match the layout of other form fields.
3. Swap the Email and Phone fields
Still in contact-form.liquid, just move the block of code for the email input above or below the phone input so they display in the order you want. Dawn renders them in the same order they’re written in the file.
If you need the email field to be wider, make sure it sits in a single full-width row and the phone field is grouped only if needed.
4. If you’d prefer not to touch theme code
You can also use a contact form widget/app instead. Those usually let you build fields visually and embed them as a block or popup. It’s easier if you expect the form to grow or need more layout flexibility later.
But for your specific case, editing the Liquid + small CSS tweak is totally doable.