Swapping Submit Buttons

Fortunately, as special as a submit button is, we can actually swap it with something else. The quickest way to do this is to right-click on the default button, hover over “Replace with”, and choose the new component. But let’s pretend for a moment that we didn’t know we could do that.

Adding and Setting a Submit Button

Let’s say I was a little bit more heavy-handed and just deleted the default button, then went to the assets panel, grabbed this button that Benjamin designed, and dragged it into the form. It may look like the same result, but now we need to let Framer know we want this element to behave as the submit button from now on. To do that, we can right-click on the new button and choose “Set Submit Button”. Now we’re good to go.

Mapping Form States

Let’s hit enter to crack open this component and see what’s inside. Looks like we’ve got the usual loading, disabled, success, and error variants in here. The names of the variants don’t need to be anything specific as long as they make sense to us because we’re going to map each variant to the corresponding state ourselves.

Let’s head back to the homepage and with the button selected, we can head over to the form states section of the properties panel. We just need to click to add a state, pick loading for example, then choose which variant we want to switch to when the form is in the loading state. Depending on what we’re trying to accomplish, we can add the rest of the states or not. It’s totally up to you.

Wrap Up

We’re done. We’ve replaced the button, set it to submit the form, and mapped each variant to the corresponding state. Now head to Framer and set up your own custom submit buttons.