How to Remove Phone Contact from Your Shopify Contact Form

Introduction: If you run a Shopify store and want to customize your contact form by removing the phone contact field, you’re in the right place. In this step-by-step guide, we will show you how to do this using the Shopify dashboard and by editing your store’s code. By following these instructions, you can create a more streamlined contact form tailored to your specific needs.

Note: Before making any changes to your code, it’s essential to create a backup of your theme to prevent any potential issues.

Step 1: Access Your Shopify Dashboard

1. Log in to your Shopify admin dashboard using your credentials.

Step 2: Select Edit Code

2. From the Shopify admin dashboard, navigate to Online Store and then click on Themes.
3. In the Themes section, find the theme you want to edit and click on the Actions dropdown.
4. Choose Edit code from the dropdown menu. This will take you to the theme’s code editor.

Step 3: Locate the Contact Form Code

5. In the code editor, look for the file named content-form.liquid. You can use the search function to find it quickly.

Step 4: Find the Phone Contact Code

6. Inside the content-form.liquid file, search for the section that contains the phone contact field code. You can use the search function again to locate it faster. Look for the following code:

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

Step 5: Comment Out the Phone Contact Code

7. To remove the phone contact field, you need to comment out the code. To do this, add {% comment %} at the beginning of the code block and {% endcomment %} at the end. Here’s how it should look after commenting out the code:

liquid

{% comment %} <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> {% endcomment %}

Step 6: Save Your Changes

8. After commenting out the code, make sure to save your changes by clicking the Save button in the code editor.

Step 7: Test Your Contact Form

9. To ensure that the phone contact field has been successfully removed, go to your store’s contact page and test the contact form. The phone field should no longer be visible.

Congratulations! You have successfully removed the phone contact field from your Shopify contact form. This customization can help streamline your form and make it more tailored to your store’s specific needs. Remember to always back up your theme and code before making any changes to ensure you can revert to a previous version if needed.