Collect Emails With Framer | Input Field Tutorial | 100% FREE

in this video I will show you how to start collecting emails for free using framer and I will do it in less than 10 minutes without further Ado let's dive right into it to add an input field we go to the insert tab search for input and drag it inside our page something really cool about this element is that it comes with some pre-built animations like if you try to submit an empty build you have this nice little vibration or if something is wrong with your format of your email you have this explanation now to edit the element we selected and scroll down to the input section and here you will find all the settings for this component starting with the service we have four options but we're going to leave this for later then you have the success options here you have the option to take users to a different page or show an overlay and then you can set the layout to horizontal or vertical for this example we're going to leave it to horizontal and now to edit the button we come here here you have the option to show or hide your button I don't really know why would you hide it so we're gonna leave it there we're gonna change the copy to join wait list I will use Poppins 15 and semi ball and I will change the color to my primary color I will leave the text to White and I will dock it inside the input seal I will try to use all the customizations even if the result is not the best I want to show you all the possibilities you have here as you can see the we need to change the width because our text or our copy is really long so maybe 120 here you can change how much you want to inset it we're going to set it to four and you can add a shadow to if you want now to edit the input section we come here we can change the placeholder to enter your email you're going to change the color of the placeholder to our secondary color then we're going to change the fill to our secondary 600 that is in the same color of the background next is the color of the final input of the user we're going to change this to White we're going to leave the height out of radius we're gonna make it round and maybe it's a good time to add a border and we're gonna use our secondary color and we can also add a shadow and now to change the font of the placeholder and the final input text we go here and change these to Poppins and now I will preview this I think it's already looking good now we can add a focus mode to we select it I'm here to input and go to focus this will add a border whenever we are using the element we're going to make it one and we're going to use our primary color again I want to add more padding here and we'll also change the width of our component maybe to 340 now we preview I think it looks good it may not be the best looking input field but as I said I wanted to show you all the possibilities you have now if you try to submit something without having a service but we have this vibration so to be able to show you the success page I'll need first link it to one of the services as I mentioned before we have four options I couldn't really try Loops because they are currently on waitlist but MailChimp form spark and Gateway list the three of them offer you a free tier but getaway list is way more generous and you get all these features for free that's what I will be using this on this tutorial and I will also recommend it to you you want to keep your project free after creating a free account you will find these dashboard here we click on create wait list we can name it tutorial then we don't need to add any weight laser URL they have a pre-build referral program whereas if someone refers to someone else they can skip ahead some spots in your waitlist but yeah we don't we don't need this for the tutorial so here we just click save and as simple as that in two clicks we have our wait list here you have more other options that I will leave to you to explore for example you can edit the email that the customer will get but for this tutorial all we need to do is to copy the ID then back in framer we change this to get waitlist and paste the ID here and now if we preview and submit an email we don't have the vibration anymore and now if we go back to wait list here in signups we can see that we are already collecting emails if you're liking this video so far I only have one request for you and that's to click the like button below it will take you probably less than a second but it really helps the channel thank you now we can work on the success overlay or page I will spend more time working on the overlay because I believe it's a little more tricky than creating a page so to create an overlay we select the input field then we come here to the right and add overlay as you can see you can find the first problem here the header is automatically on top of our overlay and to solve that all you need to do is to increase the index here now I will add a text real quick now I will select these two and create a stack then I will use a success color for my field here we can make the hiding width to be beat content and we can add some padding I also want to have some border radius maybe eight we'll move it to the top and I will copy and paste check mark icon and a close icon to make the close I can close the overlay we select the element cam here in interactions and make it close overlay and we can add an appear animation for that we select the element come here in effect and we're gonna make it a slide from Top and we're gonna leave the default transition that is spring now to test this we close the overlay editing come here to our input field and here we need to select show overlay now if we preview input an email enter we have this nice login overlay and of course if we come to wait list and refresh this we're still capturing emails now I will show you really quick how to set up a success page so we go to the pages tab add a page here and we're not going to call it success here I will change the background to our secondary 600 that is the same background we were using and I will add a random texture if you have a page normally you will need a button to allow users to go back to the home page so I'll come to insert and search for button drag here and to link it to the home page I just select the element come here and Link and select home now we go back to our component and change this to pages and here we select the link that is success now if we preview an input an email enter it takes you to Our Success page this looks terrible but again I just wanted to show you how Pages work and if I click it takes me back to the home page and to finalize this I will just copy the same animation right click copy copy effect paste it here base effects and then I will change the delay and now we preview and we have these nice looking animation and that's it as simple as that you can start capturing emails completely free using framer I hope you found this helpful and if you want to learn more about framer figma and other design tools follow me and see you on my next tutorial

Channel: Product Sensei

Views: 8,658

Keywords: product design, figma, ui/ux, prototyping, user experience, web design, animations, user friendly

Id: NuLjFOXAQwg

Length: 9min 33sec (573 seconds)

Published: Sat Jul 29 2023