Custom Contact Page - District Theme

Solved
justaskme
Excursionist
16 0 2

Hello,

 

I created a custom contact page with additional fields. However, 2 fields I created "state and country" do not have the same length as the other fields on the form. How can I fix this? 

 

I also noticed the outline of the both fields is different from the grey boxes as the others.

 

Can anybody tell me how to fix these issues?  See image below

contactuspage.jpg

0 Likes
KetanKumar
Shopify Partner
20594 2133 7796

@justaskme 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
made4Uo
Tourist
69 0 3

This is a CSS code issue. You need to inspect your website and manipulate the sizes. It would help if you give us more information, like code  you are using to be able to help

0 Likes
justaskme
Excursionist
16 0 2

<!-- /templates/page.contact.liquid -->
{% comment %}

This page template is a requirement if you are submitting your theme to the Shopify Theme Store.
Be sure to select page.contact as the template from the admin page to have this template take effect.

For information on adding more fields, visit:
- http://docs.shopify.com/support/configuration/store-customization/adding-fields-to-the-liquid-contac...

{% endcomment %}
<section class="page page-top">
<div class="wrapper">
<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
</header>
<header class="page-header">
<h1>{{ page.title }}</h1>
</header>
</div>
</section>

<section class="page">
<div class="wrapper">
{% comment %}
Regular page content goes here.
{% endcomment %}

<div class="content-container narrow contact rte">
{{ page.content }}
</div>

{% comment %}
Contact form starts here
{% endcomment %}
<div class="content-container narrow contact form">
{% form 'contact' %}

{% comment %}
Successful message
{% endcomment %}
{% if form.posted_successfully? %}
<p class="note form-success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}

<div class="selection-wrapper">
{{ form.errors | default_errors }}
</div>

<div class="selection-wrapper">
<div class="input-row">
{% assign name_attr = 'contact.form.name' | t | handle %}
<label for="ContactFormName" class="hidden-label">{{ 'contact.form.name' | t }}</label>
<input type="text" required id="ContactFormName" class="input-full" name="contact[{{ name_attr }}]" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="input-row">
{% assign name_attr = 'contact.form.organization' | t | handle %}
<label for="ContactFormOrganization" class="hidden-label">{{ 'contact.form.organization' | t }}</label>
<input type="text" required id="ContactFormOrganization" class="input-full" name="contact[{{ name_attr }}]" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.organization }}{% endif %}">
</div>
<div class="input-row">
{% assign name_attr = 'contact.form.city' | t | handle %}
<label for="ContactFormCity" class="hidden-label">{{ 'contact.form.city' | t }}</label>
<input type="text" required id="ContactFormcity" class="input-full" name="contact[{{ name_attr }}]" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.city }}{% endif %}">
</div>
<div class="input-row">
{% assign name_attr = 'contact.form.state' | t | handle %}
<label for="ContactFormState" class="hidden-label">{{ 'contact.form.state' | t }}</label>
<select>
<option>Alabama</option>
ETC
</select>
</div>
<div class="input-row">
{% assign name_attr = 'contact.form.country' | t | handle %}
<label for="ContactFormCountry" class="hidden-label">{{ 'contact.form.country' | t }}</label>
<select>
<option>United States (USA)</option>
ETC
</select>
</div>
<div class="input-row">
{% assign name_attr = 'contact.form.phone' | t | handle %}
<label for="ContactFormPhone" class="hidden-label">{{ 'contact.form.phone' | t }}</label>
<input type="tel" required id="ContactFormPhone" class="input-full" name="contact[{{ name_attr }}]" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
</div>
<div class="input-row">
<label for="ContactFormEmail" class="hidden-label">{{ 'contact.form.email' | t }}</label>
<input type="email" required id="ContactFormEmail" class="input-full" name="contact[email]" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
</div>
<div class="input-row">
<label for="ContactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" required id="ContactFormMessage" class="input-full" name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>
<p class="submit">
<input type="submit" class="button solid" value="{{ 'contact.form.send' | t }}">
</p>
</div>


<div>

{% endform %}

</div>
</div>
</section>

0 Likes
KetanKumar
Shopify Partner
20594 2133 7796

@justaskme 

please show me store url?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
justaskme
Excursionist
16 0 2

@KetanKumar 

Check your email

0 Likes
KetanKumar
Shopify Partner
20594 2133 7796

@justaskme 

sorry but i can't see any email for your please sent again and mention to email id 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
justaskme
Excursionist
16 0 2

@KetanKumar 

I just sent it again. Email ID is same as my username

0 Likes
KetanKumar
Shopify Partner
20594 2133 7796

@justaskme 

but your store is password protect 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
justaskme
Excursionist
16 0 2

@KetanKumar 

 

Check email

0 Likes