Help!!! created drop down menu on contact page and it wont send to my email

Highlighted
New Member
1 0 0

Hey guys need some help i've added a dropdown menu to my contact page but when i send out the form and get the email it doesnt show me title and answer of what the customer put in the drop menu. Can someone  help!!!! I've put the code below of what i added and there is also a form of the entire code. Helpp!!! Thanks in advance 

 

 

<label for="{{ formId }}-SingleOptionSelector-1">Color<span aria-hidden="true"></span>

</label>
<select class="{{ formId }}-single-option-selector single-option-selector-product-template product-form__input" id="{{ formId }}-SingleOptionSelector-1" name= "See Sizes[See Sizes]" aria-required="true">

<option value="See Sizes" selected="selected">See Sizes</option>

<option value="Navy">Navy</option>

<option value="Royal">Royal</option>

<option value="Orange">Orange</option>

<option value="Black">Black</option>

<option value="White">White</option>

</select>

 

 

 

 

   
 
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
      
    {% if page.content.size > 0 %}
        <div class="rte">
          {{ page.content }}
        </div>
      {% endif %}

      <div class="contact-form form-vertical">
        {%- assign formId = 'ContactForm' -%}
        {%- comment -%}Modified by Lucas M (Shopify Theme Support) on May 01, 2020: made requested fields required{%- endcomment -%}
        {% form 'contact', id: formId %}
          {% include 'form-status', form: form, form_id: formId %}

          <div class="grid grid--half-gutters">
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-name">{{ 'contact.form.name' | t }} *</label>
              <input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}" required>
            </div>
            <div class="grid__item medium-up--one-half">
              <label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
              <input
                type="email"
                id="{{ formId }}-email"
                name="contact[email]"
                autocorrect="off"
                autocapitalize="off"
                value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
                aria-required="true"
                {%- if form.errors contains 'email' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-email-error"
                {%- endif -%}
                required
                >
              {%- if form.errors contains 'email' -%}
                <span id="{{ formId}}-email-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
                </span>
              {%- endif -%}
            </div>
          </div>

          <label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }} <span aria-hidden="true">*</span></label>
          <input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}" aria-required="true" required>
        
        
          <label for="{{ formId }}-Shipping Address">Shipping Address <span aria-hidden="true">*</span></label>
         <input type="text" id="{{ formId }}-Shipping Address" name="contact[Shipping Address]" value="" 
               aria-required="true"
                {%- if form.errors contains 'country' -%}
                  class="input--error"
                  aria-invalid="true"
                  aria-describedby="{{ formId }}-country-error"
                {%- endif -%}
                required
                >
              {%- if form.errors contains 'country' -%}
                <span id="{{ formId}}-country-error" class="input-error-message">
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span>{{ form.errors.translated_fields['country'] | capitalize }} {{ form.errors.messages['country'] }}.</span>
                </span>
              {%- endif -%}
      
      
        <label for="{{ formId }}-Product Code">Product code <span aria-hidden="true">*</span></label>
          <input type="text" id="{{ formId }}-Product Code" name="contact[Product Code]" value="" aria-required="true" required>
      	  
          <label for="{{ formId }}-Lining Color">Lining Color <span aria-hidden="true">*</span></label>
          <input type="text" id="{{ formId }}-Lining Color" name="contact[Lining Color]" value="" aria-required="true" required>
      	  
      <label for="{{ formId }}-Add Quantity for toddler (Minimum order of 50 per style) "> <b>Add Quantity</b> for toddler (Minimum order of 50 per style) <span aria-hidden="true"></span></label>
          <input type="text" id="{{ formId }}-Add Quantity for toddler (Minimum order of 50 per style)" name="contact[Add Quantity for toddler (Minimum order of 50 per style)]" value="" aria-required="true">
      
      <label for="{{ formId }}-Add Quantity for youth small (Minimum order of 50 per style)"><b>Add Quantity</b> for youth small (Minimum order of 50 per style) <span aria-hidden="true"></span></label>
          <input type="text" id="{{ formId }}-Add Quantity for youth small (Minimum order of 50 per style)" name="contact[Add Quantity for youth small (Minimum order of 50 per style)]" value="" aria-required="true">
      
      <label for="{{ formId }}-Add Quantity for adult medium (Minimum order of 50 per style)"><b>Add Quantity</b> for adult medium (Minimum order of 50 per style) <span aria-hidden="true"></span></label>
          <input type="text" id="{{ formId }}-Add Quantity for adult medium (Minimum order of 50 per style)" name="contact[Add Quantity for adult medium (Minimum order of 50 per style)]" value="" aria-required="true">
      
      <label for="{{ formId }}-Add Quantity for adult large (Minimum order of 50 per style)"><b>Add Quantity</b> for adult large (Minimum order of 50 per style) <span aria-hidden="true"></span></label>
          <input type="text" id="{{ formId }}-Add Quantity for adult large (Minimum order of 50 per style)" name="contact[Add Quantity for adult large (Minimum order of 50 per style)]" value="" aria-required="true">

       
         
        <label for="{{ formId }}-SingleOptionSelector-1">Color<span aria-hidden="true"></span>                  

                      </label>
                    <select class="{{ formId }}-single-option-selector single-option-selector-product-template product-form__input" id="{{ formId }}-SingleOptionSelector-1" name= "See Sizes[See Sizes]" aria-required="true">
                      
                        <option value="See Sizes" selected="selected">See Sizes</option>
                      
                        <option value="Navy">Navy</option>
                      
                        <option value="Royal">Royal</option>
                      
                        <option value="Orange">Orange</option>
                      
                        <option value="Black">Black</option>
                      
                        <option value="White">White</option>
                      
                        </select>
                        
      
          <label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
          <textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
          <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
      
          <div style="width:50%; display:inline;float:center; text-align:left;padding-right:50px; font-size:.7em">   
      <h4 style="color:#444">By sending out this form you agree to the terms and conditions*</h4>
    </div> 
        
   

        {% endform %}
      </div>
    </div>
  </div>
</div>
 
0 Likes
Highlighted
Tourist
7 2 0

I'm guessing any extra fields you add need to have a "name" attribute of "contact[something]" like the other fields. That's how addition properties work on the product page anyway.

 

So change the name of your select tag to something like this:

 

<select class="{{ formId }}-single-option-selector single-option-selector-product-template product-form__input" id="{{ formId }}-SingleOptionSelector-1" name= "contact[See Sizes]" aria-required="true">

 

I think that'll do it.

 

Cheers,

Kevin.

 

 

0 Likes