Not able to add a "reason for contact" drop down on the contact page.

Solved
Highlighted
Excursionist
14 0 13

So I am trying to add a "reason for contact" drop down menu in my shopify themes contact page. However nothing shows when I add the relevant code. It shows only the label "reason for contact" but the actual drop down does not show.

I have the "envy" theme from WeThemes. Code is below, the part that I added is the one spaced out from the rest of the code. There's also a pic showing the problem.

As far as I can tell I've followed the annotation correclty but it just shows nothing. Can someone help?Untitled.jpg

<div id="col-main" class="content">
	<div class="title-bar {{ settings.title-bar-styling }} custom-font">
		<h1>{{ page.title }}</h1>
		<div class="clear"></div>
	</div>
	<div class="row">
		<div class="col-md-8 col-md-offset-2 col-xs-12">
		{% if page.content != blank %}
		<div class="contact-page--content">
			{{ page.content }}
		</div>
		{% endif %}
	  {% form 'contact' %}
		<p class="success-msg form-success{% unless form.posted_successfully? %} hide{% endunless %}">
			{{ 'contact.form.post_success' | t }}
		</p>
		{% include 'form-errors-custom' %}
    <div id="contact-form">
			<div class="row">
				<div class="col-md-6 col-xs-12">
		      		<div class="form-group">
						<label for="name">{{ 'contact.form.name' | t }}*</label>
						<input type="text"
							name="contact[name]"
							id="name"
							class="form-control"
							value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}" required>
		      		</div>
				</div>
				<div class="col-md-6 col-xs-12">
		      		<div class="form-group">
						<label for="email">{{ 'contact.form.email' | t }}*</label>
						<input type="email"
							name="contact[email]"
							id="email"
							class="form-control"
							value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
							spellcheck="false"
							autocomplete="off"
							autocapitalize="off" required>
		      		</div>
				</div>
			</div>
 <div class="row">





				<div class="col-md-6 col-xs-12">
		      		<div class="form-group">
                        <label for="reason"> Reason for Contact </label>
                      	<select id="reason"
                                name="contact[reason]">
<option> General Inquiry</option>
<option> Question About Your Order</option>
<option> Shipping and Delivery </option>
<option> Marketing and Collaborations </option>
<option> Wholesale </option>  
                      	</select>					
				</div>
				</div>





				<div class="col-md-6 col-xs-12">    
                	<div class="form-group">
                  		<label for="orderid">Order ID (If Applicable)</label>
						<input	type="text"
  							id="orderid"
  							name="contact[orderid]"
  							class="form-control"
       						value="{% if form[orderid] %}{{ form[orderid] }}{% elsif customer %}{{ customer.last_order }}{% endif %}"/>
    				</div>              
				</div>     
		</div>       
			<div class="row">
				<div class="col-md-12">
		      <div class="form-group">
		        <label for="message">{{ 'contact.form.message' | t }}</label>
		        <textarea id="message" rows="10" class="form-control" name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
		      </div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12 btn-contact--wrapper">
		      <div class="form-group" id="newsletter-wrapper">
		        <input type="submit" class="btn btn-custom" value="{{ 'contact.form.send' | t }}" />
		      </div>
		      <div class="lds-dual-ring newsletter-spinner hide"></div>
				</div>
			</div>
    </div>
	  {% endform %}
	  </div>
	</div>
</div>

 

Highlighted
Shopify Partner
9340 1183 3275

Hello, @Ahmed_Gilani 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
14 0 13
Highlighted
Shopify Partner
9340 1183 3275

This is an accepted solution.

@Ahmed_Gilani 

Thanks for details.

1. Go to Online Store->Theme->Edit code
2. Asset->/style.scss.liquid->paste below code at the bottom of the file.

select#reason {
    display: block;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
14 0 13

Hey  Ketan,

Good work, the solution worked. You've been very helpful. Thanks

Highlighted
Shopify Partner
9340 1183 3275

@Ahmed_Gilani 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
14 0 13

@KetanKumar 

Hi ketan there is an additional issue. Now the drop down is working fine but I need to make the drop down field in the contact page as "required" field. Right now the drop down shows the first value as the default option, but i need the first value to be an empty value "Pick an Option" and then the user must pick an option themselves, do you get what I mean? So how can I make this happen? I need to make this option a required selection.

 

Highlighted
Shopify Partner
9340 1183 3275

@Ahmed_Gilani 

Thanks yes, add first value as you like 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
14 0 13

Hi Ketan,

Yes I can add the first value as I like, but how can I make the field required. For example right now if I leave first value as "Pick an Option" customer can still submit form without picking option. How do I make it "required" that they must pick an option. 

What I mean is that when the default value "Pick an Option" is selected, the customer must not be able to submit the form.

Highlighted
Shopify Partner
9340 1183 3275

@Ahmed_Gilani 

Thanks for it 

can you please share more details PM

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing