How to Create a Waitlist with Framer & Loops

hey guys so welcome to my first ever framer tutorials so in this video I'll be showing you how you can create a wait list in framer with loops the email marketing software and this is how the waitlist is going to look like as you can see we have a heading over here description the form to collect email and over here we have a floating notification kind of thing that you can click and you can just you can just show more information over here we have a header at the top you can have anything for the button over here a Twitter icon another button and the logo over here so this is my free framework template and you can download it from the first link in the description of this video and it will take you to my website framer8.com and here you will be able to download it for free you can also see the live demo by clicking over here and yeah you can also check out all this information over here just click on download free button and then you will be able to complete the purchase you can donate if you like but you can also enter zero and you will be able to download it for free so so now you can enter your email over here I'll quickly enter it and click on submit order and that's it now I can click on continue button and it will take you to the waitlist remixed link and now if you already have a firmware account it will be copied to your framework account right over here and now you can start making your changes so the platform that we are using to collect emails is Loops it's a pretty cool new tool for email marketing and I have also recently started using it and it's bloody awesome I would highly recommend using it and this is how it looks like you can see all the features of this tool over here and the pricing is also very reasonable 49 slash month for 5000 contacts and more alright so we have our wait list over here with this page and you can start customizing it right now so let's say you want to change the headline over here join the wait list for you can have your brand name over here so let's say my brand name is frame rate let's change it to something like ABC company something like that and then you can also change your description over here very easily simply double click or you can simply click and change the content on the right sidebar over here and then we have this floating bar over here you can change the content of it as well very easily simply double click and then start making your changes like this and for this button we have a pop-up that shows on click like this let's see how to change the content of that simply click on the button come over here to the overlays and then click on the overlay over here and it will show this overlay edit area and then you can start making new changes as well and for this button we have added a interaction as well to close the overlay as you can see so you can simply change the content just like that and the same goes for all this stuff you can easily make your changes like this you can change the link for this button over here and also we have these three breakpoints so you can so you can adjust the content and everything the style DTC for different breakpoints and yeah that's pretty much it once you have your content ready now you can come over here to our waitlist form now you can go over here and choose any service that you like for example Loops that we are using in our video and then we have forms Park MailChimp Catholic list get that list is another really cool software and it's free to start with and then you can have your form ID over here I'll show you in a bit and for this pop-up we have added a show overlay on successful sign up so when the user signs up it will show a pretty cool pop-up with confetti and you can see it on the screen right now and yeah it's pretty cool right and then we have the layout you can change the layout to show the button Below in the form the form field but I like it this way you can have it like this as well you can adjust the font installing EDC and then we have the input field this is where you can adjust the input Fields color and for example this is the placeholder text you can change it however you like and this is the fill the background feel of the yield as you can see this is how you can adjust it I like it how I have added it by default and here we have the button we can change the text sign up today like that you can also disable it so that user press enter and it will complete the sign up but let's show the button you can change the font and other stuff over here you can change the background color of the button over here and also the text color something like this I like it black because of the theme of the the template you can also change it to dark and it will show inside of the form field and then we have padding and Shadow for the docked you can adjust the inset something like this and then you will be able to make it look good let's increase the width so that the text shows up completely yep now looks good let's have it to the default value over here and yep that's pretty much it for this background snow effect that we have you can go to layers desktop and here you see particles and then you will be able to adjust these particles effect over here there are so many options over here I will highly recommend that you check out framework particles from the link in the description of this video you will find other different kind of particles of facts for your website and as you can see it follows the direction of the mouse looks pretty cool so now let's move on to setting up loops and how you can connect it with your Loops account to receive emails and then you can start sending your campaigns to your users okay so I am now logged into my Loops account I'm currently on the free plan and you can have up to a thousand contacts on the free plan and you can always upgrade to the Pro Plan later on so now we will see how you can connect it with your video form over here in framer simply go to the loops and go to forms well there are two ways you can connect your form with the framer first is by using the form input this one over here and then you can connect it with loops or other services but for now we have already added it let's connect it with loops over here now if you see over here they also have this guide to connect it with framer you can easily see how you can connect yourself all you have to do is set up the loops ID so all you have to do is copy this ID from here now I will have it blurred out so you can see it's this one with the newsletter form action you can also see it in this guide over here and then we can go back to framer and then on the right side bar click here and paste the ID and that's pretty much it now you can start collecting emails from your users so let's let's check it out and how it works so if we enter our email over here and click on sign up button as you can see it shows this pretty cool confetti effect and also this beautiful overlay saying thanks for joining and stuff like that you can close the pop-up and that's it now your user have signed up for your wait list and you can go to audience and here you will see the user signed up as you can see it's right over here for me because I already signed up a month ago or something and it will show up here after the user have signed up now the next thing that you would like to do when setting up a wait list is add a user group to that with list users and it's a little bit difficult but easy as well for that you will have to use a custom component from Loops as you can see we have here Advanced integration so what you can do is follow this Advanced integration step to create a custom form and then and let's let's see how you can do it first off we have to set up our form in the loops let's go back to loops and here let's set up the form you can install it and this is our preview over here you can change the place all the text and all these options over here and we will need to change the user group text over here let's change it to wait list users and then change this to jsx and then we will need to copy this code as you can see in this guide let's copy this and let's see what else we have in the guide we will have to create a new component let's go back to framer and assets here let's go to code create a new component let's give it a file name file name and click on create now let's paste that code over here simply select all of it and delete it now command b or Ctrl V and paste it right over here and yep that's pretty much it then you can click on command save and you can see the preview of the form over here let's go back to home and here let's go to assets let's drag and drop our custom form over here now you can remove this and now you can adjust this form with let's make it fill I think it won't work you will have to edit the code all right let's edit the code over here and see if we can edit the width and it looks like this one over here Max width 300 pixels you can adjust it right over here if you like and let's keep it like this for now and let's check it out on the front end let's try to interrupt email over here and see if it adds us to that with list User Group let's subscribe and that's it you can adjust the thank you message in this form over here it seems it's happening because of the black color well you can adjust that later on and let's check the audience and as you can see right over here it has added us to the waitlist users group now this now this user group is going to help you send newsletter emails only to your waitlist users and not the other users after you you launch or you have other stuff that you only want to share with your waitlist users it's going to be pretty helpful and now you can go to Loops over here as well and set up a welcome email it's pretty easy you can click on create new and click on contact edit and here you can select contact edit trigger type and you can adjust that and we have to go over here audience filter and let's click on edit audience add filter user group is with list let's save this segment and give it with list users as well finish and that's pretty much it let's go back and as you can see we have with list users user group contains with list and we have this animal over here you can create email and now you can design your welcome email for your users you can see a preview of the welcome email that I have designed with loops for framer8 customers that signs up on my website let me show you I have created a form at the bottom so that when user sign up they will get a 20 discount over here and yep you can now design your email Welcome to our family you have many options over here as well you can have plain text heading bullet lists button image Etc let's give it a subject Welcome to our family as well and give it a title as well welcome email and that's pretty much it it auto saves it so you can go back and you can see the preview over here and that's it you can click on start and when the contact contact is added they'll get this welcome email on their phone so let's try that out as well let's go back to our waitlist over here reload it let's enter our email and let's subscribe and you can adjust this message over here this color in the in the forms area that I mentioned previously so after the sign up you will receive email something like this so yeah this is the email that I have designed for my frame rate users and let me change the team as you can see in light mode it looks even better this is how you can design such beautiful welcome emails so yeah that's pretty much it I hope this tutorial was helpful and it will help you to set up your wait list even faster I made this free with list template a month ago and realized it was actually something people really needed so I decided to make a full tutorial about it on my YouTube channel and it's my first double tutorial so I guess it's a pretty great start now after we have created your waitlist page and everything is set up your form your your content Etc then you can go to publish and your site will be published on a subdomain that premium will Auto generate you can also go to settings and here you can go to domains and then you can connect to a custom domain as well for that you will have to upgrade your plan simply click on upgrade and since you are just creating a bit list you can go with the mini site plan which is only five dollar a month when build yearly but if billed monthly it will be ten dollars but if you if you have a lot of traffic then you might need to go with the basic site or Pro site but for most of the waitlist Pages a mini site plan will work so you can go with the monthly plan if your wait list is only going to be a month or two but if you have a very long wait list you can go with the yearly plan that will be beneficial so yeah after the plan is added you can go to domains again and you will be able to connect your custom domain so yeah that is pretty much it for this amazing video I really hope that it it is going to be helpful and it will help you to set up your wait list faster in framer with this amazing Loops tool and I'll meet you in my next tutorial till then have a great day and peace out

Channel: FramerIt

Views: 1,269

Keywords: Framer, Waitlist, Waitlist Template for Framer, Waitlist in Framer, Waitlist with Loops

Id: OdXPQAReARg

Length: 17min 41sec (1061 seconds)

Published: Thu Sep 21 2023