Remove Phone number field from Contact page in Dawn theme

Store Design
1

I’m hoping to remove the phone number contact field from my contact page entirely. I’m using the Dawn theme–is this possible?

2

Hi @canyonbird ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

1 Like
3

Hi @AvadaCommerce ,

URL is embercanyonsilver.myshopify.com and password is downriver

Thank you!

4

Hi @canyonbird ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
#ContactForm #ContactForm-phone {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

@canyonbird , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.contact form #ContactForm-phone{
    display: none !important;
}

.contact .contact__fields{
    margin-bottom: -20px;
}

@media (max-width: 749px){
    .contact .contact__fields{
    margin-bottom: -15px;
}

}

This code will ensure that it is executed exclusively at the contact page, fix the spacing between the fields and also work on mobile.

Kind regards,
Diego

1 Like
6

Thank you Diego, that did it! Appreciate the help

7

Hi!

I also want to remove the Phone Number field in the Contact Form of Dawn Theme. I tried your solution but it doesn’t seem to be entirely removed. You can see that there seems to be a little part of Ph of Phone left in the form just right above Message.

Please help.

2 Likes
8

The “accepted solution” is iffy at best – that just “hides” the field but doesn’t remove it.

Instead, comment out or remove that field from the actual page. Here’s how:

  1. In your Shopify Admin go to: Online store > Themes > Actions > Edit code

  2. Under Sections, double-click contact-form.liquid to edit

  3. Find this section:
  1. Add comment tags above and below that code to comment it out. Alternatively, just remove it altogether. Here’s what it looks like to comment it out (Add to close):
2 Likes
9

There are two methods can change it,sections and Assets,both of them can amend it.

1.And section//contact-from.liquid//

{{ 'templates.contact.form.phone' | t }}
[**Delete this part :grinning_face:** ]

section//contact-from.liquid//

Assets//Add some texts at bottom line//{if you choose this second part,it will display double horizontal line}
input#ContactForm-phone,
display: none !important;
}

10

Hello.

Someone please help!

Im trying to fix my contact page, that stupid .json code is crazy! This is what it looks like:

{
“sections”: {
“main”: {
“type”: “main-page”,
“settings”: {
“padding_top”: 36,
“padding_bottom”: 36
}
},
“form”: {
“type”: “contact-form”,
“settings”: {
“heading”: “”,
“heading_size”: “h1”,
“color_scheme”: “scheme-1”,
“padding_top”: 36,
“padding_bottom”: 36
}
}
},
“order”: [
“main”,
“form”
]
}

I removed the phone number text, and changed it to ‘subject’ but now when i want to type something in the subject field i can only enter Numbers, not letters. How can I fix that? I dont want a phone number field, i want a Subject field instead. Just Name, Email, Subject and Message field. Someone please help! I noticed that the code you guys use is not the same as the one I have on my “page.contact.json” page. This is the link of my form.

https://imas-jewelry.myshopify.com/pages/contact

11

Also I would like the Subject and Message fields a requirement.

12

Worked much better than the accepted solution for me! Thanks John