Add dropdown Field to Contact Form

Highlighted
Explorer
45 0 23

Has anyone successfully added a dropdown field to a Shopify contact form?

I know how to get the dropdown field to display via HTML, but the selection is not being passed in the email that is sent to my account.

Here is the code I am using, any suggestions would be greatly appreciated!

<div class="sixteen columns clearfix collection_nav">

  <h1 class="collection_title">

    {{ page.title }}

  </h1>

</div>

 

{% form 'contact' %}

  {% if form.posted_successfully? %}

    <p class="quote">Thanks for contacting us! We'll get back to you as soon as possible.</p>

  {% endif %}

 

  {% if form.errors %}

    <p class="quote">Not all the fields have been filled in correctly. Please try again.</p>

  {% endif %}

 

  <div class="section clearfix">  

    <div class="ten columns">

        {{ page.content }}

    </div>

 

    <div class="five columns offset-by-one">

 

         <label for="contact_form_name">Name <span class="red">*</span></label>

         <input type="text" id="contact_form_name" name="contact[name]" required value="{{ contact.fields.name }}" />

 

          <form action="">

          <select name="cars">

          <option value="volvo">Damaged Package</option>

          <option value="saab">Wrong Item Recieved</option>

          <option value="fiat">Missing Item From Order</option>

          </select>

          </form>

 

         <label for="contact_form_email">Email <span class="red">*</span></label>

         <input type="text" id="contact_form_email" name="contact[email]" required pattern="[^ @]*@[^ @]*" value="{{ contact.fields.email }}"/>

 

         <label for="contact_form_phone">Phone Number</label>

         <input type="text" id="contact_form_phone" name="contact[phone]" value="{{ contact.fields.phone }}" />

 

         <label for="contact_message">Message</label>       

         <textarea id="contact_message" name="contact[body]" required rows="5">{{ contact.fields.body }}</textarea>

 

          <input type='submit' class="submit action_button" value="Submit" />

    </div>

  </div>  

{% endform %}

 

0 Likes
Highlighted
Shopify Expert
43 1 4

Hi @Greg_Nelson1  you can add any form field give name ="contact[Country]" pass filed to contact form 

you can this code inside the form tag,  I can see some tag not properly on your code snippets 

 

 <div class="grid__item medium-up--one-half">
                  <label for="ContactFormCountry-">Country*</label>
                  <select id="ContactFormCountry-" name="contact[Country]">
                     <option value="Afganistan">Afghanistan</option>
                     <option value="Albania">Albania</option>
                     <option value="Algeria">Algeria</option>
             </select>
  </div>

 

more reference https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form

0 Likes