Custom validation like petalcard.com (made in webflow too)

Hi @Saumik_Tewari,

maybe you solve this already but for future people looking for the solution, you can check this documentation “Phone Input Validation”.

On the other hand, I manipulated the Regex to achieve what I needed for my project.

a) First field: my phone field needed only numbers without spaces, special characters or separations.
b) Second field: zip code field with maximum of 5 digits and only numbers

So this is how I did it →

a) PHONE FIELD CUSTOM - ONLY NUMBERS
*** - STEP 1 - ***
– After Creatig your form, click on the phone field, go to its settings and under Custom Attributes click the “+” to add an attribute.

*** - STEP 2 - ***
– A small window will pop up, where you can put “Name” and “Value”. (as you see on the screenshot below). Add the following:
Name: pattern
Value: [1]*$

Don’t forget to include the ^ at the beginning and ending it with the dollar sign $.
THAT’S IT! You can now publish and test it, by putting letters, special characters or spaces and trying to submit the form


b) ZIP CODE FIELD CUSTOM - ONLY NUMBERS AND LIMITED TO 5 DIGITS
– Same as before. Click on the Zip Code field and go to the settings. Add a new attribute called pattern and put the following Regex into the Value field:

^(\d{5})

– Starts with “^(” and ends with “})”

Good luck!!


  1. 0-9 ↩︎

4 Likes