Learn to STYLE your NINJA FORMS with CSS. Perfect for beginners.

if you want to get forms on your wordpress website  the ninja forms plugin is a great plugin to use   to get free and easy forms up on your website  fast aloha everybody I'm Kris Jolls and today   i'm showing you how to stylize those forms with  the free form builder using css this should be   a pretty simple and straightforward video if  you don't know any css just follow along and   re-replay some of those parts that are a little  bit more complicated but this should be pretty   easy and you should be able to stylize your form  and learn a little bit something about css let's   get started so here we are at our example website  yourdivvywebsite.com and our contact us page where   i have a variety of forms here uh created with  ninja forms so i have your basic contact me form   that was the free version and i have a free  version styled and that's what we're going to be   working on today okay so this is the same plug-in  that i did in my previous video the free version   of ninja forms utilizing css to styling it okay  you can buy a paid version of ninja forms to get   a built-in visual builder which is really nice  and and nice to have but if you're just getting   started and you you're here to learn maybe a  little bit about css this is a great way to learn   how to style your uh your ninja forms and i also  want you to come here to ninjaforms.com so they   could come up here to get help and documentation  and if you come over here you could click on   styling your forms and you could read more about  styling your forms with css and ninja forms okay   and read a little bit more about some of the  settings you might have to enable and disable to   provide a couple more functionalities to you they  come here and show you how to style your fields in   a row and then also how to style the rows of your  your fields so that they don't take up the whole   100 width we're not gonna get into this today  today we're going to look at mostly just styling   your forms and what you can do is scroll all the  way down here and find custom css and on this   page you could see the html markup of the form and  the form fields that they use and then in here you   could also see the id fields that they use and the  custom classes okay in here you could toggle these   open and they'll show you the css classes they  use to style certain parts elements of their field   of their form okay from the fields to the labels  and you can get all of that right here you can get   each individual css field that you need and they  also show you how to do a couple other things like   hide your required message and the asterisk and  stuff like that okay but this is a great little   page to look at and to know and and to have  around and have open while you are styling   your forms okay so for now we're just going to go  ahead and close this and so let's get started and   so what we are going to do you can see that this  is the styled form right here i want to go ahead   and show you how to make that so we're going to  go and create a new one now instead of starting to   scratch i if you don't know how to create a basic  form you could click on the video i'm going to   link here and otherwise what we are going to do is  instead of starting from scratch we are going to   come over here and we are going to duplicate this  form and you'll see that down here it's giving us   a copy so we're going to go ahead and click this  guy open and right away what we want to do is   change the name of this all right so we're going  to go to advanced display settings and instead of   doing the same copy we're gonna call it okay so  now that we've had we have our our form titled   what we want to do is come down here and create  a custom css class for the wrapper of our form   the wrapper is the container the html container  that contains the whole form and we're going to   call that contact dash styled and we are going to  press done and then publish after we've published   it we want to preview our form and if we scroll  down here we'll see our form now in order to play   around with css what you want to do is you want  to right click and come down to inspect element   this should work pretty similar whether you're on  safari or google or chrome that is and if we come   over here and find our form by scrolling down  what you can do is just left right click on the   the h2 the h3 here and it should bring us to  our form so we can see our form right here when   we click on it you can see the element is is  highlighted and you could see that if we click   it open here we have our form and so and if we  if we highlight on our on this line right here   we see the nf form container c-o-n-t and then we  see our custom class that we created contact dash   styled the reason why we do this is because  if we start changing these styles here   for this form using just the nf form wrap provided  by ninja forms if we just use that class then   every form that we have on our website will  start to take those same styles sometimes   you have a contact form sometimes you have  a web email sign up form and you have forms   on your websites for different reasons and you  don't necessarily want them styled all the same   and that's why we create that custom class we  don't need this page i'm going to close this one   and here we are at our preview once again so you  see that we have our contact style here selected   and what we could do is just press this  little plus sign over here and you'll see   that if we start if we just click in here and  do something like background color let's do that   and say red you'll see the style starts to take  effect okay this is just a preview page and   these styles are just just for demo purposes  right now they're not going to take effect   in order to get these styles into our wordpress  website we need to go back to our dashboard   select appearance and customize then we could come  down here to additional css and we could paste our   css right in here and different themes uh also  come in with additional places where you could   put in your custom css okay this is available on  most wordpress websites and so this is one place   you can do it you could also put the css into  your custom css file as well which is probably   the best way to do it so what we want to do is  come over here and change this to our contact   class okay now when you're writing css on the  back end you have to imp you have to include   this period and then these two brackets okay one  to start and one to end so we're going to publish   this now obviously we're not going to style our  form with the red background but i want to show   you that if we come back over here and refresh our  page that the styles have taken effect these are   now permanent on our website and you can see our  styles are down here we're going to come back over   here we are going to go ahead and delete this  just to show us that it worked and we're going   to come over here and refresh and you'll see all  our styles are gone all right red style is gone   okay so with this guy selected we're going  to come over here and we're going to press   plus and what we want to do is go ahead and start  using our custom class name so contact dash style   press tab and you enter this little area in here  so i want to go ahead and paste in my styles   that i have here from the side and you can see how  these styles have taken effect and i'm going to go   ahead and uncheck each box here and show you step  by step what i'm doing so that you could copy and   paste these styles but know what's going on so the  first thing i changed was the background color and   you can see that this wrapper that is selected in  blue has a new background color and you could copy   these numbers right here so the second one is the  padding the padding is the spacing around the form   and you can see i've added spacing around the form  these are numbers that i've i came up with you   could change these numbers as you see fit again  this is without the padding and this is with the   padding so it gives it some breathing room next  i'm going to give it this really subtle border   it's barely there but it helps give it a slight  border that we are going to combine with the drop   shadow so now here's our drop shadow that i want  to add on here and it's very subtle obviously you   could change these values here here's the color  of the shadow and these are the values of the   shadow that you could change to make it however  you see fit next line is we have our font family   so i definitely didn't like these uh these  types of fonts this serif font you know my   website i'll have sans serif fonts like this  okay so i kind of want all this stuff to match   the rest of my website so i'm gonna  come down here and i'm just gonna   select this one here which says the font family  and it changes it basically to a sans-serif font   now obviously in here you could put in any font  that you like to use to match your website and   then finally next is the color of the font this  changes the colors of these fonts right in here   and in here as well and you can see how  already it's starting to shape out real nice   okay so we have our styles over here and what  we want to do to get these onto our website is   drag from the very bottom all the way to the  little period here we're going to select copy   we're going to come over here to our css page and  we're going to paste that okay so we're going to   publish it we're going to come over here to our  preview and we're going to refresh it and you'll   see our styles have taken place and we could  continue on with the rest of our styles the next   style i wanted to change was this up here i think  this title should be a little bit darker than the   rest of this so i'm going to select it and i'll  say inspect element and it takes me straight to   this h3o so what i want to do though is to use i  use the class to style it and if i come over here   i can do the same thing press this plus button  and it will give us a new place to put a style   instead of calling this this what i'm going  to do is i'm going to call this contact styled   h3 and that's how you would target your h3 on  this styled contact form and what i want to do   is add a color and i copied and pasted my color  from off screen and this is the color i chose   obviously you could choose any color you would  like this is the way i i design things in the   browser okay i come in the browser i see what it's  going to look like live and then i copy and paste   my styles into here so that's what we're going to  do we're going to give us a one-line space paste   in our new style we're gonna publish it come back  to our preview page and then we can refresh it   see that the styles have taken effect and  move on the next thing i want to style   is these form field labels all right  so let's select that and inspect it   now obviously i don't have to select inspect each  element i could always come down here and find it   this way as well i find that this just a much  faster way if i'm on here i will select my plus   symbol over here and what i want to call this now  instead of um you know for some reason when when i   press this plus button it's it's identifying that  the id so this is the id over here you see it says   id nf label field 55. and so if we come over  here and inspect element and we come down here   we'll see it gives us the label for this  element and you could click up you could   slide up and down here and either select  the whole the whole field the wrapper   or just the label this class right here nf field  will is the wrapper for this whole container here   it includes your label it includes the asterisk  it'll include this little help icon here and   anything associated with this entire label and  this is why we select a specific element and go to   inspect element because it will bring us all the  way down in here to the to the fields that we want   all right okay so we could come in here we'll  press our little plus button and what i don't   like about this is that it it creates this down  here okay so we can see we have our field here   our class and what we want to do is insert  our custom contact styled class right in here   okay and then press space and so i am going  to paste in some styles here real quick   and there we go okay and so what i want to  do here is to make sure that all the labels   receive this color and that all the labels  are have an upper case you could change this   to capitalize as well and that has a nice effect  to it so same thing we're going to start from the   bottom here and select it all copy it come to our  css and paste that right in there publish it make   sure that our styles took effect and move on all  right and as you can see here our form is taking   nice looking shape so the next thing we want  to do is stylize this button here if we right   click on this and inspect element and so what  you'll see here is that this has got a class   it's an element the type is a button  and the value is submit nf forms content   button and you can see these different  classes that they've used to contact it   it's highlighted right here if we used all these  css classes it would style all the different types   of buttons that come with these form builders  and we don't really want that we just want it to   target just this one form that we're using so what  we could do is we could come in here and copy this   with those brackets and all  and place it right into there   and enter our styles again i'm just pasting  these from off screen and you'll see some of   these styles have not taken effect like this one  and that's because these other styles are taking   precedence over it okay so what we want to do and  this is why we always include our custom class okay and when we do add our custom class we don't  have to do any any wonky stuff to um to make this   work because you'll see if we didn't add our  custom class and let's just go ahead and get rid   of this um if we didn't add that you'll see our  background color is blocked out and that's again   because of this down here and what you could  do is if you run into that you could you   could press and you could type in important  with the exclamation mark at the beginning   and what that does is says overwrite any other  css and make sure that this is taking place okay   but to avoid needing this kind of stuff we  just want to include our custom class here to make sure everything gets inputted okay so  what we've done to this to this button is we've   given it a background color we've changed  the font weight to 700 and this makes sure   it's a little bit thicker you could  change this value how you see fit the   font size we've made bigger with 22 pixels  and we've given the button a little border   radius of 3 pixels and that kind of rounds it  out makes it a little softer you see so we're   same thing we're going to come in here and we're  going to copy all this paste it into our css when you are copying and pasting  things you got to make sure remember   make sure that it's not pasting an extra junk  and jargon that you accidentally copy come back   over here to our preview page and refresh this and  you'll see our new button styles have taken place   now the second thing i'm going to style is on this  button is this hover effect so you could come over   here and let's inspect this element and a neat  thing about these is you could come over here and   select this little box that says hover and now  whatever styles you put in here are going to be   attributed to the hover effect pretty cool huh  we're going to take some styles that i have here   we're going to come over here and just paste  them in and what we did was so we're cut we're   targeting our button again okay with the same  thing here but what we are including is this   colon hover and this will these styles will only  target the button when it's on hover okay so we've   changed the background color and i've changed  the color of the text while it's being hovered   so i'm going to press publish come back refresh  and you'll see that our styles have taken effect   let's get rid of this underline shall we what  we'll do is come over here to our hover styles   we're going to go to a new line do text decoration  and we're going to select none publish this   refresh our form come over here and you'll  see that it no longer does the other underline   when we hover okay so far so good form's  looking pretty good okay so the second thing   i want to change is that when you go through  this form and you haven't met a requirement   it shows up these these messages and you know  they're just a little they're just a little bold   for me and my website and the  colors that i have going on   so we could come over here let's hover on  this one here and we're going to inspect it   come over here and we'll find our field element  we could toggle this open and find something   like this and this is some code that says after  and if we come over here and find it over here   you can see the styles right here some of the  styles taking place if we press plus it gives   us a new field so to target that we are going to  come over here take that css class that we found   and it is contact styled nf error and field  wrap so this is kind of complicated that's why   i'm putting it in here for you and then here's  the after that we were looking for here's our   background color that we're going to change it to  we'll publish it come over here and refresh our   form click through and now you'll see that it's a  different red not as bold not as harsh in the eye   and it matches the styles that i'm going for with  my form let's change this guy now too new line   i'm going to paste in my code you'll see the  code is our styles the nf error and the nf error   message and you can see that right here let's  click on this element inspect it and again we are   targeting this nf error message nf error required  error we're targeting this message right here okay so let's place publish let's come  back over here refresh our page click click and it's hard to tell but this is now  the same color as this next i'm going to create   just a little bit i think this needs a little bit  of space in between this and this message and this   label here so new line and paste so it's going  to target my form fields that are required   and it's going to give it a margin bottom of 10  pixels come over here refresh and it's small but   man those little things those little breathing  rooms really help things come along nicely next let's change this little icon here i like to give myself some space here and we're  going to paste this in and we're going to see   our error message symbol it's going to have  a new color as well and we could come in here   refresh and it's small it's a little change  but it's all now has the same colors okay okay now let's say we filled this out  correctly with something like a my name   and you'll see it gives us a little check  mark but what if we wanted to change   this little icon and the color  in the background let's do that okay so i've come over here we could take this  element click on it and inspect it and find   everything that we need to know about it we could  find the class for the field element we could find   the input and the classes given to the input okay  and we could also come over here and find out the   classes as well so i've come and i've copied my  classes that i need and i after because as you   can see this is a label once again that is placed  after this element all right so i've given the   font a new color the the background a new color  and i've also changed the content of the icon okay if we come over here and refresh our form  preview and you know when we type something in   here that is is required it doesn't do anything  okay if we skip a field and it gives us this   warning and we come in here and correct it you'll  see that we have our new icon here and what this   is is a font awesome icon you could go to font  awesome icons and use these as well so these   have been included with the ninja forms plug-in so  you can go to font awesome.com find an icon that   suits your need your needs and change it here if  you'd like just makes it a little bit more custom all right and so the last thing we wanted to  do was change this harsh black around here   and so what we're going to do i'm going to do  something a little bit different what i'm going to   do here is come to the top of my contact form css  and i'm going to put this guy up here on its own   and instead of including our contact styled class  in front of it i'm just going to leave it as is   so that this is going to target all forms  on my website so i'm going to publish this   refresh our form and you'll see it's  changed the color of the background okay   the reason why i wanted to do that is that  i wanted to show you that if we come to our   contact page where we have all our forms  except for the one that we are working on   you'll see that the styles that we have been  working on aren't included in all these forms   and but what has changed is the color of  this background icon okay and the reason is   if you don't include this custom class like  we have every single time it will change the   styles for all your forms on your website so  this is one reason why you want a custom class   and if you want to change all the forms on your  website this is why you don't need a custom class   okay so before we leave what  we always want to do is provide   notes on the css and what we are doing okay  so i'm going to type in something like custom styles for all forms okay and what you  could do is you could come over here   you could highlight that and press command forward  and it puts these little brackets you could type   these out as well if you want but this makes it  a note so these are notes it has nothing to do   with your styles and it doesn't show up on the  back end of your website and you could create   notes for your css to remind you what you are  doing okay so let's just go ahead and copy this and i am going to put this on the line and  i am going to say end okay because this is   the end of all those custom styles so i  want to label this one custom styles for con let's say contact form okay select this   command forward bracket or  forward slash and it puts in these and i want to show where i'm starting my styles  and i want to show where all these styles end okay and let's get rid of this space we're going  to press publish and you'll see it does   nothing to our contact form and it doesn't  even show up in our html okay it's only   these are notes for when we want to come back in  here and look at our css that has become a page   and pages and pages long now you know what these  styles are for when they start and when they end so the last thing we want to do is put  our demo form into our contact us page   to see how it all looked out let's go  ahead and prove our preview our page   and you can see it's right here contact  me styled demo with everything in it if i   put my name it should go through just fine if  i forget to do my last name our styles come in   if i put in my last name you will see  that the thumbs up is given if we hover   our button works and you'll see that our  classes have not been transferred to these   other forms okay the only thing that has  been transferred to these other forms   is this little icon here okay remember we  didn't use our custom css class for the icon   and we used it for every single thing else  everything else i'm going to have all this   code on this blog post on my website so you can  copy and paste it and not have to type it all out   if you're new to css i do recommend typing  this all out you will come across all kinds   of different options when you start writing things  out and these things will help you learn css and   help you get comfortable making your own styles  and there you go i just showed you how to stylize   your ninja forms using the free ninja form builder  and css ninja forms does offer a premium version   that comes with an awesome visual builder if you  need to make even more customizations to your   forms and don't know a lot of css this is a  great option for you i'll have a link below   with an affiliate link that helps the channel  grow if you decide to use it so don't forget to   subscribe to the channel like the video if you  found it helpful and i'll catch you next time

Channel: Kris Jolls

Views: 584

Keywords: web design, graphic design, wp, wordpress, ninja forms

Id: y24qNGLVfqE

Length: 28min 14sec (1694 seconds)

Published: Mon Mar 22 2021