Framer Forms Validation with Phone Mask Component

Framer Forms component do not support validation for Name and Phone fields. This means users can enter numbers and symbols in the Name field and letters in the Phone field. This creates a poor user experience and can result in receiving lots of useless emails from your form.

I have created a component which fixes this problem! With the update, users will only be able to enter letters 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.

⚡️ Live website: formfieldsvalidation.framer.website

💥 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.
• UPD: Now you can adjust the country code and mask from the right panel without going into the code!

📌 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)

⚡️ Live website: formfieldsvalidation.framer.website

👉 Watch my YouTube Tutorial (old version with override): https://youtu.be/QIfhxh6Uqio

🙌 Sign up for Framer — https://framer.link/chyrkov

❤️ Tips and likes are always welcome!😉

Only for personal and commercial use, not for resale!

No distribution without permission.