Checkout - Telephone Number as a Required field

Support
,
#1

I really like Snip Cart but one thing that I don’t understand is why telephone number isn’t a standard field in the form, I know not every implementation would want or need a telephone number, but many would.

So because telephone number is not a standard field we have to add it to our check out form using the customisation features of snipcart.

On the face of it, this is a simple thing to do, but there is a problem.

I’m currently using version 3.0.29 and have added a custom field in to the delivery step (step 2) like this:

<div class="snipcart-form__field"> 
  <snipcart-label class="snipcart__font--tiny" for="contactTelephoneNumber"> 
    Contact Number 
  </snipcart-label> 

  <snipcart-input name="contactTelephoneNumber" title="UK Mobile Number" required pattern="^(\+44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$"></snipcart-input> 
</div>

The validation works, and 8 times out of 10 the customer can’t make an order without filling in the form in the correct format. (UK Mobile)

HOWEVER

There is a bug/edge case that will allow the user to make an order WITHOUT filling in this very important field this is how you can reproduce this:

  1. Add something to the basket and go to the check out

  2. Fill in step one (billing) and click “go to delivery”

  3. Select a delivery option - BUT DON’T fill in the custom field

  4. Reload the page OR go back and continue shopping

  5. When you go back to the checkout steps you will see that it is now on step 3 - the user can now make an order without filling in the required custom field.

The only way I can think to fix this is to move the custom field in to the payment step, this is FAR from ideal as you are going to be confusing customers as in to why they have to put the telephone number in the payment step. - Some users may even put the contact number in the credit card filed. or the credit card number in the telephone field.

I have upgraded to the latest version of snipcart in my test environment (v3.2.1) but this has not made any difference.

Would love to know if Snip Cart HQ have this problem on their radar and what other people’s experience of this issue is.

In my opinion this is a pretty bad bug and should be high priority to be fixed.

Your thoughts please…

#2

Hey @Ayo,

We have plans to introduce custom validation in an upcoming version of the cart. I can’t commit on an ETA at this point, but this is something that is requested a lot.

For now, I’d recommend making the label text a bit more explicative for your users, so it will be more clear why it shows up in the payment step. I know it’s not ideal, but that would be the way to go for now.

#3

Hi @Ayo ,

Just add “required” at the end of the input field like this :

<snipcart-input name="phone" required></snipcart-input>

image