Validation for Name and Phone fields with custom phone mask
Make it with Workshop
Build your own component with AI
This component fixes the problem of Framer native forms, where users could enter numbers and symbols in the Name fields and letters in the Phone field. With this component, users will only be able to enter letters (Latin, Cyrillic) in the Name field and numbers in the Phone field. Also it adds a phone mask for the Phone input field which you can adjust to your country code.
This component solves issues:
Now user is only able to enter letters (Latin, Cyrillic) inside the "Name" field.
Now 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.
You can adjust the country code and mask from the right panel without going into the code!