Remove Phone number field from Contact page in Dawn theme

[canyonbird]

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

[AvadaCommerce]

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.

[canyonbird]

Hi @AvadaCommerce ,

URL is embercanyonsilver.myshopify.com and password is downriver

Thank you!

[AvadaCommerce]

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.

[diego_ezfy · 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

[canyonbird]

Thank you Diego, that did it! Appreciate the help

[merryprintables]

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]

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

[Intheflow]

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

[Zenaba]

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]

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]

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