Remove phone number field from Contact page in Debut theme

Store Design

Topic summary

A user seeks to remove the phone number field from the Contact page in Shopify’s Debut theme.

Initial Solutions Provided:

  • Add CSS code input#ContactForm-phone { display: none; } to the theme.css file
  • Alternative approach: Delete phone-related code lines directly from the page.contact.liquid template file to prevent empty phone fields in form submissions

Issue Encountered:
The initial CSS solution removed the input field but left the “Phone Number” label visible.

Final Resolution:
Adding label[for=ContactForm-phone] { display: none; } to the bottom of theme.css successfully removed both the field and label.

Remaining Concern:
One participant reported the label removal worked, but the input box remained visible, potentially causing user confusion. This suggests the solution may not work consistently across all implementations.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

How do I remove the ‘phone number’ field from the ‘Contact’ page in the Debut theme?

2

Welcome to shopify community.

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

Thank you.

3

Thanks. It’s:

https://onyx-and-elm.myshopify.com/admin

Password is aulick

4

Please add below css in bottom of assets/theme.css file

input#ContactForm-phone {
display: none;

}
Please give ID or Class for ContactForm-phone label then give display: none css to remove phone number label.
Thank you.

5

@shelleyd

By adding CSS display none will remove the phone field from the contact page but when anyone will submit the form you will receive the form details with empty phone number field so please remove by following steps:

  1. Go to your store Templates > page.contact.liquid
  2. CTRL + F and search for ‘phone’, You will seee this types of two lines >> https://prnt.sc/26ekav5
  3. Remove them And click Save.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

6

Thanks. I’ve found the file, but I don’t understand what is meant by ‘Please give ID or Class for ContactForm-phone label then give display: none css’.

7

I managed to get rid of the field for the phone number using these instructions, but the ‘Phone Number’ label is still there. Could you please step me through what to do to remove this too?

8

Please try this one

label[for=ContactForm-phone] {
display: none;

}
Hope it work.
Thank you.

9

Do I replace the first code I added with code?

10

Do not replace .

Please add this new code in bottom of theme.css file

11

It worked! Thank you. :blush:

12

That did not work, it only removes the word phone but the box is still there- this will confuse people.