Forms

4 Ways to Update Form Status in Framer

Joseph

6:05

19K views

Jul 31, 2024

About this lesson

When a visitor on your site submits a form, there are a few different ways that we can keep them informed on the status of their submission — four ways in fact. Let’s take a look at each one.

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

https://www.youtube.com/watch?v=LULoacFwLAE&t=14s Method 1: Submit Button Variants

https://www.youtube.com/watch?v=LULoacFwLAE&t=60s Method 2: Redirect

https://www.youtube.com/watch?v=LULoacFwLAE&t=93s Method 3: Overlay

https://www.youtube.com/watch?v=LULoacFwLAE&t=224s Method 4: Form Variants

https://www.youtube.com/watch?v=LULoacFwLAE&t=334s 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:00when a visitor on your site submits a 0:02form there are a few different ways that 0:03we can keep them informed on the status 0:06of their submission four ways in fact 0:09let's take a look at each 0:11[Music]0:12one in the first video in this series we 0:15looked at how the default submit button 0:17is a component packed with variants 0:19right out of the box like loading 0:22success and error which map to the 0:24status of the form itself with the 0:27submit button selected we can head to 0:29the properties panel 0:30and find a special section where we can 0:32map each state of the form to one of the 0:35variants we were just looking at by 0:37default loading and success are already 0:39here and mapped and from the plus button 0:42we can choose to add error and disabled 0:45States then map them to the appropriate 0:47variant easy peasy in fact it's pretty 0:50much set up for us from the moment the 0:52form Builder hits the canvas on the 0:54published site we've got our nice 0:56lightweight mechanism to keep the 0:58visitor informed 1:00the second mechanism to confirm that a 1:02form has been submitted successfully is 1:04to redirect the visitor to another page 1:07which we can do by selecting the entire 1:09form heading to the properties panel and 1:13clicking 1:14redirect here we can choose which page 1:16we want to redirect the visitor to 1:18automatically once the form has been 1:20submitted successfully I'll select my 1:22thank you page and then on the publish 1:25site once the form has been submitted 1:27successfully the visitor will 1:29automatically be redirected to the thank 1:31you 1:32page the third mechanism we haven't 1:34talked about yet and that's to trigger 1:36an overlay when the form is submitted 1:39successfully or encounters an error 1:42again with the form itself selected 1:44we'll head over to the properties panel 1:46head down to 1:47overlays and click the plus icon to add 1:50an overlay here we can choose a relative 1:52overlay which would be positioned 1:54relative to our selection like a tool 1:56tip or a fixed overlay like a model that 2:00takes over the screen neither is 2:02necessarily right or wrong but for our 2:04success message I'm going to choose a 2:06fixed 2:07overlay if you're new to overlays the 2:09blue bar at the top of the breakpoint 2:11shows us that we're now in an editing 2:13mode for the overlay itself this way we 2:16can eventually leave this mode and the 2:18overlay won't interfere with us editing 2:19the rest of the page the entire overlay 2:22is essentially a special frame on the 2:24layers panel and anything we put inside 2:26of it will appear when the overlay is 2:28triggered over on the properties panel 2:30we can make the important decision of 2:32when this overlay should appear since we 2:35added this overlay to a form we get the 2:37additional option of showing it on 2:39success or error in addition to the 2:42usual click and hover I'm adding a 2:44success state so I'm going to leave it 2:46on success I'm going to leave everything 2:48almost at the defaults but I will select 2:51the fill and bump the opacity up to 90%2:54so the text in the background doesn't 2:56mess with the readability of the 2:57foreground and the zindex which I'm 3:00going to bump up to make sure this 3:01overlay is on top of everything there we 3:04go now to add some content I've got this 3:07slick little animated thank you 3:09component that I set up ahead of time 3:11I'll go to the assets panel and drag it 3:14onto the canvas overlays themselves 3:17aren't Stacks so we'll have to use 3:19absolute positioning for any layer 3:21that's a direct child of the overlay I 3:23want this to be completely centered so 3:26I'll click the Align horizontally button 3:28and align vertically 3:31all good here let's preview the publish 3:33site and see how it 3:35looks perfect clicking away will close 3:38the overlay but if you're worried about 3:39visitors getting stuck you can always 3:41add a button to the overlay to close it 3:44the fourth and final mechanism is to 3:46turn the entire form into a component 3:48and create a variant for the success 3:50State this allows for animated 3:52transitions confirmation without leaving 3:54the page and reusability all in one 3:57solution let's walk through how to do it 4:00first things first we've got to turn 4:01this whole form into a component I'll 4:04select the form rightclick and choose 4:07create 4:08component now we can edit our new 4:10component here we can see that we've 4:12just got our one default variant for the 4:15normal state of the form but we can 4:16click to the right of it on the canvas 4:18to create a second variant the second 4:21variant is going to be our success state 4:23so I'll rename it to keep things 4:26organized next I'm going to select all 4:28these top level frames frames and press 4:30the zero key to reduce the opacity to 4:33zero I'm using opacity rather than 4:35visibility on purpose so that we can get 4:37a smooth transition then I'll head to 4:40the assets panel grab my thank you 4:42animation component and drag it into the 4:45second variant since the frame for this 4:48variant has a vertical stack layout 4:49applied our new component has set itself 4:52to relative positioning and is therefore 4:55positioned in the content flow of the 4:57stack let's actually switch the position 4:59to absolute so that we can position it 5:01independently of the other content we've 5:03hidden now we can select the first 5:05variant and drag an interaction over to 5:08the second variant here we can choose 5:10what sort of event should trigger this 5:12transition to happen since this is a 5:14form framer gives us some form specific 5:16states to trigger on in our case we'll 5:19choose success we can see that loading 5:21and error States can be created this 5:23exact same way now we should be all set 5:27now when I click submit the form 5:29component switches variants in place 5:32when the submission goes through 5:33successfully to recap we're able to 5:35confirm a successful form submission 5:38using four different mechanisms 5:40switching between variants of the submit 5:42button redirecting to another page 5:45triggering an overlay and switching 5:47between variants of the entire form now 5:50head to framer and create some awesome 5:51form submission States for your sites

TeachesForm States Submit Actions

Also coversAbsolute Positioning Breakpoints Component Variants Components Frames Hover & Press Redirects Sizing Stacks Transitions & Easing

Watch on YouTube ↗

‹ The Anatomy of a Framer Project (Fundamentals Lesson 2)

Framer Update: Fetch — Leverage the power of APIs to add dynamic data to your Framer Site ›