How to Style Contact Form 7 With No Coding

hey everyone welcome back to another premise lug episode my name is jonathan and today what i'm going to do is walk you through how you can style contact form 7 in oxygen with no css and no hand coding of any kind contact form 7 is extremely popular and i've had people ask me about it very frequently probably because it's one of the few decent free contact form plugins or perhaps it's you know the most ubiquitous and what i did here was set up just a simple demo site you can see these forms definitely look a little bit different than they do right out of the box there's that nice hover effect if you click on it it activates that box shadow and it's got that kind of fade in and out transition you have your send button full width here with that same kind of box shadow effect and this is all really simple to achieve i'm going to close out of these two tabs here and move into this oxygen install that i have set up and the first thing you're going to want to do is go to your oxygen settings and turn on selector detector if you're not familiar with that i'm going to give you a brief crash course in it and it will become probably a pretty important asset for you when you're building oxygen websites so go ahead and enable that and click on save and then of course we need to add contact form seven i'm going to go ahead and add the plugin and jump to the next step all right so i have contact form 7 installed and i'm just going to take the default form that it spits out for you take this short code and we're going to go ahead and just go to our pages here and i'm going to edit my contact us page with oxygen to get started so to save a little bit of time i'm going to add a default kind of design element from the library so i'm going to go design sets atomic and then under pages there is a contact page somewhere in here let me scroll down and try to find that here i'm just going to use this except to kind of replicate the design that you guys saw earlier i'm going to delete this whole column right here i'm going to center this particular div and then all of this stuff we can just go ahead and delete it actually be a bit easier if i open my structure panel and then you can just go ahead and delete the heading and the text inside of this div here what i'm going to do is add a shortcode element and then i'm going to paste in the contact form 7 shortcode you can see that this stuff looks extremely rudimentary right out of the box it doesn't look that great but we can easily fix that now what i'm going to do is go ahead and set this shortcode to have a width of 100 i'm going to set that to take up all the available space in the container and this is centered because this div right here is set to center so all i need to do is set this to left align like that and then it's going to push our content to the left as well as you know the text and the inputs the other thing is there's a lot of padding in this so i'm basically just going to chop this in half so the top and bottom padding i'm going to set to 60 pixels and that will be perfectly sufficient for now so because we enabled selector detector if you click on a short code you're going to notice there is this new style output button down here this is what's going to effectively activate selector detector so if i click on this what i need to do is highlight a selector in here and you can see there's these green fields that pop up and that's going to basically choose the selector that then i can style in oxygen so if i click on one of these inputs it gives you all you know the css hierarchy all the way down to this particular input now if you're not familiar with css this can be a little bit intimidating but what you need to make sure is that you choose the right combination of selectors here if you choose one that's too far down this is going to apply to any input across your entire site so if you have input fields from other plugins such as member press or gravity forms or any other plugin that has that input field then the styling changes you make here will also apply there the way to fix that is to basically just choose an item up above this so i'm going to choose this one here so wp cf7 form control wrap and the input you'll notice that up here my selector has now changed so it's a little bit hard to read it all but it has that same input and now i have all three of these inputs selected so what i can do from this point is go ahead and just click on my advanced tab here and start editing the styling of these inputs so the first thing i'm going to do is go to size and spacing and i'm going to set the padding to like let's say 15 pixels top and bottom and then we'll just go ahead and do 15 pixels all the way around actually this gives us a nice amount of padding between our text and the edges of the content you're probably going to want to look at these changes fairly often and what you'll find is difficult initially is to get back to that selector so if you went back to style output and you have this pre-selected sometimes it's not selected so what i find is actually much easier to return to where you were just working is to go to manage selectors gotta go through a couple different drop downs here but click on uncategorized custom selectors and there is the selector we were just editing now i can go back to the advanced tab here and it's just a much more clean way to get back to what you were working with so you don't accidentally overwrite now let's say you do make a mistake and for some reason you accidentally select the wrong selector or you do a styling mistake of some kind that you're not happy with you can simply just use the built-in oxygen undo feature and that will work for you perfectly fine so a couple of styling things i'm going to do to these input fields here is i'm going to go to the advanced tab under the borders i'm going to make this a much lighter color instead of just the standard black so i'm going to set this hex color to bc just like that set it to a width of 1 and then set the border style to solid and then the border radius i'm going to set to 8 pixels like that the next thing i'm going to do is go to advanced effects transition and set this transition duration to 0.2 seconds and then our timing function will be ease in out like that and you want to make sure to do this to the original state and not the hover state so that the transition effect takes place in both directions when you hover and when you activate a given input now what i can do is actually switch over to my hover state and then i'm going to go to advanced borders i'm going to set this border to something like 666 like that solid and one pixel and i don't need to mess with the border radius because that's not going to change whenever i'm hovering over the field now the other thing i can do while i'm still in the hover state is go to advanced effects and set a box shadow here so i typically just make it black drop the opacity to about 20 and then i just go like 0 10 20 0 like that i'm going to go ahead and save and let's take a look on the front end real quick so now you can see when i hover over this it does have that nice box shadow effect although there is this outline border which i believe comes from chrome so i'll show you a way that you can really easily get rid of that now of course you'll notice the styling effects we've done so far to these inputs don't apply to this text area and we're going to have to basically do this styling again this is one of the disadvantages of setting it up using selector detector but the benefit here is that you don't have to do any hand coding and of course if you don't know any css this just makes it so simple i'm going to jump back into the oxygen editor and one thing i want to do on these inputs is add some margin to space the fields away from the the label there so i need to make sure i'm back in my original state go to advanced size and spacing and i'm going to set the margin on the top to like 15 pixels that may actually be a little bit too much let's drop that down to 10 and that's starting to look perfectly fine so what i'm going to do at this point is go to advanced typography i'm going to set the font family to what i have chosen for this site which is poppins i'm going to set the font size to 18 pixels our color let's set to something like a dark black like that and then our font weight will choose 400 which i don't think is going to make much of an impact at this point but just for the sake of example we can take a look at what that looks like i'm going to save this and let's actually type something in one of these fields now so you can see there's a bit of extra breathing room in these fields i really like that so i'm going to select this and just type my name that looks perfectly fine okay so now let's go back to the visual editor here and let's get this input field so the simplest thing is going to be click somewhere in the short code that doesn't have some kind of activation don't click in one of the inputs just click in this white space out here so you get your style output button again and then all i need to do is click on this input here you can see it highlights text area but go ahead and add in this form control wrap like that so now you have wp cf7 form control wrap text area and we're basically just going to do all of that styling again so i'm going to go to advanced size and spacing 15 pixels all the way around and if you notice now that i've started editing this selector this one is available over here so if i want to switch back to my inputs i can do that and if i need to go make changes to the text area i can certainly do that as well same thing as last time we're going to set the border to bc solid 1 pixel border radius of 8 set the hover border to i believe we did 666 and then solid one pixel like that moving back to our original state i'm going to add that same effect so effect transition 0.2 seconds the timing function will be ease in out like that and then we're going to go back to the effects tab go to box shadow once again just set it to black drop that down to about 15 actually it was 20 not 15 and then 0 10 20 00 is what i did i just realized i made a mistake and attached this box shadow to the original state so i'm going to clear all this stuff out and throw it back in the hover state where it belongs so 0 10 20 0 like that and then of course these form fields are not aligned in terms of width so what i'm going to do is basically just set this one's width to 100 and then i'm going to do the same thing to the inputs here just set those inputs to a width of 100 percent interestingly my text area didn't save that width oh there it goes oh i set the text area to a width of 100 on hover so there's a demonstration of just being careful as to what state you have your uh you know changes taking effect in so let's go back to this text area we're going to go back to hover the width in this case we don't want to be 100 just on hover we want it in the original state with of 100 like that okay so now that's starting to turn into a decent looking form i'm going to save this let's go take a look on the front end again and now our form is starting to look fairly reasonable one thing that i don't really like is the way that when you click on this field it highlights that super dark black border so i have some really simple css that we can throw in just to show you what it would look like if you get rid of that so if we come back over here i'm going to go back to my structure panel and click on my shortcode we're going to add in a code block here under the php you can basically just comment out this echo go back to the primary tab and click on css i'm going to paste in this css here that i have super simple you can basically just copy and paste this and i'll put it in the description below for you and what that's going to do is if i save and then go take a look at this on the front end now it's just going to have that border that we set as our darker border hover color instead of having that super thick outline color in terms of continuity here we added 10 pixels of margin to the top of this input but that didn't carry over to our text area there so we can go ahead and just go back to our manage selectors go to the text area and i'm going to add 10 pixels of margin to the top of that so that's starting to look pretty good so now we need to do is style this send button so again look in my short code and some of the white space choose style output click on the send button and this is going to put us on the input so once again we don't really want this what i'm going to change this to is wpcf7 input and that's going to make sure that these styling changes that we do only apply to this send button so this one's going to be pretty simple let's go to advanced background and we're going to set the background color to our global teal or blue i guess in this case go back to advanced i'm going to do size and spacing and let's set 25 pixels of margin to the left and right and then like 12 to the top and bottom i'm going to set the width here to 100 percent go to the advanced tab again and choose typography i'm going to change this color to white the font family to poppins font size to 18 pixels font wait let's do 500 letter spacing i'm going to try two that looks reasonable enough and then text transform let's go uppercase again go to the advanced tab and let's choose borders i'm going to set the color to be our same global color there a width of 1 pixel solid and there you can see now it's gotten rid of that hideous default border that is typically on that button the other thing to be consistent with our other fields here is i'm going to set a border radius of 8 pixels so it has a nice little rounded edge to it and then i'm going to go to advanced effects transition 0.2 seconds and you guessed it ease and out is going to be our timing function there then i'm going to switch to our hover state go to advanced effects box shadow same exact thing again just go to black and set that to about twenty percent opacity and then zero ten twenty gosh i type nine every single time zero ten twenty like that now if i save this and go take a look on the front end our send button starts to look really nice so when you hover over the send it has that really nice kind of box shadow effect behind it so as you can see this form is really nice looking we didn't have to do any coding except pasting in that stuff that i've provided for you and this looks a million times better than contact form 7 does right out of the box now in terms of the downside to this particular method like i already showed you you are going to have to repeat some of the styling efforts just to be safe to make sure you're not overriding changes on yourself with those selectors so just be really careful and take your time utilize oxygen's built-in undo function because it's going to help you a heck of a lot when you make a mistake so don't go too quickly and you can just step backward using oxygen's undo one other thing that you need to be mindful of is making sure that you set the widths on these fields to 100 or whatever your width is at the lower break point so that it is responsive so all you really need to do is drop down to like less than 992 just ensure that everything kind of fits we've already set the width of those fields to 100 but just double check and if you need to make the change at the responsive break points you can certainly do that and all your changes will carry over just fine the other thing that i wanted to show you is sometimes selective detector can be a little quirky so if you want what you can do is go on the front end in chrome right click in a field and choose inspect then over here in your styles field if you look this is one of the selectors that we were just working with so you could realistically take all of this css paste it in your code block and then you have almost like a backup of that css there this is basically all of what we did just translated into proper css and then you can also force the hover state here so if we click on that then it's going to show you the css that we set for those fields on the hover state which is pretty cool i'm going to close this and jump back into the oxygen editor because i want to show you how you can add your own pseudo class to these fields so if i come back here just make sure i have my input selected i'm going to go back to the state here and i'm just going to add the sudo name focus like that and then click on ok and then what i can do is just go ahead and make sure i click on focus here if i go to advanced borders and then just do the same border that i did before that 666 solid one pixel and i saved this let me show you what that looks like on the front end because it's pretty cool so of course if we hover over it it changes to our dark color and then if i click in it it's going to maintain that dark color even if i move my mouse off so it's no longer selected this is great on mobile devices because of course you're not going to be able to hover over it on a phone or a tablet but if you click in it it's going to highlight it to give you a little bit more of an indication that that is the field you're working in which is super cool so once again to show you how it would work without that if i click on this and move my mouse out the only way that you would know that you're in this field is your cursor blinking which may not be super ideal so you can add that selector again one more time just to show you i'm going to go over here to the text area i'm going to go to the state add state and this one is just called focus we're still in the advanced border tab here which makes it super easy so just set that to 666 solid one pixel and there you go now if we go over here and refresh then sure enough we have that same effect there which is super cool i hope this tutorial has been helpful for you guys thank you so much for watching and i will see you in a future video

Channel: Permaslug

Views: 4,051

Keywords: cf7, contact form 7, how to style contact form 7

Id: EQ6zaDOLDPc

Length: 16min 9sec (969 seconds)

Published: Wed Oct 21 2020