How to Create a Slick Modal Contact Form in Oxygen

More about this video

Want a great technique for deploying inquiry & contact forms on business websites (any website really, but this works especially well for lead-gen on business sites)?

In this Oxygen tutorial, I’m going to show you how to build a great looking, high-conversion lightbox/modal form from scratch and how to trigger it with any button or link.

The reason I like to deploy inquiry forms in modal windows like this is three-fold:

1. It focuses the person’s attention on taking the action because it darkens the rest of the page and puts the form front and center.

2. It doesn’t require the person to leave the page to convert.

3. It passes the URL of the page the form was submitted on for very clear and simple conversion tracking.

I’m using WSForm ( https://go.digitalambition.co/wsform/ – affiliate link) because it’s my go-to Wordpress form plugin (extremely powerful), but you can use whatever form plugin you prefer.

Other than the form plugin, this is a Vanilla Oxygen tutorial – no other plugins are needed as we’ll be using Oxygen’s native modal element.

Enjoy!

Video Transcript

0:00:00
So there’s a technique that I really love to use with contact forms or inquiry forms, usually inquiry forms, especially on business websites. And that is to put the form inside of a light box or a modal. Now I hate the word modal, so I’m just going to say light box all the time. But the reason I put the form inside of a light box is for a few reasons. Number one, it makes it easily accessible from any link on any page. Number two, you don’t have to send people to another page. Like so they’re on a page like a service page, for example, or a landing page or a service area page. They raise their hand, they say, hey, I would love to book a demo, get a quote, whatever the call to action may be. You don’t send them to another page. You just open the light box, present them with the form. So it’s easier and it’s higher converting in my experience. So when people are presented with that form and the way that a light box or a modal works is that it darkens the rest of the page, it brings the form into view.

0:01:01
It kind of isolates the experience. So they’re more inclined to actually follow through and take the action versus if you send them to another page. It’s just a form embedded on a page, which they’ve seen many, many times before. And there’s a lot of other distractions like nothing is darkened, nothing is brought into into focus for them. So I just find that the conversion rates are higher when you put the inquiry form inside of a light box. And then you also have this unique ability to track conversions better. And the reason is when you use, and I’m going to show you this in the tutorial here, when you use a form that allows you to pass the URL string of the page that the form was submitted on into the submission, basically every lead that comes through that inquiry form or contact form, or whatever you’re using it for, is going to have the URL that the page of the page that it was submitted on attached to it. So you’re going to get to see just from that basic kind of like tracking, which pages on your site are delivering the most leads.

0:02:08
So it’s really, it’s a really powerful technique for a bunch of different reasons. I’m going to show you how to build it natively in Oxygen. You don’t need any other plugins, except for a contact form plugin. Now I’m using WS form, and I’m going to tell you in the tutorial why I’m using WS form, and why I think it’s one of the most powerful form options for WordPress, and why it’s integration with Oxygen is so great. But you can use a number of other forms. I like fluent forms, but again, I’m going to show you the tutorial here, how to build this from scratch. We’re going to talk more about why to do it. And I’m going to help you make it look really good as well. Right? After all I said, we’re going to build a slick modal form in Oxygen. So let’s go ahead and jump into the tutorial. All right guys, let’s go ahead and dive right in. We’re going to be making a lightbox CTA form.

0:02:56
And as I said in the beginning, I really love these forms because they’re high converting forms. They allow you to track leads from specific pages versus routing all of your your traffic to a contact or get a quote page or what have you. I don’t have a design that I’m working from, but I have something in my head that I kind of want this to look like and I think you’re going to learn a lot along the way as we build it. So what I did is I just created a page here and I threw in a bunch of default oxy ninja cord design set things like a, you know, a hero section, a header. And mainly because I wanted to put all these get a quote buttons in here because this is kind of how it would look on a normal page flow. And I’m going to show you how to trigger this lightbox from these buttons and links, which is why this is such a powerful technique. All right, so let’s go ahead and get started. We are going to start by adding the Modal module in oxygen. So I’m just going to type modal or Modal. I don’t know how to say it.

0:03:54
So I’ll just say life box a lot in this tutorial. And one thing is you want this window to be at the bottom. And I do want to disclaimer here, I would normally be building this in the primary template for the website, not on a specific page because I would want this to be accessible to any page. And if you want it to be accessible to any page, it needs to be in the primary template. So that is just, you know, one difference between how I would do this in real life versus how we’re doing this in the tutorial that you definitely need to take note of. All right, so because it’s one element and it’s going to be in a primary template most of the time, I’m not going to assign a bunch of classes to it. I’m just going to style the ideas, especially for the sake of this tutorial to help speed things up a little bit. But I’m going to go to advanced size and spacing. I’m going to change the width from 70% to 100%. And I’m just going to put a max width on it. And that’s going to take care of responsiveness. So we’re going to go check down here. Now, the only thing is because this is a Modal, and it’s like outside of the normal section, you see that it’s going to touch the edges when we do a max width thing, right? So if I go back, we can see that there’s plenty of space on the left and right. But as soon as we break down to here, we’re touching. And so at this point, I just want it to be like 90%. And then that’ll take care of every other break point for us. All right, so we don’t have to add anything else for responsiveness here. But I do want to control the width of the light box on desktop sizes because 70% of a giant desktop, like that’s a very large light box.

0:05:36
So I just want to be like 1100 max is the width here. All right, so there’s no padding by default inside. You can see that if I add an element, like a heading, that it’s just going to everything’s touching, right? So I actually don’t want to add anything yet. I want this to be a two column light box. I want a visual on the left and then I want our form on the right. And I’m going to show you how to build the form in WS form as well. So you definitely want to stick around for that. But I’m I’m building in case you already have a form that you know you can pop in. And that’s not a problem for you. Then I want to build the light box first because then you can maybe, you know, pause the tutorial or ditch the tutorial or whatever and just go to your thing. All right, so I’m going to add a div and I’m going to add some grid classes to this. So we’re going to do columns two three, which is a small, a smaller column. And it’s two columns with the first column being smaller than the second column. And you’ll see when I add two more divs inside of that, how that looks. So we have a left hand side. This is going to be for our visual and we have a right hand side, which is going to be for our form. All right, so the next thing I want to do is style the visual side of things. Now there’s two ways that you can do this. The easy way is with a background image. The harder way is with a object fit image and then a darken layer or like an overlay layer and then your elements and absolute positioning and things like that. The easy way is not as valuable for a tutorial. So I’m just going to do it the hard way. Now the hard way does allow you if you’ve watched my tutorial on what was it called like creating image cards properly in an oxygen. I went over, you know, why this is important to do it the hard way because you gain access to source set images and you gain access to alt tags. If that’s important to you in this light box, the light box may not be it. You know, that stuff might not be necessary for a light box. But again, why don’t we just show extra in the tutorial. So I’m just going to add an image here and then I’m going to add a, I’m actually just going to steal this logo here because that’s going to be our visual inside as well.

0:07:52
But I want this to be a background image and I’m going to add a diff. Like I wanted to behave as a background image or appear to be a background image but while it’s actually an image because here’s where I go to media library and I can actually use source set to choose responsive image sizes. Right. So that’s how this would look. And then we have this diff right here which is going to be our overlay layer and then we have this right here which is going to be our branding overlaid on top of our visual. And that’s all going to, well, that’s, you know, when I said in the beginning that I’m going to create a slick light box, this is kind of like what I mean. It’s not just a standard basic light box that they actually looks pretty slick. All right. So in order to make this all work, I have to choose the parent div that’s containing all these items and I have to set its position to relative. We do that under layout. The next thing I’m going to do is select the image itself and I’m going to set that to position absolute and you’re going to see that every like things have disappeared now and you can see that we’ve also lost like, you know, our light box has gone. It’s folded up because our, our images is coming out of it. What we’re going to do next is we’re going to grab this div which is our overlay div. And let me go ahead first. Let’s go to our Dow window here. I’m going to go to size and spacing just for right now so that we can see what we’re doing. Let’s do like 40 VH. All right. Cool. And I want to make sure that I put, yeah, relative on the correct one. Okay. So the div here, this is our overlay div. I’m going to go to layout index, Z index is going to be one and it’s going to be positioned absolute also. And then you’re going to see it. It came back into view here. It’s very small. So I’m going to need this to cover the entire image. So we’re going to go with 100% height 100% and then on the image itself, I’m going to go ahead and set size and spacing on that. I want it to be 100% and I want its height to be 100%.

0:09:58
And now you see that it looks absolutely awful. And the reason it looks absolutely awful is if you watch my previous tutorial, then you know how to fix this with object fit cover. Okay. So now we have an image that is the aspect ratio is not screwed up anymore. But you know, we have this problem of these divs being squished up here because there’s really no content in them because this absolutely positioned image is not in the flow of the document anymore. So it’s not able to shift content around. So what we need to do is on the parent div of the columns overall, we need to set that to 100% height. And then we need to set it to stretch, which we can just do with a CSS class. And there we go. Okay. That was very complicated. I’m sorry. If you had a hard time following all of that, I’m going to take the stretch class off again, just so you can see here. So these are the two column divs that are inside a parent div that set to grid. Right. So these by default, like when I made this very tall, these get left behind because they don’t have a height set. If I go to them, there’s actually there, there is, oh, okay, I was probably selecting the wrong layer. If we look at this one over here, there’s no height, right. And then this is the parent div, the actual parent column div. It has no height either. So they’re just doing their thing, right. They would get bigger if the content in them got bigger. But there is no content in them because an absolutely positioned element according to its parent doesn’t really exist there. All right. So in order to get these two things to stretch all the way, I go to the parent, their parent, right. The one with the C columns, two, three on it. And I set that to stretch. Now you can do that, by the way. All that class does is it sets, well, let’s just look at it when I add it. You can see right there what it does.

0:12:01
It sets the flex to horizontal and it sets the flex vertical alignment to stretch. And so that stretches the two columns all the way down. So hopefully that explanation made a little bit of sense. You’ll pick this stuff up. The more tutorials you watch, like you’re going to, you’re going to understand how these problems get solved over and over and over again. All right. So I’m going to name this right here just so this stuff doesn’t get too complicated. So we have an image, which is our background image. We have an overlay div and then we have that logo image. The overlay I set to Z index one because I want that to be on top of the background image. And then the logo image I want to be the top top top thing. So I’m going to go to layout Z index two. All right. You’re just numbering layers basically. Now what I’m going to do is go to that parent and I just want this core to be in the middle. So we’re going to go vertical center and then middle and that’s going to bring that down. So vertical flex center horizontal alignment middle vertical alignment gets the logo to where I want it to be. All right. Now let’s take care of the overlay. Remember the overlay is the second layer in this in this layer of three is sandwiched in the middle. So I’m going to go to backgrounds and I’m going to set a background color. We’re going to use that brand color and we’re going to drop it to like 85. And so that’s going to create a nice little effect there. I’m going to grab the image the logo image on top. We’re going to go to effects because I normally I would make like a white version of the image. I’m sorry. I’m not going to go that far with this. I’m just going to set the invert to 100% and it’s going to kind of make it like even though it makes the the dot gold.

0:13:43
In fact, I might even be able to fix that by adding effect and filter or we can’t add another filter. Okay. I was going to quickly add you know a um grayscale filter but whatever. All right. We’re good. We’re good to go. All right. Cool. So this is the div that I want my form to be in. Right. Uh, and I need the padding because there is no padding here. So if we added a form which I don’t I don’t even have one but I can add the container for it. So that’s what it would look like it’d be touching the edges and that’s obviously no good. That’s not what I would call slick. So we’re going to have to go to our fluid responsive font size calculator which is if you’ve watched my video on this, uh, how to set up oxygen properly. This is far more than a fluid response size calculator. So, uh, I’m playing around with these values here. I think on mobile like the smallest viewport, I want 24 pixels of padding or 2.4 rim and then on large desktop I would like 80 or 8. So I’m going to grab this clamp function and clamp just to quickly tell you makes automatically responsive padding font sizes sizes. What have you? Whatever you use it on. So I’m going to go to padding none and I’m going to paste in the clamp function apply all and that’s going to give us really nice healthy padding and then what you’re going to see is that on mobile, uh, we we get well, well, it’s messed up because I didn’t put any utility classes on our on our main wrapper here.

0:15:19
So remember I did the columns 2, 3. I didn’t tell it what to do on mobile or anything else. So we’re going to say on large devices that’s going to need to break down to one column and now when I go view it, you can see we’re one on top of the other and I’m going to have to fix this issue here. But look at this form and you see there’s just a little bit of space around it now because it’s the clamp function has scaled that padding down very nicely. We’ll fix this all in a minute. Okay, anyway, just thinking out loud. All right, so I would like this form centered in the middle of this. So we’re going to do the same trick vertical center middle and now we have the form in the middle. All right, so I’m going to save my work for now because we’ve come a long way. We don’t want to lose anything. The next thing I’m going to do is add a really dope, uh, box shadow to this. I’m going to go to resources brum.af. This is a really cool layered shadow, uh, generator. And I’m just going to grab this all this box shadow code right here and I’m going to make sure our, our modal is selected. I’m going to go to custom CSS and I’m going to paste that in. So now we have a really dope, uh, box shadow on our, on our modal. It’s a nice little layered shadow effect. All right, cool. So at this point, I pretty much have my light box. We need to set how we’re going to be triggering this. I do want to round the corners. So I’m going to go to borders.

0:16:46
Let’s try 10 as our radius. And I want you to notice if I select this up here, I don’t think we’re rounding over here. Uh, and the reason for that is this section here is covering up the rounded corners. We can fix this and we can fix it by going to layout overflow hidden. And you’re going to see now that we have that rounded corners effect over here. So I’m going to go ahead and hit save. And then we’re going to take a look at how to trigger this, this modal window. All right, so I’m going to go to trigger and I’m going to select show, win user clicks element. And I want this to be a global thing that I can use on any element across any page on the website. So I’m going to call this something super obvious like dot trigger CTA modal. All right, so whenever I add trigger CTA modal to a another element like a button, it’s going to be able to trigger this modal window. All right, so I’m going to go ahead and hit save. And let’s just go ahead and test this for right now. So I’m going to come up here. Let’s do. And in fact, let’s change this to get a quote. All right, so if I click this button and I add trigger CTA modal, that button should now be able to trigger the mode. Makes sense, right? So let’s go check it out on the front end. Here’s our little site that we’ve got right here. And there is our mode, which of course is blank. Let’s reload the page again. Let’s get a little delay there. All right, cool. It’s working.

0:18:31
And you can see we have our drop shadow like everything’s everything’s working nice. Like that looks pretty slick, right? Even though it doesn’t have a form in it. So let’s go ahead and finish this thing up. So what I’m going to do is I’m going to add a heading and I’m going to add text. We’re going to make that like an h3 and I’m going to add text. That’s cool. All right, we’re going to move this up here. We’re going to move this here. Let’s just use owl spacing on this. If you haven’t seen my owl spacing tutorial, you might want to go check that out. These two things are a little bit too far away. In fact, that owl spacing L might be a bit much. Let’s do owl spacing M. That looks better. And let’s say get a free instant. That won’t be instant. Get a free quote. All right, we won’t oversell it. We won’t oversell it. All right, let’s see. To get a free quote, please fill out the form below will be in touch within 24 hours. That sounds right. Okay. So these two things are a little far apart for my taste. What I’m going to do is I’m just going to wrap this with a div. And I’m going to throw the text in that with it. That way, and then I’m going to use a center class on this. And that way, I can keep those two things together while keeping them apart from the form. And this might be an area where I play with that owl spacing and go large again. I’m not sure yet. And then you can use another owl class on this, or you could use a utility class just to get like these to be a little bit apart. Right. Yeah, let’s go with owl spacing large. I go back and forth on this stuff a lot. Let’s add another text element. This is what’s cool about owl spacing though. Look, this is already properly spaced. Right. I did a whole tutorial on owl spacing if you haven’t seen it yet. I’m going to do text us. Okay, that’s cool. Let’s just not let me make a class. All right, text small. And this would be like the we won’t spam you ever. Right. That standard line that you put in all the time. All right, look, look at me. Look what we’re doing here. This is starting to really shape up, starting to look really, really good, I think. So we’re going to go down and check out our mobile, look at our mobile responsive. This is coming along because I do things naturally, you know, with this, it’s this WS form thing that’s throwing it off. That’ll be fixed when we actually insert the form.

0:20:59
But it’s because I use naturally mobile responsive things like clamp for paddings and such. You don’t have to do a lot of extra work for mobile optimization because it’s all happening automatically. All right, I think what we’re ready to do is hop over to our form builder. So we’re going to go onto the back end. We’re going to go to WS form. Let me take a minute to just talk about WS form. It’s a little known form builder. I feel like I don’t I don’t see many people talking about it at all, which is an extreme mistake. This is one of the most powerful, most intuitive form builders that exists. I ditched fluent forms. I’ve ditched I’ve used 10 different form builders. All right, I’m telling you WS form, it’s extensions. It’s it’s the what it does is light years beyond most of the form builders that are out there. And again, it’s like relatively like not talked about that much. And I can’t believe it. I WS form needs more love. So I’m going to put a link to WS form in the description. It is an affiliate link. But here’s the thing guys, like I have plenty of money. I have a very successful agency, right? If you like these videos and you want to support my content, use the affiliate link and I’ll get a little commission. I don’t do the affiliate promotion just to make money. Like I’m not telling you use this tool because I get a commission. Look, I tell you to use oxygen. There’s no affiliate program for oxygen, right? I don’t care. I’m telling you to use the tools that I think are best. That’s the bottom line. Full transparency. So if you want to support me doing these tutorials a little bit, then use the affiliate link. If you’re like, hey, screw you, Kevin. Yeah. Yeah. Thanks for the tutorial. I’m out. Then don’t use, like just go to WS form.com and you know, buy it, whatever. I don’t care. So that’s my little spiel on that. So WS form, we’re going to go to add new. We could use a contact this thing, but you know, it’s this tutorial. Like why would we just click this button? That’s what I would do in real life, but I’m just going to show you how to build it from scratch. So we’re going to go ahead and use blank and we’re going to call this get a quote because we like to organize things on the back end, right? Maybe if I didn’t just hit the button to jump out of the form as I’m building it, that would be helpful. All right. So we’re going to drag some fields in. So we’re going to drag a text and we’re going to drag and by the way, I actually don’t use like WS form extensively. I might have figured out some of this stuff because I have people that do this, right? All right. I already did the email. It’s been just been a while is what I’m trying to say. Phone, email, we don’t want like, you know, to ask for their whole life story. We just want some contact info.

0:23:41
So then I’m going to come down to buttons and throw in a submit button. You can actually do tabs in your forms like out of the box, man, WS form is so powerful. And then there’s just this, columns stuff that you can do. Like, look how easy this stuff is, right? So I want this to be the first name and I can control the break points for these fields as well. The only thing that I don’t like about this is unintuitive is you have to save literally after every step. So when I put in first name there, I clicked out of it and it didn’t save it. You literally have to hit save. Then I can go to this one and I can say last name. So if anybody from WS form is watching, I know there’s probably a reason for this, but you know, maybe you could not make a save five million times while we’re doing the form. All right. This is phone. We’re going to make this required and I’m going to hit save and then I’m going to also make the first name required and we’re going to hit save and then we’re going to make the email obviously required and I’m going to hit save and then the submit you never want the button to say submit. So request a quote, okay? Or how about this? Let’s make it more friendly. Send me my quote. All right. That’s cool. Hit save. Excellent. Excellent. Excellent. Okay. So basically we have a contact form here. Now we can go up to actions and we’re going to save these are the actions that are going to happen when somebody submits the form. So we’re going to save this mission. We’re going to not show a message. All right.

0:25:12
We’re going to take this away. We are going to send an email and we also are going to do. I’m not going to go ahead and make all the page, but this is what you would do in real life. You would choose a redirect step and it would be like to thanks because you want to be able to track conversions to a goal page. You don’t want to just show them a form or show them a thank you message on the form. When should this action run when the form is submitted? So they’re going to go to this URL. So I’m going to hit save and close on that. And then I’m going to check out what this email says. Okay. So from address is from admin. From email address. Let’s go ahead and put in their email address there. And that you can name all these fields. I’m not just going to, you know, this isn’t a WS form tutorial guys. This is a how to make a CTA light box from display name is going to be first name and then okay. Thank you. Let’s move on to. Okay. Yes. CC. Yeah. I want it to go to me. The reply to address definitely needs to be there. Email. You don’t want to mess that part up. Subject will say new contact. And I’ll put that in brackets. Sorry. New quote request. This is in a contact form. New quote requests. It is late in the day. And then I’m going to say it’s from first name and last name. Okay. So that’s going to be the subject of our email basically. And then it automatically puts the form submission stuff in there. So I’m confident now we can just hit save and be done with it. All right. So let’s go ahead and publish this form. And we’re going to go ahead and put this in to our CTA light box. I’m going to refresh this page real quick. So we’re going to have to wait for the oxygen builder to load while we do that. Let’s come back because I did miss one step. So and I’ll I’ll show you what I missed. But the labels are going to appear above the form inputs, which is going to make our CTA like our our light box really big. It’s going to take a lot of space basically. So I want to put those inside of the inputs. So this form looks really, really clean. Let’s see when it let’s see if it’s going to pull up here real quick. I’ll show you what I mean. And this is again when I when I say we’re going to build a slick light box. These are the kind of things that I’m thinking about when we’re going to build a slick light box. Okay. So let’s go down all the way. And I’m clicking on WS form and I’m now select the form because it’s going to be there in the drop down and I’m going to hit apply.

0:27:51
And then I’m going to hit save. All right. Now remember we set a height on this whole thing. We need to go take that off because that is now interfering with our our stuff here. So see how this is nice and it adapts right it perfectly adapts all of this. All right. And then I’m going to say left middle middle left top left. I don’t know if those classes are in here or not. Okay. No problem. Let’s just go to typography left align. That should fix it. Save. All right. So we have this issue of having these labels and I just don’t want that. So what we’re going to do is we’re going to go to each one and we’re going to say show label take off the check mark. Take the label and put it in as the placeholder. Save. Now I’m going to go to last name, grab it, no and placeholder. Save. Let’s do that with the phone number phone no show label placeholder. Save. Email. Grab it. No show label placeholder. Save. Excellent. Okay. Now when we save and we actually go view the page. And we click our get a quote button. There we are. Well. Oh, I know what I did. I know what I did. Okay. Let’s go back to here. I didn’t publish it. You got to publish your changes in WS form. All right. Let’s go reload and get a quote. There we go. That looks pretty slick or owl spacing is a little out of control. Guys. All right. Let’s go. Let’s go back to owl spacing large. We’re going to put in an owl spacing medium. Now we’re going to hit save and then we’re going to check it out. And then I’m going to show you you can definitely style the actual form. All right. That spacing is much, much, much better. And the way we style the form in WS is you actually go to the customizer and then you’ll see WS form. And really the only things I wanted to like and this stuff, you know, I would probably use custom CSS for all of this.

0:29:58
Fonds I small, Fonds I wait and a line height. Okay. That’s all good. Oh, colors is what I wanted. Right. Primary. I don’t I don’t know what that light blue is on the other thing. I’m just going to guess. But if we wanted to, you know, make that match more advanced grid gutter is a bit aggressive. I want that to be like more like 16 and transitions, borders, typography, franzas, I think all that’s good now. Okay. Let’s just hit publish. And let’s see what we’ve got. Okay, let’s go back to if we can find our page here. There it is. Okay. So we’ve got a nice responsive. Let’s go down. Let’s see what’s going on here. Okay, we need to fix this up. That’s a little, that’s a little not cool, right? And that’s very, very simple. So we could actually probably get away with just stealing the, where’s this? Yeah. So if I go to this div right here, remember that clamp function we put in. If I just drop it in over here on this parent, I bet you we solve our spacing woes. Save. Let’s see. Okay. Did we? I could have just done this in the builder. Yeah. There we go. Look at that. Look at how smooth and slick that it. I think it’s slick. I think it’s slick. What do you think? Drop a comment. Thumbs up. Thumbs down. Whatever. But look, look, here’s the power of this. We’re not done yet. Right. Remember that class that we put in triggers CTA mode down? We can actually put that what I would now do.

0:31:44
Is you put this all over the site? All these buttons can trigger the CTA mode down. And then in WS form, let’s go back there real quick. You can actually have this input a hidden field, right? So let me go to a, cancel this. Okay. Let’s go URL hidden hidden like this. And then you can pass the URL value. Let’s blog URL. I think right there. Yeah. Blog. Hold on. There’s a page URL. This is the part where I mean I’ve got people’s for this. I know it’s possible. I might not be able to find the field right off top of my head. But what we do is we pass the URL that the form was submitted on. So that we always know exactly where the leads are coming from. It might be public URL right there of the post. All right. Save and close. So if that’s not it, sorry. I’ve got people’s that, you know, you get people’s or just ask WS form. They have amazing support. That’s the other thing about it. But it is possible to just pass the URL that the form was submitted on. Which is normally like somebody might object and say, well, if we put these all over the site, we don’t know where our leads are coming from. Ah, but you do. You actually have a lot of transparency on where your leads are coming from. So I just put trigger CTA Modal on all these. And then like here, these links are going to get it too. Trigger CTA Modal. Come down. Trigger CTA Modal. Here. Trigger CTA. And there’s no styling attached to this, right? So it’s not changing the style of anything. It’s just our trigger for getting the CTA Modal to fire. So I go the front end. And so if somebody is like, you know, browsing the page and they’re like, oh, these features sold me, right? Let me go ahead and get a quote. There it is, right? Or if these features didn’t sell them, they’re working. Oh, that’s a feature that I really need. All right. They get quote, right? So you see how this works.

0:33:49
And if they went page to page and did it on any other page, it would work just as well. And it would always tell you the URL that they submitted the form on. And it looks really slick. And it’s just, I think, a really great implementation, especially for business sites. So that’s how to create a slick CTA light box in oxygen. Hope you enjoyed this tutorial. Definitely hit the like. Hit the thumbs up. Subscribe, bell, notification. You know what to do. You know the drill. And if you have any requests for a tutorial, drop those in the comments below as well because I am taking requests. I’m watching. I’m seeing what everybody is requesting and I’m adding stuff to the list. So if you want something specifically, let’s get a comment in and I will add it for you. Thanks for watching. Have a great day.

 

My Cart
0
Add Coupon Code
Subtotal