How To Add More Fields To 2-Step Order Form in ClickFunnels

Hey, what's up everybody? It's Matt here with CF Pro Tools and in this video we're going to look at how to do some slight modifications to your two step order form and how you can add a billing field to that for a little extra jazz. Okay, so let's take a quick look at what a normal two step order form would look like. When you go to a two step order form inside of Click Funnels, generally you have, you know, very specific items, very specific elements that are going to be inside. Let's go look at what you can get in here. So if I click on the element information here and then we go over to the two step, we can start showing and hiding different items, different elements. Right. So let's go to the advanced, actually hide shipping. We want to show shipping. We want to show the order bump. Even though I'm probably not going to use it, I'm just going to put it in there to have a little extra stuff. So I might hide the phone number just because. Why not? So let's say those are the items that we can edit inside of CF Pro or inside of Click Funnel. So let's go back to the settings and start taking a look at this. Let's see how it looks. Now I'm going to hit save real quick. So we have country shipping, full address, city name, country, state, province and everything. So this is really some shipping info. But what if we wanted to add in billing info as well? So CF Pro Tools has an add on called Magic Mover. So what we're going to do is we're actually going to add in some additional information in a new section. So I'm going to add a new section here. Right here. I'm going to do small, so it's the same size as that. Add a row. We're going to do one column row. And then we're going to actually go to the this section right here. And I'm going to give this section a name. It's going to be called CF Pro Tools Magic. Alright, so I'm just going to update that. That way it knows that this section is going to contain information or elements that I want to eventually move somewhere. In this case we're going to make a shipping element, we're going to make a billing element. So let's see if we can find that element form. Maybe input billing. Billing, Billing address. This one right here. So the advanced form, billing address, we're going to add that in there because we want to add this in there right alongside our other information. So first, let's just use this and make sure that we can actually move this somewhere first. What we need to do is go back to CF Pro Tools and grab a script. So once inside of CF Pro Tools, you're going to find and create your Magic Mover. Add on, just click Create New, go to Search by keyword and do Magic Mover. Now, I've already got like, one, probably enough of these in here, so I'm not going to create a new one. I'm just going to look through my existing ones and use this. There's no configuration really to this. So if you create it, once you're good to go, you can use that on as many funnels, on as many pages as you would like. So I'm going to copy that code out of there and then we're going to go back to clickfunnels, we're going to go to the settings, go to the tracking code, back to the footer, and we're going to add that in here. So that way it allows us to move stuff. Right. So what we're going to do now is we're going to come back here, we're going to check out the instructions. So you can always click on show instructions if you're not seeing it. So we have the cs, the title with that section that I just created called CF Pro Tools Magic. And then what we need to do is create some more stuff. We have that element that we want to move. Maybe we want to move that after something else specifically. So we're going to look at here if we wanted to move it after the credit card form. Let's look at that for right now. Let's take that. I'm going to copy that out. So click on the CSS info and then we're going to add that in CF move after. And then we've got the double curly braces and it says el credit card form. But let's see where that actually goes on here and see how that looks. But I think actually, let's say before. I'm going to say before the credit card form, and then we're going to say update. It should put that in there in a particular place just to see how it looks. So we have the shipping. Oh, I see what happened. It actually added it in. It actually did. But normally the information is on the first step instead of the credit card form. Let's do this. I'm gonna click. I'm gonna highlight this area and then I'm gonna click on Inspect and I am inside of Chrome So if you're inside Chrome, you can follow along with this. So what I'm gonna do is just. What I want to do is highlight just that form. So once you highlighted what it is that you want to move it before or after, right? Click on that over here in the inspection panel. Then you're gonna come down to copy and you're gonna go to copy selector. Okay, so we're gonna copy that selector out. I'm gonna try this like that and see if that works. Okay, I'm gonna see if I can move this entire row. So the blue is the row. So if you're using click Funnels and you're proficient with it, you know that the blue is the row, the green is the section, the orange is pretty much always going to be your elements, right? So we're going to go back in here, grab this row, and we're going to change the settings on this to CF dash, move dash after, put the curly braces in there and then put that. That's what we just came up with in the selector. Right. So we want to move this whole row after that. And I'm going to put some more information in the row if this works. So let's click update and click Save and cross your fingers. Let's hope this works. All right, technically. Technically it works. What I wanted to do, because it did move that whole section in there, is add an element and just do like a quick subhead. We're going to put that up here. And it's. I wanted to say shipping just like this, but what. But it'll say billing info instead. So. So we're on to something. Things are coming along. Kind of what I want to experiment with here is whether or not we could do same billing as well and add that in here, because how cool would that be? Yeah, let's do the same billing and go same billing address. I'm pretty sure there's no configuration on this, so we'll copy that out. Let's show the instructions. Let's go here and do a subhead. Add that in. We're going to put that up here, change that. CF dash, same dash, billing. We'll click update on this and then we need to add in tracking codes. Let's go to the footer code and come down here. We have the order summary, the promo code, the magic mover, the same billing address. So basically in this whole row is going to get moved appropriately. So let's see how that worked out. And we're going to come down, click for same billing information. It did add a checkbox. Didn't change my margins. But what we got and I put in some random info in here and now we're going to click for the same billing information. Bam. It put in the same information. So that does work. See that's the section and in the row I've also moved the settings all the way out and the width set to 100% and I've also set in the advanced settings this to negative 25. Now that I'm looking at this, I don't actually know that I need that. So I'm just going to do that. That pulls this in a little bit. So let's click save and see how this looks. Now hit preview and maybe I do need to set that. Let's go back to this. My -25 might have actually done the trick. So and we come down. I get a little bit OCD about this stuff. That actually looks pretty decent. It's not quite the same. It looks like there might be a shadow here but for the most part I was able to get the billing information in here and integrate. Click for the same billing information. This could of course be customized and optimized for your purposes to do what you want to do with with your add ons. So once you've done with that, you come over here, put your promo code in, whatever you got and buy your products and that's all you need to do. Hopefully you guys like these little tutorials on how to do some things that you know a little bit out of the box thinking outside of the realms of reality. If you guys enjoy this, if you guys like what we're doing, hit that subscribe button. Hit that like button. Leave me a comment, let me know what you guys want to see next. I will see you guys in another video and I look forward to seeing you guys the next time. Alright, see ya.