How To Create A Quiz Funnel With ClickFunnels

In this video we're going to run through a quick example of using click funnels to build a survey or in this case a quiz. And so had somebody send me a video or a request and say, hey, can we build something like this in clickfunnels? And so just want to run through and show you what the example looks like. And then let's walk through how to build it inside of clickfunnels. So in this case, this is a style quiz. And so what you do is you would land on this and say, hey, which style of sofa do you like best? And then you can actually click one of these and, and pick it and say, okay, awesome, great choice. Now, do you prefer a formal or more relaxed living room? Okay, we'll go with relaxed. And then you step through and say, okay, which bedroom would you rather relax in? Okay, I kind of like this one. So we pick that and then one more. We are loving your style. How about, how do you feel about color? I don't like a bunch of color like this. I like neutral colors. I like some colors but as accents. So let's pick that one and then one more. How do we feel about patterns? I like patterns and accessories. That's looks good. And then the next step is enter your email and get your style result. Okay, so let's say we wanted to build this inside of clickfunnels. This is how we would go about doing that. And so in this we're gonna go in, we're creating new funnel and we want this to be an opt in funnel because that's our goal here. So we're gonna generate leads, so we're gonna create a new funnel and we're gonna collect emails. That is the purpose of this, is we want to collect emails. So we're gonna call this our style quiz demo 2. I'm call it 2 because I've already done this once today just to make sure we can kind of get the process refined. So we're going to click on build funnel and this is going to build us a new funnel with an opt in page and a thank you page. And so take just a second to do that. And so I'm going to start with the thank you page and I'm just going to build that out using a blank template and then we can go back and add to it later. In fact, we probably won't even worry about building a thank you page. You can style it however you want to, but it's going to be just a basic thank you page. Thanks for your information. So I usually like to pick one of the old styles, just some of the. Some of the basics, like, this is a good one, like, here's what to expect next. Step one, step two, step three. So this is just a basic thank you page. You want to go back and style it. Put your colors and your fonts and your logo and whatever else you might want on that page. But the big one we're concerned about is the opt in page. And that's we're going to put our survey or our quiz on it. And that is how we're going to kind of direct people through the process. Now, the big thing to keep in mind with ClickFunnels is the survey element is really you can do multiple different variations, you know, based on what people answer. You can send them to different pages and things like that. But it's best to just keep it super simple. And the goal here is to build a quiz that is pretty straightforward and simple, and all the questions will lead to the same result. And then you'll send an email that is, you know, generic enough to say, hey, thanks for your. Thanks for your interest. Here's some more information to go check out. So what we're going to do is we're actually going to keep this super simple, just like this one was. There's not a whole lot of style here. There's just basically images and text and pick your answers. So we're going to do that by picking our blank templates. So that's towards the bottom of the templates here. There's just one that's called a opt in blank start. So we're going to go ahead and grab that and use that as our template for this page. And then we've got that page built now. And now we want to open this up inside of our ClickFunnels editor by clicking the Edit page button. And I've opened this in a new tab so we can walk through that. And it's going to open up here in just a second. And then first thing I'm going to do is I'm going to go ahead and get rid of this element here because we don't need this headline. All we need is our survey element. So I'm going to go ahead and click on add new element and I'm going to scroll down and pick survey. And so by default, this is what you're going to get. You're going to get surveys that are just text with radio buttons. So if we were first and foremost, let's go ahead and change our SEO metadata Otherwise it's going to keep bugging us about it. So I'm going to call this my awesome style quiz demo boy. There we go. Learn how to type. And then I'm just going to go ahead and get rid of this and get rid of that just because I don't like it there. And spell my own name proper. There we go. And now let's go ahead and save that and then we'll see what this looks like when we actually preview. So let's go ahead and click a preview and then you'll see a why you like clickfunnels? Because it's amazing. You click that and it's. This is the default analyzing your results. And it just kind of. This is just an analyt. And then when you actually set up your quiz, you can have it redirect to a different page once it's done. So that's kind of what you get out of the box. But we're going to tweak this up. So it is more like what we saw in our style quiz here, which is, you know, question one and you're picking with images and you're kind of stepping through things. So let's go ahead and do that. So let's go ahead and click on this element here. We're going to click on the gear icon to change the settings and then we're going to go into edit survey options. And so this is where you define all your questions and what your outcomes are and settings and all kinds of things. But we're mostly concerned with a couple of things. We're concerned with the settings and we're concerned with the outcomes. So with the outcomes, let's go ahead and set that. So the default outcome action, you could set one different outcomes based on which answers somebody selects. But we're just going to use the one default outcome and right now it is set to loading then page redirect. So it's that the loading text is going to say analyzing your results. You can change that to something else, like this one did, which is, you know, calculating your style or something like that. And then you could have subtext if you wanted to. Don't leave the page or reload the page because then it gets rid of the survey results. So you could have something there if you want. You could just leave it as is. And then when it's done. So this will do a kind of a little loading animation and then it'll do a redirect if that's what you want. But in this case, we don't want to do that, we want to actually collect their email address. So in order to do that, the best way is to change this action to the open pop up action. So we're going to set that to open pop up and then we're going to actually put an opt in form into our pop up. So go ahead and click add new row. So first let me step back through here so we'll close this out and what we do is go to pop up and then click show pop up. And then I like to do a couple of things here. If we click the Edit pop up settings, one thing I like to do is actually make that backdrop a little bit darker. It starts out as a pretty semi transparent and so I want to darken this up. I want to make it almost black. You could see through it a little bit, but it's almost black. That's maybe a little too much. Let's do right at 85. So if you drag the little slider there, that 0.85, that is 85% opaque. So it's still about 15% transparent. So you can see through it a little bit. But it's still pretty dark. So I like that. So we'll leave that. And then our little color wheel here is giving us fits. So let's go ahead and save this. There we go. Now it's going to go away and let's go ahead and click back on show pop up. And now we're going to go ahead and add a new row and then we want to add a one column row and then we're going to add a new element and we're just going to have a headline and let's go to our headline and let's what it say on our style quiz here. So let's scroll down to the end of this. And when you're doing this, it doesn't seem like a scroll, but it's because it's doing that for you automatically. But we can just scroll through and see what we want. So let's go ahead and grab this, enter your email to get your style result. Let's make that our headline here and we're going to go ahead and paste that in and we're going to change the. Change this up just a little bit. We're going to make this a little bit smaller. So let's make that that size. Yeah, we kind of want it on one line and I kind of want to get rid of some of this extra padding. So let's go ahead and click Edit pop up settings and just take this top and bottom down from 40 down to like 20. That'll be good. That's great. And then let's take this left and right. Take that down from. Let's just take that down to zero. And that gives us a little more room to play with there. And then the next thing we want to do is we actually want to insert an input field for our email address. So we're going to go in and we're going to click on the input element and that's going to add an input. And so we can click on that. And we want to set this to email. This is our type is email address. And then we can leave it placeholder text your email address here. That's great. And it automatically is required when it's the email. And so that's good. I kind of like to put the little icon in here when it's an email and say it's an email icon. So that looks good. And I kind of like the colored version of this. So we can use that one. That gives it a little style. You can always use the white version too. But in this case you can't see it because the background is white. White. So color is good there. Leave it on the right. That looks pretty good. And submit on enter. That's. That's okay as well. What that means is if, when we put this in here, if somebody is typing in here and they hit the enter key, that it will actually submit the form. So that's what that option means. So you can turn it to off. Means if they hit enter, that's not going to submit the form. They'll have to actually click the submit button. But by default it's turned on. And so that's. We're looking good there. If you want to do the corners, you can make them square edges if you want. That kind of squares things off. It's whatever matches your style. 5 pixels rounded is the default. And then we can take a look at our settings. We're looking pretty good there. And so then the next thing we need is a button to actually submit this form. And so we're going to go ahead and click on our orange icon, add a new element, and we'll click on button. And then now we can go in and we can set this button. I'm kind of a big fan of making these buttons. I like this green 3D button for calls to action. Green to me means go. But of course it's going to need to match your style. So you can set that however you want. And then. And Then you can make it say something like, get my results. That looks great. And then the next thing we do is set action, and we want to set it to submit the order or submit form. So submit form means it's going to submit this email address. So we grab their contact and then once it submits that, it's going to go to the next page in the funnel, which is our thank you page. So that's looking good there. I want to put just a little bit more padding in between the submit button. And so we'll make this like 20. That gives us a little more room there. And then let's also. I want that button to be just a little bit bigger. So let's give it a little bit more vertical space. Let's give it 15 and let's put it at let's say 40. That makes it a little bit bigger there. And let's make the font size something like a 24. There we go. That's looking good. I like that. And so that's great. And let's actually make this bump this font size up to 18. So we get a nice big form that way. And there's lots more you could do here. But that's. That's good enough for now. And then. So we've got that. I'm gonna go ahead and click save again. Just we've saved our progress. And then let's jump in and click the why do you like clickfunnels again? And we're. Click on that. We're gonna get our edit survey options. So now we're gonna get into actually making this survey, this or quiz look like we want it to look. So we're gonna change this question, of course, because it's not why do you like clickfunnels? So let's take a look at style quiz. Now, of course, you'd use your own questions, whatever you want to ask, but we're just going to try and mimic this one. So we're going to make this. Which style of sofa do you like best? So let's go ahead and copy that. And then we're going to put that, paste that in here. This is the question text that's going to show up above the question. And the next thing is, we don't want just thumbnails, we want to show images. So and then by default, you've got your question and you've got your thumbnail image that's going to show as your choice and then your layout. In this case, these are two by two and they're in A block. So two by two block. And so we want to do kind of that same thing. So in our layout, we're going to drop this down. We're going to say we want a two by two block. Now, in this case, it's not really two by two because this first choice has actually six questions, so it's actually two by three. But it's basically going to give us a block that is two columns wide. And then as many questions we have, it's going to extend on down. And then for the radio, the radio means what do you want to use for a choice? Do you want to use a square circle, lettered, numbered? We're just going to hide this. We don't need the radio button. We want the actual image to be the item that somebody clicks on that makes their choice. Just like we see here. If I click on A, then that's my choice and it highlights that and then it goes to the next question. So we want to do something similar to that. So this is the option that's set up for there. Then we want to go ahead and set our choices. And so for our style quiz here, let's go back to one here. Now, we don't really have. We just got A, B, C, D, E, F here. So we could do that. In fact, let's just mimic that. So we want A answer, A, answer B. And let's go ahead and click answer. And we want answer C answer, D, E and F. Okay. And so all these redirects are just going to go to the next question. Next question means when somebody clicks choice, it's going to step them to the next question in the survey. That's exactly how it works with our style quiz. That's pretty, pretty common for how we want it to work here. The next thing we want to do is we want to define our images. Now, if you were using these images, the big thing about these is you'll notice all these images are the same size. They are square images and they're. Or maybe not even square, they could be rectangular, you know, a little bit wider than they are tall. But they're all the same size. And that's important when you're using images here. So if you're going to use thumbnails, in fact, it even has a note down here at the bottom that says, note, thumbnail images look best when they are all the same height. If they're different, it may look a bit strange to the viewer. So that means if you've got different heights and they're stacked next to each other, then one's going to be taller than the one next to it and it's just going to look a little bit goofy. So make sure you use images that are the same height, height and so but you're probably going to want to have your images resized and ready to go before you get this process started. So you'll want to go through and pick all these images they have. You want to pick those things out and have them ready and available. So let's just do that. So I've gone through and I've actually pre saved all of the first two questions. I've saved the images for this. So we've got the couches and we've got the style here and I've already kind of pre saved those. So let's just step through setting up the first couple of questions and that'll show you exactly what you need. So all you need to do to load your images and actually click on the edit thumbnail right here. And when you click edit thumbnail then it's going to pull up and it should show your image gallery here. But it's not working quite properly for me. So what I'm going to do is I'm actually going to go grab those images. And this is kind of a cool thing about clickfunnels is if you've got them already. What I've done here is I've done this in my downloads by recently added, I've got and I've just got all these images and I just want to add them to my gallery. So I'm going to go ahead and click open and it's going to go through and it's going to load all those images in one shot. So we'll get some doubled up because they're already in there once. But we're going to go ahead and load them. And now all of my images are loading so we're looking good there. And then let's just go through and kind of take a look at what choices want. So the first one is kind of this double double sofa there. So let's go ahead and grab that one. So I think that is this one here. I'm just going to double click it and we'll make it that thumbnail and then let's go ahead and click edit thumbnail, see which one's next here. And so we've got this long kind of squared off, looks like a what they call a mid century. So let's go ahead and double click that one. That's going to set that as my thumbnail. We can kind of see it show up on the page there. And we'll just kind of keep going through this process and set that up. So we've got our green one here. So let's double click our green one. And you'll notice I've got a couple in here because I've loaded them once already, but that's okay. And then if we pick, we've got our little three cushion and so we'll do our three cushion. And then let's do. We've got this kind of old Victorian style and so let's pick that one. And we've got that. And I'm just double clicking on these images from the gallery and it loads them that way. And then we've got this little double sofa with a little quilt pattern on it. And so let's click Edit thumbnail and. And double click that last one and that will load that one. And so this question is all set up. So let's go ahead and click Save now. And you'll notice that, hey, this is starting to look like what we would expect. And you know, if we just look at it here, which style of sofa do you like best? And then look at what we have here, you know, obviously things will look a little bit different, but we've got some pretty much the basic components. We got the name of the question, we've got our choices and we've got our little completion bar down here. And so we're looking pretty good. And so I think I want this to be a little less wide. So let's go ahead and click Settings. And we're going to make this, instead of being a wide section, we're going to make this a medium section. So that shrinks things down a little bit. And then let's change. I also want this question up top to be a little bit smaller and I want it to be quite that big. So let's click on Edit Survey. Actually, it's going to be in advanced and then we've got some advanced options here. So we can say how do we want our questions to be aligned? Do we want them centered? What size questions do we want them to be? Well, that's what we've got up here. We've got our question and so I want that question size Instead of being 26, let's just make that 20 and we'll notice that that makes it a little bit smaller. And so I'm liking that a little bit better. And then if you want to change the size of your progress Bar to, you know, be a little bit not quite as tall. You can do that. You can change your progress bar color. Say we want that to be our same green color. We've got our green. I'm not really digging that green. And let's make it orange. No, I think the blue is the way to go on this one. So we'll just leave that blue and then you can make it square or brown if you want to. And then hover color is when you hover over a choice, what color is it going to be? So I like the blue. It matches up with the progress bar, so I think that's okay. And so we've got that set up and then our answer size, it'd be this, A, B, C, D, E, F. So we can change that as well. So if we want to make those a little bit smaller, we could do that. And so we'll make that 16. So I think this is all looking good. The one other thing is we can look and see what we want to have for our kind of animation effect. Oops, sorry, I am clicking on the wrong things here. We want to click on the settings and then click on Advanced. And so we have this hover style. We have grow and Shatter or we have default. And I honestly couldn't even tell you what default does. Let's just take a look. We're going to go ahead and click Save and let's go ahead and click Preview. And then now, so we get just kind of this basic, give it a frame, a blue frame hover effect. Okay, so that's default. So now let's change that and let's take a look at what grow and shadow is, which I do like. So we'll do grow and shadow and let's click Save again. And that's looking good. And I'm going to go ahead and close this example and I'm going to do preview again, open up a new tab. And now let's hover over and see what we get. Now we get kind of just, you can see it kind of scales that image up just a little bit and it gives us a little bit of a drop shadow behind it. And so, yeah, I kind of like that effect. That gives it a little something extra. So that's looking pretty good. So now we've got our first question done and then the next thing we want to do is add another question and you would just continue the same process until all of your questions are completed. And so what we can do is again, click click on Edit Survey Options. And now we're at manage questions and we just want to add a question and the only choice available is a multiple choice. So we're going to click create and then we want our to get our actual next question. So I'm going to go ahead and grab this. Great choice. I don't. We don't need to add that. I don't necessarily care for that. But we do want to ask the question do you prefer a formal or more relaxed living room? And so we'll go into this and we're just going to type that question in right here. And. And we don't need a subtitle. And again, thumbnails we're going to do show images. And then again we're going to do block 2 by 2. You could do a 3 by 3 or 4 by 4 however you want. But I like the 2 by 2. That's pretty good. And it works well for mobile. And then for radio again we're going to set that to hide so that we don't see the radio buttons. And then we're just going to add our answers. And so let's just take a look and see what our choices are here. And we've got a formal pulled table together look and let's see if we can actually copy that before it goes on. So pasted. No, didn't. Didn't copy. So that didn't work. So it was a formal or pulled together look. So that's close enough. So that's good. And then let's go ahead and click add an answer. And let's take a look at our other one here. Let's see. We've got a more relaxed look. And this had formal and it was just instead of. Or it was just comma and then a more relaxed look. That's good. And we're going to do add answer again and we are going to do a little bit of both. Sounds like Guardians of the Galaxy. A little bit of both. A little bit of both. There we go. And then we want to set our thumbnail so there's just three choices on this one but it's a two by two block. So it's going to give us two columns wide. So then we'll have that third one just like this choice here is two and then one down below it. So we'll see that same thing. But we just want to grab our thumbnail. So let's look and see which thumbnail is first. So we've got this kind of two lamps on either side. So let's look for that image and if we click Edit thumbnail, we've already uploaded our images and so if we grab this one here we can see we've got it. That's our image or two lamps. Double click that and it's going to load that thumbnail and click Edit thumbnail again. And our second one was this more relaxed look. It's this option here. So let's double click that. And then our third one was this kind of a little bit creamy colored with a little chandelier up at the top. So let's take a look at that and let's click Edit thumbnail and we're going to grab that one. So that's this image right there. And again these all just the answer redirect goes to the next question and once you're out of questions it will just go to the final outcome. And our outcome is set to open the pop up. So that's what we've got there. So we've got two questions. This style quiz has five total questions, I believe. So yeah, it looks like five total. You certainly would just continue this process until you've gotten all the questions entered and all your images loaded and everything else. But I think this gives you a good idea of how you would do this for multiple questions. And you just continue on this process for as many questions as you have. And then we're going to click save and then let's preview this again and kind of show you what this looks like in action. And so we're going to go ahead and click preview and it's going to pull up our page here. And so we see, hey, which style of sofa do you like best? And so we can click okay, we like this one best. And then the next question is do you prefer a formal or more relaxed living room? So we get our choices here, formal pulled together, look more relaxed, look a little bit of both. And you'll notice that our progress bar really is full at this point because this is our second question, it's our last question. So we're click on this one. Then the next thing you'll see is we get our pop up and it's now enter your email to get your style result. And now we can just put in our email address. And what I normally do when I'm testing this is I put in the date so it's April 15th as of recording of this. And we'll I think I've tested this once already. So we'll make this dash two for test number two. And we're going to click get my Results and we'll click that it's going to say submitting. Give us just a second. And then we land on our thank you page. And this is where you'd have a nice little video that says, hey, thanks so much for taking our style quiz. Your choices were absolutely fantastic and I know we can help you find the pieces of furniture that are going to really match your style and then walk them through how to get in touch with you, how to schedule a free design consult or whatever it is. If that was what you were going for with the style, that's what you do. Now obviously if it was about fitness quiz, what type of body you know you could do this for things like the same style. If this were say a fitness quiz then it could be what type of body would you say fits you today? And have different body type images. Let them pick one of those and then say which types of food do you like the most? And it could be, you know, pizza, donuts, bread, cereals, whatever you know, which are, you know, could be what are your guilty pleasures for food and could go there and what would you consider to be a healthy food? And and it could be pictures of fruits and vegetables and protein and avocados or something like that to let people go through and see that okay, there's different types of foods, which one's right for me and go through that and then you can just continue on those questions again. Once they hit submit then you would take them to a landing page like this where again you would have a video. Hey, thanks so much for the extra information. That's wonderful. It's going to help us tailor a program that is suited best for you and your body type and your desires and the foods that you like the most. What we can do next is get you started with the program. If you would click the link down below and set up. Pick your time that you would like to do a one on one consultation where we can walk through and give you more specific recommendations or you know, now your recipe guide is ready. Click the link down below to download the cookbook that's going to give you all the healthy recipes, whatever it is that you are using to generate leads you would put on this thank you page and hopefully this makes a ton of sense and this is how you do kind of an image driven quiz style lead generation funnel. So hopefully this has been helpful and it's made a lot of sense and I'll talk to you again real soon. Take care.