How can I add fields to Dawn Theme Contact Form?

[chrispabey]

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.

[chrispabey]

For reference, this is how I want it to look.

[KabirDev]

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.

[AliReviews]

Hello @chrispabey ,

You can try to follow these steps:

• Go to Online Store -> Themes -> Actions -> Edit code
• Go to contact-form.liquid ->  find the HTML code for the contact form. It usually starts with a <form> element and contains various <input> and <textarea> tags.
• Locate the "Email" and "Phone Number" fields in the code. You'll need to swap their positions.
• Add the new fields for "Year," "Make," and "Model" within the form. To ensure they are in the same row and have the same width as the other fields, you can wrap them in a <div> container and apply appropriate CSS styles. Here's an example of the modified code:

<form action="/contact" method="post" class="contact-form">
  <div>
    <label for="contactFormName">Name</label>
    <input type="text" name="contact[name]" id="contactFormName" required>
  </div>

  <div>
    <label for="contactFormEmail">Email</label>
    <input type="email" name="contact[email]" id="contactFormEmail" required>
  </div>

  <div>
    <label for="contactFormPhone">Phone Number</label>
    <input type="tel" name="contact[phone]" id="contactFormPhone" required>
  </div>

  <div class="form-row">
    <div class="form-col">
      <label for="contactFormYear">Year</label>
      <input type="text" name="contact[year]" id="contactFormYear" required>
    </div>
    <div class="form-col">
      <label for="contactFormMake">Make</label>
      <input type="text" name="contact[make]" id="contactFormMake" required>
    </div>
    <div class="form-col">
      <label for="contactFormModel">Model</label>
      <input type="text" name="contact[model]" id="contactFormModel" required>
    </div>
  </div>

  <div>
    <label for="contactFormMessage">Message</label>
    <textarea name="contact[message]" id="contactFormMessage" required></textarea>
  </div

• Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

[chrispabey]

Hello @AliReviews, 

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.

 <div class="contact__fields">

        <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"

          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 }}"

        >

        <label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</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>

[scoobysam]

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. 

[Jahid-KlinKode]

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

[TheRitualThief]

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!