Contact form phone number validation

[sagarsubbaiah]

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

       <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>

        <input type="text" id="ContactFormName" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}" required/>

        <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>

        <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}" required/>

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

        <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>

        <input type="tel" id="ContactFormPhone" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}" required/>

  <input type="submit" class="btn center" value="View Plans" style="background-color: #4CC7E6;" onclick="openPlans()" >

{% endform %}

Any help would be great.

Thanks

Sagar

[KetanKumar · Accepted solution]

@sagarsubbaiah 

Thanks for post.

can you please try this code.

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

[Sofia1234]

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.

<input type="text" name="contact[phone]">

Could you help me? Thanks a lot.

[sagarsubbaiah]

Hi @Sofia1234 

You can make the following changes

<input type="tel" name="contact[phone]"> 

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

Thanks

Sagar

[Sofia1234]

Hi @sagarsubbaiah ,

Thanks for your response.

I have tried, but it didn't work.

I can't collect the phone.

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

Best regards,

Sofia

[annabeth_chase]

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: