Changing the contact form page

Highlighted
New Member
41 0 0

I want to remove the "phone" field from the contact form, or at least making it not necessary

 

I found this topic by searching on the forum :

https://ecommerce.shopify.com/c/ecommerce-design/t/contact-us-page-429905#comment-430216

 

However the link to the guide to change the contact form doesn't work

0 Likes
Highlighted
Shopify Staff
Shopify Staff
621 15 168

Hi Jordan,

This should be possible to remove. Could I ask which theme you are using?

cheers,

Liam

Liam, Community Manager
0 Likes
Highlighted
New Member
41 0 0

Nice

 

i'm using venture

0 Likes
Highlighted
Shopify Staff
Shopify Staff
621 15 168

Thanks for your reply Jordan,

In this case, we would be looking to hide the code which generates the phone number field. Since this will require changing the code of your theme, I'd strongly recommend that you make a backup of your theme, in case you need to roll back to a previous version. 

With Venture, the code which generates the phone number field is in the Sections folder, within the page.contact.liquid file of your theme. On my copy of Venture, I'm seeing this code on line 33 of the page.contact.liquid file:

<label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[phone]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

What we will need to do is wrap this code in specific tags which will tell the browser to ignore this when loading the page. These are called comment tags, and in order to hide the unnecessary part of the code, put the {% comment %} tag before the code and {% endcomment %} tag after it.

This means your page.contact.liquid file would look like this:

Once you have wrapped the code in this comment tags, the phone number field should not load, and your form will appear like this:

I hope this helps Jordan, if you have any other questions, please let me know.

Cheers,
Liam | Partner Education
 
support@shopify.com

Liam, Community Manager
4 Likes
Highlighted
New Member
41 0 0

Thanks it worked !

0 Likes
Highlighted
Excursionist
11 0 8

Liam you Legend, thank You!!!

 

The above code also works for Debut Theme, just so everyone knows

 

Sample page https://chllen.com/pages/contact

1 Like
Highlighted
New Member
1 0 0

Hi Liam, 

 

This is awesome and super helpful, thank you! 

 

I'm hoping to change out the phone number field for order #'s instead, and would like to make it optional. I know how to change out for orders, but do you have any guidance on making the field not required? 

 

Thanks! 

Kristin 

0 Likes
Highlighted
Tourist
5 0 1

Jordan, I had the same question!  Liam, I know NOTHING about code, but followed your directions and solved this problem in about 7 seconds.  Thank you for offering clear support!  Now if I could just make my contact form fields have edges... 

0 Likes