Framer Forms validation for Name and Phone fields with phone input mask
Code 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.
New
UPD 04.2025: Changed to a separate component. Now you can adjust the country code and mask from the right panel without going into the code!
Watch tutorial here.
✅ Sample Form with validation
Updates
03.04.2025
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.