Framer Forms validation for Name and Phone fields with phone input mask
Component
This Component solves issues:
User is only able to enter letters (Latin, Cyrillic) inside the "Name" field.
User is only able to enter numbers inside the "Phone" field.
Added phone input mask to display phone number in correct layout. You can adjust it for your country.
Component ready: you can adjust the country code and mask from the right panel without going into the code!
New
Second name field validation support.
Watch tutorial here.
✅ Sample Form with validation
Updates
2025.07.31
Added validation for last name field, in case you need to have 2 separate fields for a name. Just use "last-name" for your second input's name. Thanks for feedback Jose M!
2025.04.03
Update code, changed the structure. Code override removed, now it acts as a separate component. No extra code adjustments needed. Just copy and paste the component into the form layer.
You can easily adjust country code and mask from the right panel. No code needed!
(don't forget to change placeholder in the phone field if needed)
Now with free updates.