Forms, Insert Menu

The Input Component

Benjamin

5:04

18K views

May 17, 2023

About this lesson

Meet the new Input Component, allowing you to easily capture email signups on your sites. Find it in the Insert Panel, within the Forms section. Drag and drop it onto your page, connect it to a service of your choosing, and you’re good to go. The component supports Loops.so, MailChimp, FormSpark, and GetWaitlist. On success, you can either redirect to a new page, or open a custom overlay—giving you much more control over the success state design and messaging. It’s extremely customizable too, and captures most common input layout patterns. Demo: https://input.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video 0:03I'm excited to introduce the input 0:06component for framer it allows you to 0:09more easily capture email signups on 0:11your framer sites and it has some brand 0:14new features like the ability to 0:16redirect to a different frame or page on 0:19a successful submission 0:21so let's get started and dive into our 0:24demo project you can find the new 0:26component in the insert panel under the 0:30forms category 0:32so let's drag and drop it onto our demo 0:35page and the first thing you might 0:37notice is that this one supports 0:39multiple services in one loops formspark 0:43milchimp and get waitlist I'll go ahead 0:46and connect this one to the framer 0:48newsletter so I'll paste our Loops ID on 0:52successful submissions we can do one of 0:55two things we can either open an overlay 0:59or we can redirect to a custom page this 1:03is especially powerful because it allows 1:06us to design our own thank you pages in 1:09framer but first let's customize our 1:12input a little we can change the layout 1:15as such we can also pick custom 1:18typefaces so let me add a web font to 1:22both the input and the button here 1:27I'll do the same for the button 1:30[Music]1:33and we can change the size and the font 1:36weight as well 1:38there we go 1:41together 1:43and this component is especially 1:46customizable everything from the layout 1:49to the colors to the typefaces can be 1:52customized 1:53so let's invert the color scheme a 1:57little bit here 1:59I'll also tweak the padding just a bit 2:03and let's do the same for our button 2:07there we go and we can even dock the 2:11button within the input as such 2:14which gives us some new property 2:16controls as well 2:18I like the docked option so I'll go 2:20ahead and customize the width and inset 2:23a little bit here and I think I'll set 2:26the inset property to be 4 pixels from 2:29the input this is looking better already 2:32and next we can start adding some 2:34borders so I'll go back to the input 2:37controls and select the Border here 2:41and let's add one that is quite subtle 2:45and then we can also add a focus state 2:48so on Focus I can make sure there's 2:51another border that animates from zero 2:54to one and this will overlay our 2:56existing border so it will provide a 2:59subtle highlight and then next we can 3:02add the real magic which is the redirect 3:05on success so we have two pages in this 3:09project the home page and a thanks page 3:13and the thanks page is just a simple 3:17confirmation page with a few nice appear 3:20effects and what's cool is that this 3:21page could be literally anything right 3:24you could use the CMS you could render 3:27custom components it could be anything 3:29speaking of components let's make sure 3:32that our input component also has a nice 3:35appear effect I'll simply right click on 3:38this text here copy the effect paste it 3:42onto the input and then I'll make sure 3:45that it has a slightly higher delay 3:49nice so now we're ready to add the 3:52redirect I'll go ahead and reselect the 3:55input component and I'll click on the 3:58redirect property 4:00here I'll select the thanks page that we 4:04looked at earlier and that should do the 4:07trick so let's go ahead and give this a 4:09preview the component is powered by 4:12motion and it has a few nice touches 4:15like this little Shake If you submit 4:17without typing anything and you can see 4:20our subtle Focus animation as well and 4:23finally if I put in my email you'll see 4:26that on a successful submission we get a 4:30lovely transition to our thank you page 4:33where I also have a link back to the 4:36home page and that's pretty much it for 4:39this video we hope you find this new 4:42component useful and we can't wait to 4:44see how you'll end up customizing it 4:46thank you so much for watching and stay 4:49tuned for more updates coming soon

TeachesForm Inputs Submit Actions

Also coversAppear Effect Components Frames Links Redirects Spacing Transitions & Easing Typography

Watch on YouTube ↗

‹ Framer Update: Fit Text

Framer Update: Site Search ›