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

Hey Guya,

I’m trying to implement validations and validation messages like

Apply for Petal

(another website made using webflow) and am at my wits end how to do so. Could someone point me to resources or tell me what library they used?

Validation types needed:
Email
Phone number
Date of birth

Here’s something > Custom Form Styling - Webflow

Hope this helps :webflow_heart:

2 Likes

Thanks a lot @PeterDimitrov!

Part question: Any way to restrict only numbers/phone validation

1 Like

Hm I need to check. I don’t know, but I’m good searching google :smile:

2 Likes

@PeterDimitrov Hey Peter! Any updates mate?

1 Like

I was trying to make some things, but I need to check deeper. Restricting phone numbers ect. There’s different phone patterns.

@PeterDimitrov I understand. For my usercase, (and what petalcard.com did) was to restrict phone numbers by maximum digit (10 for the US). For eg Any number 8608840564 entered in the phone field it gets converted to this format (860) 994 - 0534

If there are more or less numbers, it shoots a validation error.

For the Zip code field they used similar logic to restrict max number to 6.

Hope this helps,
Saumik

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

Thanks for sharing @Isabel_Bruda :webflow_heart:

1 Like