Oxygen Builder Modal Tutorial For Pop-up Contact Form And Email Opt-In Form

hey what is up everybody the Brits EMM Marciano here from four Brits EMM Marciano calm you can follow me on Instagram and Twitter at a van Marciano welcome to another oxygen builder video tutorial guys and today I'm going to be talking all about the modal feature in oxygen builder so we're gonna be doing two things will show you how to create a custom modal to place in your website footer to create a pop-up contact form and also gonna create another modal to place at the bottom of your blog posts for a pop-up email signup form so guys let's dive straight onto the screen and it gets started welcome to the tutorial guys and so I'm here in my wordpress dashboard for my test demo website oxygen training website I call it so I'm gonna go straight to oxygen and templates I'm already there by the looks of it so I'm gonna click on main because I want to create the first modal in the main template and as I mentioned at the start of this video I want to create this in the footer area for my website and the first one that we're gonna be putting together is the contact form modal pop-up if that makes sense so we'll just wait for this to learn very quickly and then we'll get started okay so an error has occurred okay we can't really do much about that for the time being so let's just leave that alone and so this is the footer section that I'm gonna be wanting to add my modal and if I just clicked on this actually and it's just reminded me that I've then I've saved this part as a reusable part so I need to click on this to leave this area altogether and I need to find the reusable part which is the footer section let's click on edit with oxygen so okay so here we are we are in the oxygen editor we can see the footer section here and nothing else so let's go to structure and open up some of these dropdowns here and let's see what's going on so this div is for this part and initiative here is for the left-hand part so I could have my trigger for my Moodle in any dibbs but before we worry about that let's actually create the modal so we need to go to ad and I'm going to search for loader like so here we are and click on this and we have a blank empty modal so let's begin working with this one here so the first thing I'm gonna do very quickly before I forget later on is what I'll do if I go to my footer section here and if i duplicate one of these links like so I'm gonna change this one here to contact us and let's change the let's go to advanced go to background let's make that red and then go back to styles here and padding we're gonna go five pixels apply all okay if we go back to this div here and just align some of these like so okay so this is going to be our trigger for our modal so as you can see if I over that over that the link text changes but we're not going to worry about that for the time being so the first thing I want to do is go back to my modal here and the trigger I'm going to if I click on this little drop-down and select when a user clicks an element so that's the one we want so we can choose the trigger and I'm going to use this one here it's safe if we go to the front end of our website of one of our pages let me just refresh that very quickly and scroll down as you can see here we have our new trigger a call to action so if we click on this our empty modal appears there's nothing in it so we'll just click out then what we need to do now is add something inside here so what I'm going to add is a very basic contact form and to do that I'm going to use a plug-in called WP form so I'm just gonna save this very quickly go back to admin go to plugins and then I'm going to add new and want to search for WP forms install activate we're gonna create our first form very quickly and we call this basic contact like so a simple contact form and then we have it we'll just keep that as it is let's save that embed grab this shortcode here like so let us go back to oxygen templates reusable further because that's the one that we added the modal to edit with oxygen and then we're going to go to our modal here inside we're going to add a shortcode like so and then we're going to paste our short code for our WP forms basic contact form in here like so as you can see it's appeared inside here and this looks pretty basic so what we'll need to do is change a few things and also add some styling to this form so let's do that next the first thing I want to do is add some space so if I go to advanced size and spacing I need some padding let's go for 50 and apply all like so let's say that i refresh this now if I click on this little call to action trigger I'll get a nice contact form again looks very basic but we can add some custom CSS to style this just the way we want so we'll do that very quickly next now since I like to work with code as well as visual drag-and-drop element based block based design I'm gonna use some custom CSS to style this form and so I'm going to go to manage style sheets here click on my style sheet and at the bottom here I've got a little area for a modal contact form CSS which I created earlier so this is what I'm going to be adding some custom CSS now I'm gonna show you how to do this then I'm going to do this very quickly using copy and paste because I already have my code to add here and I'm going to show you how to find the selectors for each of these elements in your contact form depending on what contact form plug-in that you're using to add your custom CSS so here I am on the live page refresh this very quickly make sure that all the changes have refreshed if I click on my little modal trigger here so the first thing I want to do is right click and use my inspection tool in Google Chrome to find the selectors for some of these elements so let's start with the submit button so I'm going to click on the element finder and then hover over the submit button if I click on this I should be able to find the selectors for this so here it is here so if I copy the whole of this here and then go back to my oxygen editor in my demo stylesheet here I can place this right here like so and then let's add some curly brackets I'm going to add some CSS here to change the style of my buttons so if I go and copy this code that I created earlier copy the whole of this and paste it here like so you can see my submit button has changed it's now a nice red with some rounded edges corners and also the text is smaller and using all caps so let me just tidy this up very quickly so the next thing I want to do is maybe style some of these fields here maybe I might want this form background to be a dark grey and these form fields to be white so let me do that very quickly and there you have it so basically I was able to use the advanced features and the first of all the background I changed to a dark gray and then for the typography I simply change that to a lighter gray and as you can see that looks pretty cool if I save that once again and this refresh it on the front side let's click on all a little trigger again as you can see we have a subtly customized contact form as our first modal pop-up modal here of course we could continue tweaking and modifying our custom forms if you go back on the front-end let's just check our trigger again the form is a little wide so we could narrow this down maybe a little bit more but this little button here let's fix this issue here so let's go to this button text link text color hover has changed that to white so it fixes that issue yeah so when we hover the text does not change now to adjust the width of this modal what we could do is add a div and then the width this day of let's say we want it to be 800 and then drag this above here and then put this shortcode inside the div like so so this is 800 now let's grab this a second let's go to advanced size and spacing the width of that we want to change to 800 as well and so let's see what that does let's just save this very quickly go back to the front end and hit refresh and as you can see we've made that a little bit more narrow so it's not stretching right across the page and Deana looks a lot better and again we can go back to our inspection tool here maybe we want to change the have a look at these text area here would choose going to be these yeah so let's grab the whole of this code here copy let's go back to our style sheet very quickly let's go down here what we could do here is paste this and our little curly brackets like so and add some more custom CSS maybe we want a border radius of let's just say 10 pixels let's see what that does you can see we've changed the border and collapsed this you can see that we've made these fields a little rounder and I save that just see what we we've got on the front here I'm just giving you some examples of how you can customize this using the dev inspection tools in chrome and then you can modify yeah that looks pretty cool we could add a border around this form field so let's select this modal here this might work or it might not work let's try borders let's try 10 save yeah go back to refresh here contact as you can see we've had it a border or way around our form as well okay I'm happy with that so I'm just gonna leave that as it is that is the contact form taking care of now let's go and add another modal to use with a email signup form that we're going to create and thrive leads I'm gonna add this at the bottom of our blog post but rather than go for the whole process of showing you how how to do that what I'm gonna do is take you to the back end of my personal blog magnet for blogging net and show you how I have this set up so if I click on blog click on one of my blog posts here if I scroll on the bottom here you'll see that I have a modal area if I click on subscribe for updates a nice pop-up comes up and I created this in for ively so I'm gonna show you how to achieve this how to do this for your own website by taking you to the back end of my life site and show you how I've done it myself ok guys so here I am in the back end of my wordpress blog at magnet for blogging dotnet once again guys I designed my entire blog with oxygen builder and I'm in the templates folder and their oxygen here so what I'm gonna show you very quickly is the thrive leads form lead shortcut that I created so under thrive leads all I've done here is created a new lead shortcode and all the editing for this pop-up form so if I go to one of my blog posts once again to show you so the design of this pop-up form was created in thrive leads all the editing was done in thrive leads I loved five leads it is the best list building plug-in out there as far as I'm concerned I do have a separate video tutorial if you want to check it out on how to use thrive leads and how to create forms in thrive leads so I will have a link in the description to that video if you want to check it out so yeah I basically created this form this opt-in form in thrive leads here and then back here I simply copied this shortcode as you can see here and if I go back to templates in oxygen and go to my blog post template and show you very quickly edit with oxygen let's wait for that to load so here we are if I scroll down here here is the trigger for that pop-up form again and here below is the modal that contains the shortcode so all I've done here guys is in this blog post template I've simply gone to add and then I've dropped a modal into this area if I go to structure and show you very quickly here's the modal for this form and then there's a div inside this modal and then a shortcode element and this is where I've pasted my thrive leads shortcode so the short code that I showed you earlier this part here goes inside a shortcode element embedded or nested into a div and then into a modal element for this blog post template so that is all I've done and obviously if I go back to the modal very quickly and go under trigger the trigger element or selector that I selected for this is obviously this simple button here the button is a button element within oxygen it isn't linked to anything because this trigger here the trigger for this model is linked to this button okay so when folks visit my blog and they read a post and they get to the bottom of it they see this subscribe to updates and they click on it it brings up this thrive leads opt-in form now if you're concerned about compatibility issues with thrive leads and oxygen build or any of their products they were perfectly fine I've worked one over a dozen projects both personal and client based projects with oxygen builder and thrive leads while all of five products and I've never experienced any compatibility issues but yeah so just to give you some peace of mind there it might be different for you if you do experience any issues then you might want to take it up with either the developer over thrive or oxygen so guys that is it that is how to create and use the modal feature within oxygen builder and you can use a load rule for pretty much anything it's a very flexible feature in oxygen I love it there's a bunch of things that you can select the behavior of how these modal's work for your users and obviously the trigger selector you can literally select any element within your page the page that you're working on within oxygen to act as the trigger for your pop-up modal okay that is it yeah so there you have it guys I hope you enjoyed this video tutorial if you did please give it a massive thumbs up if you have any questions related to this particular tutorial or any of the oxygen builder tutorials that I've you've seen on my channel please leave them in the comment section below or wherever you're watching them or you can email me at for Britt CRM Marciano comm if you want to check out some of my other videos and you haven't already done so please feel free to do so if you learn more about me head over to my website www.africanelements.org

Channel: Fabrizio Van Marciano

Views: 7,662

Keywords: pop-up contact form, pop-up email form, pop-up opt-in form, modal tutorial, oxygen builder tutorial, page builder tutorial, html, css, how to, wordpress tutorials, web design tutorials, wordpress hacks, wordpress tips, make a website, website design

Id: H3P_81Sqd6c

Length: 16min 32sec (992 seconds)

Published: Thu Sep 12 2019