Pop-Up Form Tutorial 2024: Step By Step Walkthrough Klaviyo Pop-Up Forms

right so this video is a step-by-step tutorial a video of me creating High converting pop-up forms for both mobile and desktop just for an example brand Nike so this is the exact cavio step-by-step walkthrough that my team even uses internally and I think you're going to get a ton of value from it so it kind of looks a little bit different for my usual videos but it was too good not to just post as its own video cuz I've given it out to some people and they've said it's super helpful and so I'm just going to give it to you for free here so follow it use it for mobile and then desktop will be after and let me know if you have any questions hope you enjoy it all righty all righty this is going to be your guide for mobile forms on clavio so exactly how to make them what templates to use and the different features that you can use inside of clavio so this is what we're doing we are going to start from a template on sign up forms here so clavio has some solid templates to start but you don't want to take these as is because there's a lot of things that you're going to want to change if you've seen the rest of my resources on uh forms so my favorite form just to kind of start out with is this multi-step email and SMS full page form so we're just going to do this we're going to do test video so what you want to do here is what's the list that you want to add these people to newsletter and then SMS subscriber list whatever you want to put them in and then we're going to create this form and it's going to give us a decent template to start off with so this is what it looks like on desktop and then if you switch to mobile up here this is how you're able to view um Mobile versus desktop now I always recommend just creating separate forms for each it's going to be easier to analyze the data so we're going to go over mobile forms in this video so to change this to purely be mobile we're going to go to targeting and behavior here then we're going to show this to display display on mobile only you'll see this changes only to Mobile so this is kind of how the dashboard looks you can click onto all of these features and you're able to edit them as you please change the text and then you also have the different steps here so the email optin and then the SMS often and if you want a success message then you can put a sub success message um depending on how you are doing your SMS not everybody's going to have SMS but depends on how you do it typically what we do that I recommend if your SMS is on clavo if it's on a different platform reach out to that different platform and see how you can get it onto a uh clavio form um but essentially you just want to take this input field so if you go here to add blocks this is how you can add different stuff so we can go here to phone number and we're just going to drop that in and then we have the phone number and then this is going to allow us to add another step if we want to to have a success message so we're just going to submit this form that's what that button is going to do we want to change it to submit and then we can have a success message so that's how everything looks and if you want to add a teaser which is essentially we'll look at it here teaser is if somebody closes out of the form this gives them the opportunity to reclaim their disc account so you can have a rectangle Circle a corner whatever you want to do typically I don't use these because they can get in the way of a customer shopping so in a lot of cases I recommend not using it you can change the size you can change what position it goes in so if you want to use it awesome you can test it um but typically I don't recommend having it um and so I'm just going to delete it for the sake of this video so email optin let's look at what we have inside of clavo so we have the Styles and then we have targeting behavior and then add blocks so Styles is just like the overall setup of the form so this kind of looks like a lot but it's really not um we have different types of forms here so you have a popup which is kind of typically what you think of which is this you have a full page which is technically a full page form um so people can't click out of it and then you have a fly out if you want to do something like this and then you have an embed where you can put it on a page but we're not going to worry about that all of these so popup full page and fly out pretty much the same except for how they come in and like fly out for example you can have it come in from different areas typically I am going to recommend just doing a popup so popup this is what we're going to do here we're going to stick with this you can adjust the width and anything you want but honestly these are these are good kind of how it is this takes up a good portion of the screen it's exactly what we want if you wanted to change it you can do this different stuff but you're going to have to mess around with a lot of the um settings so I just like doing the custom what they have so I believe this was 750 750 X500 that's what I'd recommend um side image you don't really need one so I do no side image kind of messes up the um the sizing so if you just want to keep this at Right image it changes the formatting for whatever reason on mobile because on desktop it does that so A lot of times I'll just keep this in so I don't have to adjust any of this spacing or anything so you can just keep right image in um that's just going to save you some time we going to show yeah this is what it's saying for the image show on either all devices so it's mobile and desktop or just desktop just keep it on Mo keep it on desktop so this is what the format's going to look like on your phone um again there's a lot of nuance with these forms there're plenty of different ways to skin the cat um for if you've never heard that phrase plenty different ways that you can do it um but essentially you have these different you can change your form background whatever you want it typically I just I like to keep things as simple as possible we don't care about anything besides the besides the discount and so that's what we're going to do first before we do that um form Styles so things like the radius so the rounding of the form you can adjust that also um again typically you really none of this stuff is going to matter too much and then you have padding for a padding is essentially just like the H the white space so if I change the padding uh or the margins same as well um it's pretty much the white space so you can adjust that as you want we'll probably adjust that in a second but here you have like the fonts for the input field so this field we'll just keep it as clavos so if you have custom um if you have custom fonts then you can insert that here and that's what'll go here but essentially we don't really want to stay we don't want to go too far off of this because we just want our um we want the offer to be plain and clear so that's the main thing that we want to adjust in these forms so we don't want any of this extra copy the more copy you add it's it's just going to increase turn it's going to scare people off we just want the offer so we can just delete all of this copy um and just have the 10% off so we're going to delete this we're going to delete this block so we just have this then we're going to edit this we don't even need limited time so whatever your offer is you can change it here so we're just going to say we're going to ask people or we're going to tell them you want to play with your copy here see what works the best but a lot of times you say like you've got 10% off just making the person feel special like hey you've got 10% off or do you want 10% off is good is a good question or um get 10% off so in this case we're going to say um let's say unlock 10% off your first order and then and we are going to we want to make 10% off see that's a little bit hidden we want to make it as big as possible so we're going to make this a little bit smaller 25 hopefully that'll update in the actual box there you go 25 perfect and then we're going to make this bigger let's change you to like 45 we can even make this bigger let's go 55 and you could even change the color if you wanted to depending on what you want to do with your form so one thing that's also good is we want to add a logo up here at the top your brand logo just to get a little bit of branding in going to go to image put an image here I'm going to go get like Nike's logo for this case all righty so just in here I am inserting the image for the logo and boom there we go put an ALT text and then you can adjust the size of your logo however you want it to be usually you want it pretty small so it's not taking away from this so now that we're looking at this even more let's make this offer bigger um so that it's just really right in someone's face so let's go here let's change this to 60 see how that looks um and we'll go like 35 and then we'll go 35 here and boom now we have this so that looks pretty good unlock 10% off your first order you could even change the color of this if you wanted if you wanted to do like red make it stand out a bit more then you can do that as well unlock 10% off your first order and then we have here so it looks like these are a little bit too tight together we really want to separate everything so if we add padding here to the bottom of this logo it's going to fix this so let's add like 50 padding so they're a little bit separate awesome that is pretty solid um although this looks this just isn't centered so we'll talk about that in a second but right now another thing that we want with our form is people when they get a popup form they're pretty much automatically just going to zombie mode just go to the top right corner and try to find the X so we want them to not do that we want them to actually see the offer take it in and essentially be forced to make a decision do you want the discount or do you not rather than automatically go to the X so we are going to pretty much remove this color so what we can do here is we can turn the OPAC on zero so move this now it's pretty much a hidden X you can't see it and so this person's like they have to look at the offer but we can't just force them to do it we have to give them the option so what we're going to do is we're going to add our own just like opt out button um under this button so the person has to either claim the discount or say no thanks I don't want the discount so what we can do here is we add a button add a button here and we want to change this button so let's make sure that the font is the same Poppins and then we're going to say something like no thanks close form so the person has to physically say I don't want this discount and so let's change this button copy to something like claim 10% off maybe something like that if you want to do that but we can just keep it as claim 10% off um um that looks good and then we have this button like this so typically what I recommend for this is turning the background as blank as well make you blank and then background color we just turn that blank but we need to make the text visible so we're just going to make the text like black perfect and then that looks pretty good the form looks pretty centered this just there's an awkward space between them so what we'll do here is we can make this form we can make the button actually a little bit thinner so it's like that and that looks pretty good except I kind of want this to be centered a little bit more so I'm going to add some padding to the bottom of this to push everything else up so we can do 30 perfect now that looks pretty good now this person is forced to either claim 10% off or close the form let's actually turn bold off so it looks like that per Perfecto so that's kind of the first step of the form now if we want to get fancy we can add a micro commit before our form which if you've seen my other content anything else in the uh popup form document that I've sent we talk about micr commits and sometimes they perform better than um just asking somebody straight up for their email so let's create a micr commit step where essentially we ask somebody do you want 10% off before asking for the email so we are going to add step so I'm just going to clone this so we don't have to redo the formatting I'm going to name this micro commit we're going to clone this micro commit is right here I'm just going to drag this so it's the first option so we're going to go with this and then this so for the micro commit we just want to delete the email section and just have this but we probably want to change the wording to say do you want 10% off your first order so we're asking you people do you want it and obviously somebody is probably going to say yes and so you get much higher click rate when you have this type of form let's add some padding here because that looks a little bit awkward do you want 10% off your first order then if they say yes which if you look at the button action it says show next step and so what happens is they're going to get this step where they get unlock 10% off what happens just with how people think is once they've committed to something they're much more likely to follow through and so this you can get higher submit rates so that is very effective so now we have the so we get their email we don't want to put email and SMS on the same form we want them to be one by one so we want it to be this person just opted into their email and then they're like oh shoot I have to do my SMS to claim my discount we want to make it seem that you have to enter your SMS um because that's going to be the best situation but in reality even if somebody doesn't submit their SMS they're going to get put in the email welcome flow so I just deleted that SMS step and I'm going to clone this one and name it SMS and we're just going to replace this with SMS so let's delete this and then let's add a phone number so we get this bigle uh you have to put this for it to be legal so but we can make it a lot smaller so let's just make it like size eight for both of those and then we have this little situation which doesn't look very good and we don't want this to scroll so um so maybe we can change this copy to be um to we can say something like enter your phone number to complete it or we can just say um something like almost there almost there claim 10% off below we'll say claim 10% off and then we can make this red again let's get the color copy that move you over here and then do this almost there claim 10% off and maybe we could even do this and then make this text a little bit smaller cuz the person already submitted their email they know it's 10% off so we can do that doesn't need to be as massive why didn't you change 25 okay can you change size do you want to change size there we go almost there claim 10% off below and then you have this the phone number so this is perfect it'll just go phone number perfect and boom then you're pretty much set here um if you want to move this below you can some Brands will do that that that looks okay or you can even put it as low as here and then adjust the spacing but for this case we'll do the let's do this I feel like this looks a little better um it just looks awkward cuz it's left Aline but that's okay people know what they're getting into when they sign up so then we have that and then we have a success form so we can just do thanks for signing up let's go on ahead and add our logo and then we need to add a close form so that they're not just stuck on this page because they can't find this x that's actually still in the corner so we can do thanks for signing up um and then let's add a button we have to add a close form button and say instead of close form we can say um start shopping and let's use Poppins again then we can make you let's just make you black I usually don't like to include this so we'll just say thanks for signing up check your mobile device to confirm your SMS subscription check your mobile device to we want to make it a little bit more enticing to claim your limited 10% off code and perfect you can play around with the spacing as you want but that's pretty much it so we have this micro commit do you want 10% off your first order claim 10% off unlock 10% off uh almost there claim below thanks for signing up perfect and then if you don't want the micro commit can just delete this no need to have it and you could just go straight to the email optin it's a great first test to do and then what you can do is targeting Behavior so your advanced stuff so you can have this form show immediately which I don't recommend you're going to want to do it based on rules when a visitor is exiting which I don't recommend exit intent isn't very good sometimes it'll misfire after time delay after they scroll a certain amount or after they see a certain amount of pages I recommend a time delay something between 4 to 12 seconds you can start off with four and then test from there then you have frequency so after visitor closes this form if they said no how soon after are we going to show the form again um we can say 5 days and then devices obviously mobile only is what we're doing and that pretty much does it and there's a high converting form or probably not because you'll need to test the heck out of this from here but that's how everything looks that's how you use the form uh you can get more fancy and do all these other stuff all this other stuff if you'd want but is as simple as it gets all righty so if you saw my guide for mobile pop-up forms on clavia we are now going to be doing the same thing but for desktop so this is what we created for mobile if we click here this is what it looks like we have the email optin SMS and then success now we just want to do the same thing but for desktop so I'm just going to clone this for ease of this video and making it a little bit faster so all you have to do is click this button here and then we just want to clone it and then test video desktop and we are going to adjust this to be only desktop so this just pulled up here let's go in and make our edits so obviously this is mobile only there's no way to view desktop so we need to change this for the desktop so we want to go to targeting and behavior and then we want to display on desktop only oops desktop only perfect now this is the form you can see it's already laid out cleanly for us we just need to find an image so I'm going to find an image so I just put a main one from their site in you can do anything but for Styles you can really do anything you could do a full page popup usually the bigger your form is the better converting but you have to sacrifice some customer experience cuz this is a little bit more bombarding so I typically will do a popup like this but maybe make it a little bit bigger can also do flyy outs but these aren't as effective uh but typically I'd say a popup and maybe you want to make this bigger what if we made this large not quite big enough so let's go back to custom let's try to make this a little bit bigger let's see if we make this 800 and we make this like 600 there's that that's pretty good maybe let's make it a little bit wider boom perfect 1,x 600 looks to be a good amount and so one thing right off the bat if you saw the other video there's this little X and there's a little border around it so we like to make our X clear so that people don't know that they can that there's an X here and instead they're forced to make a decision um highly recommend doing that it's going to improve conversions so this background color we want to turn this as clear as well so we're going to drag this bar here and magically this goes away so this is what we have here it's very simple unlock 10% off and then we need to adjust this picture as well so let's go here perfect and then success we have to change this image so is the same exact thing as mobile so we don't really need to change too much um maybe some formatting stuff maybe some spacing uh but overall this looks okay I would keep this if you want to do micro commit same scenario you could just go here at micro commit put in a micro commit step and then delete this field and then we say um we'll say do you want temp off your first order you can get creative with the copy whatever type of copy you want then we could say something like yes something like that if you wanted or you could just say claim 10% off that works too maybe add some spacing above this because it looks a little bit awkward um and that looks pretty good and then you have the email section so you can adjust any of this you could change the images to be wherever you want we've actually tested this in Right image typically works best you could also do left so just flip that you could also do no image and just have something like this definitely stuff you want to test make sure that if you're using an image um you are um you're what was I going to say you're compressing the image so it's not a big file so this one you want to use a site like I love img.com and it is going to um fix it or make it smaller file so it doesn't load so slow when you pull up the form so for some reason that reset my formatting so let's turn this back to 1000 um and that's really all that you need um and yeah that pretty much covers it very similar to mobile um you just want to play around with your spacing with your words things you can test um and then you can take it from there

Channel: Max Sturtevant | Email Marketing

Views: 1,077

Keywords:

Id: arsVK4o5zAg

Length: 23min 14sec (1394 seconds)

Published: Mon May 20 2024