Framer Forms Name and Phone Fields Validation
4225 次观看 · 2024-12-12
UI 设计
⚡️ Live website: https://formfieldsvalidation.framer.website
👉 Get the Remix file: https://chyrkov.lemonsqueezy.com/buy/b62811fb-e87e-4eb8-8512-d55837c23bcb (use code FANS10 to get 10% off!)
🙌 Sign up for Framer — https://framer.link/chyrkov
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
⚙️Updates:
2026.03.03
Fixed the issue of disappearing filled phone number, when user interacts with text field below the phone field. Thanks Nicola for feedback!
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.
About:
Recently, one of our clients requested to have a form validation with phone mask for the Framer Form on his website. The problem is that Framer Forms component do not support validation for Name and Phone fields, but I found a solution! In this video I will show the code override which I have created to fix this problem. I'll explain step by step how the set up a form and customize it. Also I will show you how to create and adjust phone mask for the Phone input field.
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
📝 Chapters:
0:00 — introduction
0:51 — how to add Framer Forms component
2:10 — add phone field input
4:30 — problem explanation
5:54 — how to apply code override
8:05 — check the results
8:40 — adjust the phone mask
11:10 — see the result
11:49 — set up the email to receive the data from the from
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#framer #framertutorial #uxui #webdesign
👉 Get the Remix file: https://chyrkov.lemonsqueezy.com/buy/b62811fb-e87e-4eb8-8512-d55837c23bcb (use code FANS10 to get 10% off!)
🙌 Sign up for Framer — https://framer.link/chyrkov
💌 Join my newsletter and learn more: https://sergeichyrkov.com/learn
⚙️Updates:
2026.03.03
Fixed the issue of disappearing filled phone number, when user interacts with text field below the phone field. Thanks Nicola for feedback!
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.
About:
Recently, one of our clients requested to have a form validation with phone mask for the Framer Form on his website. The problem is that Framer Forms component do not support validation for Name and Phone fields, but I found a solution! In this video I will show the code override which I have created to fix this problem. I'll explain step by step how the set up a form and customize it. Also I will show you how to create and adjust phone mask for the Phone input field.
______________________________
Check out my links ⬇️
▸ My website — https://sergeichyrkov.com
▸ My studio — https://chyrkov.studio
▸ My curated resources library — https://designsweets.co
▸ Twitter — https://twitter.com/sergeichyrkov
▸ Instagram — https://instagram.com/chyrkov
▸ Behance — https://www.behance.net/chyrkov
▸ Linkedin — https://linkedin.com/in/sergeichyrkov
______________________________
📝 Chapters:
0:00 — introduction
0:51 — how to add Framer Forms component
2:10 — add phone field input
4:30 — problem explanation
5:54 — how to apply code override
8:05 — check the results
8:40 — adjust the phone mask
11:10 — see the result
11:49 — set up the email to receive the data from the from
______________________________
😍 Monetarily Supporting The Channel:
If you like what I do and wish to support the channel monetarily, you can donate me with some coffee here: https://www.buymeacoffee.com/sergeichyrkov
This is appreciated and helps the channel, but please don't feel that it is necessary to enjoy my content.
______________________________
📃 Disclaimer:
Some of the links in my video descriptions are affiliate links, which means at no extra cost to you, I will make a small commission if you click them and make a qualifying purchase.
______________________________
#framer #framertutorial #uxui #webdesign