How to validate phone numbers in contact form with liquid?

Store Design

Topic summary

Issue: A user needs to validate phone numbers in a Shopify contact form using Liquid (not JavaScript). Requirements are: numbers must start with 6, 7, 8, or 9 and be exactly 10 digits long.

Solutions Discussed:

  • One suggestion pointed to HTML5 pattern validation using pattern="[0-9-]*" attribute
  • For collecting phone data: Use <input type="tel" name="contact[phone]"> to properly capture phone numbers in Shopify admin
  • To pre-fill phone fields for logged-in customers: {{ customer.default_address.phone }} retrieves the phone from customer’s default address

Key Technical Detail:
The customer.default_address object also provides access to other customer data like name and email, useful for auto-populating contact forms.

Status: The thread provides working solutions for both validation and data collection, though the original 10-digit validation requirement using pure Liquid remains partially addressed (HTML5 pattern attribute suggested instead).

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

Hi,

I’m tryin to validate the phone number in my shopify contact form. It has to start with the digits 6,7,8 and 9 and has to be 10 characters in length.

I would like to validate it within the html part of my code using liquid other than using javascript.

Below is my code for the form.

{% form ‘contact’ %}

{% if form.posted_successfully? %}

{% endif %}

{{ form.errors | default_errors }}

{% assign name_attr = ‘contact.form.name’ | t | handle %}

{{ ‘contact.form.name’ | t }}

{{ ‘contact.form.email’ | t }}

{% assign name_attr = ‘contact.form.phone’ | t | handle %}
{{ ‘contact.form.phone’ | t }}


{% endform %}

Any help would be great.

Thanks
Sagar

1 Like
2

@sagarsubbaiah

Thanks for post.

can you please try this code.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
1 Like
3

Hi @sagarsubbaiah , I am creating a contact form with phone number filed but I can’t collect the phone.

This field didn’t appear in the Shopify admin.

Can you collect the phone number?

I have try this code to collect phone but it didn’t work.

Could you help me? Thanks a lot.

4

Hi @Sofia1234

You can make the following changes

Refer https://www.w3schools.com/html/html_form_input_types.asp for more details.

Thanks

Sagar

5

Hi @sagarsubbaiah ,

Thanks for your response.

I have tried, but it didn’t work.

I can’t collect the phone.

Sofia1234_0-1633066283412.png
Sofia1234_0-1633066283412.png865×529 15.9 KB

Could you show me how to collect it. Thanks a lot

Best regards,

Sofia

1 Like
6

Hey @Sofia1234
probably too late to answer but this worked for me:

{{ customer.default_address.phone }}

Here’s the sample code for the input field:

<input class="#form-input" autocomplete="tel" type="tel" id="ContactForm-phone" name="contact[phone]" value="{% if form.phone %}{{ form.phone | escape }}{% elsif customer %}{{ customer.default_address.phone | escape }}{% endif %}" placeholder="{{ 'templates.contact.form.phone' | t }}">

NOTE: This only extracts the phone number from the default_address.

So, you need to extract the default_address name, email and other details too.

{{ customer.default_address.name }} <!-- get Name from Default Address  -->
{{ customer.default_address.email }} <!-- get Email from Default Address  -->

Sample Output:

ss2.png
ss2.png898×551 27.9 KB