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.09.04
Our input controller now supports case-insensitive field names. That means fields like NAME, Last-Name, Tel, or Email will all work correctly, regardless of capitalization. No more silent failures due to mismatched attribute casing. Thanks for feedback Adrian!
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.