How to Create a Slick Modal Contact Form in Oxygen

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 lightbox all the time but the reason i put the form inside of a lightbox 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 they raise their hand they say hey i would love to you know 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 moto works is that it darkens the rest of the page it brings the form into view 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 lightbox 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 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 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 plug-ins except for a contact form plug-in 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 uh 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 and uh 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 core design set things like 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 light box 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 mod module in oxygen so i'm just going to type modal or modal i don't know how to say it so i'll just say lightbox a lot in this tutorial and one thing is you want this window to be at the bottom and i do want a 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 ids 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 percent uh 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 uh down here now the only thing is because this is a model 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 percent and then that'll take care of every other break point for us all right so we don't have to uh 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 so i just want to be like 1100 max is 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 gonna 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 lightbox first because then you can maybe you know pause the tutorial or ditch the tutorial or whatever and just go do 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 2 3 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 darkened 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 my uh tutorial on what was it called like in creating image cards properly in in 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 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 but i want this to be a background image and i'm going to add a div like i want it 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 uh source set to choose uh responsive image sizes right so that's how this would look and then we have this div 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 that's you know when i said 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 it 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 uh you know our light box has gone it's folded up because our our images is coming out of it um what we're gonna do next is we're gonna grab this div which is our overlay div and let me go ahead first let's go to our modal 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 um 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 1 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 gonna go ahead and set size and spacing on that i want it to be a hundred percent and i want its height to be a hundred percent and now you see that it looks absolutely awful and the reason it looks absolutely awful is if you watched my previous tutorial uh 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 um but you know we we have this problem of these divs being uh 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 um 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's 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 there's uh 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 um 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 2 3 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 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 gonna you're gonna understand how these problems get solved over and over and over again all right so i'm gonna 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 1 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 2. 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 it's sandwiched in the middle so i'm gonna go to backgrounds and i'm gonna set a background color we're gonna use that brand color and we're gonna drop it to like 85 and so that's going to create a nice little effect there i'm going to grab the uh 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 uh i'm just going to set the invert to 100 and it's going to kind of make it light even though it makes the the dot gold in fact i might even be able to fix that by adding effect and filter oh we can't add another filter okay i was going to quickly add you know a 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 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 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 rem 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 we we get well well it's messed up because i didn't put any uh utility classes on our on our main wrapper here so remember i did the columns two three i didn't tell it what to do on mobile or anything else so we're gonna 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 gonna do the same trick vertical center middle and now we have the form in the middle all right so i'm gonna save my work for now because we've come a long way and we don't wanna lose anything the next thing i'm gonna do is add a really dope box shadow to this so i'm gonna go to resourcesbrum.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 and 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 so i do want to round the corners so i'm going to go to borders 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 when 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 remote which of course is blank let's reload the page again it's getting a little delay there all right cool it's working 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 uh 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 all 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 over sell it we won't oversell it all right uh let's see to get a free quote please fill out the form below we'll be in touch within 24 hours that sounds that sounds right okay so these two things are a little uh far apart for my taste um what i'm gonna do is i'm just gonna wrap this with a div and i'm gonna throw the text in that with it that way and then i'm gonna 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 uh 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 um 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 gonna 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 responsiveness is coming along because i i do things naturally you know with it's this ws form thing that's throwing it off that'll be fixed when we actually insert the form uh 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 gonna go onto the back end we're gonna 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 i've used ten different form builders all right i'm telling you ws form it's extensions it's it the what it does is um 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 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 ah yeah thanks for the tutorial i'm out then don't use like just go to wsform.com and and you know buy it whatever i don't care so um that's my little spiel on that so ws form we're gonna go to add new we could use a contactless thing but you know it's this a 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 uh 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 peoples that do this right um all right i already did the email it's 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 so then i'm going to come down to buttons and throw in a submit button you can actually do tabs in in your forms like you know out of the box man ws form is so powerful um and then there's just this you know 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 uh the only thing that i don't like about this it's unintuitive is you have to save literally after every step so when i put in first name there i clicked out of it and um it didn't save it you 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 uh phone we're gonna make this required and i'm gonna hit save and then i'm gonna also make the first name required and we're gonna hit save and then we're gonna make the email obviously required and i'm gonna 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 the submission we're going to not show a message all right we're going to take this away we are going to send an email 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 uh 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 um from email address let's go ahead and put in their email address there and then you can name all these fields i'm not just gonna you know this isn't a ws form tutorial guys this is a uh how to make a cta light box from display name uh is going to be first name and then okay thank you let's move on um two okay yes cc yeah i want it to go to me the reply to address definitely needs to be their email you don't want to mess that part up subject we'll say new con new contact and i'll put that in brackets or sorry new quote request this isn't a contact form new quote request 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 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 uh lightbox 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 gonna appear above the form inputs which is gonna make our cta like our our lightbox really big it's going to take up 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 and i'll show you what i mean and and this is again when i when i say we're going to build a slick light box uh 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 and then i'm going to hit save all right now remember we set a height on this whole thing uh we need to go take that off because that is now interfering with our our stuff here boom see how this is nice and and it adapts right it perfectly adapts to all of this all right and then i'm going to say left uh middle middle left uh 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 our owl spacing's 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 and we're going to hit save and then we're going to check it out and then i'm going to show you uh you can definitely style the actual form all right that 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 uh font size small font says wait i know line height okay that's all good um 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 gonna guess but if 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 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 uh responsive let's go down see what's going on here okay we need to fix this up that's a little that's a little not cool right uh and that's very very simple so we could actually probably get away with just stealing uh the where is 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 did we i could have just done this in the builder yeah there we go look at that look how smooth and slick that i i think it's slick i think it's slick what do you think drop a comment thumbs up thumbs down whatever uh but look look here's the power of this we're not done yet right remember that class that we put in trigger cta modal we can actually put that what i would now do is you put this all over the site like all these buttons can trigger the cta modal 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 uh cancel this okay uh let's go url hidden hidden like this and then you can pass the url uh value let's uh blog url i think right yeah blog um hold on there's a page url this is the part where i mean i've got peoples 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 um i've got people's though 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 this these links are going to get it too trigger cta modal come down trigger cta modal here trigger ct 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 mode out of fire so i go to 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 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 a quote right so you see how this works 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 uh 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

Channel: Digital Ambition

Views: 6,161

Keywords: oxygen forms, oxygen form plugin, modal form, oxygen modal form, oxygen builder modal, oxygen builder lead gen, oxygen builder lead capture, oxygen builder lightbox, oxygen builder form, oxygen contact form

Id: Y5DQvlQnowg

Length: 34min 40sec (2080 seconds)

Published: Wed Apr 28 2021