Forms

Creating Custom Form Submit Buttons in Framer

Creating Custom Form Submit Buttons in Framer

Creating Custom Form Submit Buttons in Framer

Joseph

·

2:11

·

18K views

·

About this lesson

Let’s say another designer, or even we ourselves, took the time to design a custom Submit button component, along with all of its states and variants. It would be silly to have to do that over and over again each time we insert a new form if we want them to match. Fortunately, as special as the default Submit button is, we can actually just swap it with something else.

https://www.youtube.com/watch?v=UtLJmeI-D4g&t=0s Intro

https://www.youtube.com/watch?v=UtLJmeI-D4g&t=20s Swapping Submit Buttons

https://www.youtube.com/watch?v=UtLJmeI-D4g&t=37s Adding a Setting a Submit Button

https://www.youtube.com/watch?v=UtLJmeI-D4g&t=86s Mapping Form States

https://www.youtube.com/watch?v=UtLJmeI-D4g&t=109s Wrap up

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00let's say another designer or even we0:02ourselves took the time to design a0:04custom submit button component along0:07with all of its states and variants it0:09would be really silly to have to do that0:11over and over again each time we insert0:14a new form if we want things to0:17[Music]0:19match fortunately as special as a submit0:22button is we can actually swap it with0:24something else the quickest way would be0:26to rightclick on the default button0:29hover over replace with and choose the0:32new component but let's pretend for a0:35moment that we didn't know we could do0:36that let's say I was a little bit more0:38heavy-handed and just deleted the0:41default button then went to the assets0:43panel grabbed this button that Benjamin0:46designed and dragged it into the form it0:50may look like the same result but now we0:52need to let framer know we want this0:54element to behave as the submit button0:56from now on to do that we can right0:59click on the new button1:00and choose set submit button now we're1:03good to go let's hit enter to crack open1:06this component and see what's inside1:08looks like we've got the usual loading1:10disabled success and error variants in1:13here the name of the variants actually1:15don't need to be anything specific as1:17long as they make sense to us because1:19we're going to map each variant to the1:22corresponding State ourselves let's head1:24back to the homepage and with the button1:27selected we can head over to the form1:29States section of the properties panel1:31we just need to click to add a state1:34I'll pick loading for example then1:37choose which variant we want to switch1:38to when the form is in the loading State1:41depending on what we're trying to1:43accomplish we can add the rest of the1:44states or not totally up to you and1:48we're done we've replaced the button set1:51it to submit the form and mapped each1:54variant to the corresponding State now1:56head to framer and set up your own1:58custom submit buttons

Watch on YouTube ↗

‹ CMS Update: Blockquotes, Heading Links, Image Styles, Field Dividers and more

Using Optional Form Input Properties in Framer ›

More in this topic

Form Input Variants and Validation in Framer7:52
Form Input Variants and Validation in Framer
Forms18K views · 1 year ago
4 Ways to Update Form Status in Framer6:05
4 Ways to Update Form Status in Framer
Forms19K views · 1 year ago
Using Optional Form Input Properties in Framer5:19
Using Optional Form Input Properties in Framer
Forms13K views · 1 year ago
Introducing: Framer Forms0:48
Introducing: Framer Forms
Announcement93K views · 1 year ago
Framer Update: Forms16:32
Framer Update: Forms
Framer Update36K views · 1 year ago
Creating your first form in Framer10:59
Creating your first form in Framer
Forms108K views · 1 year ago
The Input Component5:04
The Input Component
Forms18K views · 3 years ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.