Solved

Remove Phone number field from Contact page in Dawn theme

canyonbird
Tourist
10 0 0

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

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 10 (10)

AvadaCommerce
Shopify Partner
3879 839 952

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.

banned
canyonbird
Tourist
10 0 0

Hi @AvadaCommerce ,

 

URL is embercanyonsilver.myshopify.com and password is downriver

Thank you!

AvadaCommerce
Shopify Partner
3879 839 952

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.

banned

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

canyonbird
Tourist
10 0 0

Thank you Diego, that did it! Appreciate the help

merryprintables
Tourist
5 0 2

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.

JohnS3DPrinter
Visitor
2 0 0

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:

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

 

4. 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 open and --> to close):

<!-- Comment out the Phone field
         <div class="field">
        <input
          type="tel"
          id="ContactForm-phone"
          class="field__input"
          autocomplete="tel"
          name="contact[{{ 'templates.contact.form.phone' | t }}]"
          pattern="[0-9\-]*"
          value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
          placeholder="{{ 'templates.contact.form.phone' | t }}"
        >
        <label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
      </div> -->

 

Zenaba
Visitor
3 0 0

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

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

<div class="field">
<input
type="tel"
id="ContactForm-phone"
class="field__input"
autocomplete="tel"
name="contact[{{ 'templates.contact.form.phone' | t }}]"
pattern="[0-9\-]*"
value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}"
placeholder="{{ 'templates.contact.form.phone' | t }}"
>
<label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
</div>[Delete this part😀]

 

2.

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;
}

 

IMASJEWELRY
New Member
4 0 0

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

 

 

 

 

IMASJEWELRY
New Member
4 0 0

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