FREE Wordpress FORMS with Ninja Forms are easy!

one of the biggest reasons we create websites  for our small businesses our hobbies and   personal endeavors is to allow people to  contact us a phone number on your website   isn't always the best option and sometimes  most of the times it's good to have a contact   form aloha everybody I'm Kris Jolls and today i'm  showing you how to get started with contact forms   using ninja forms plug-in the ninja  forms plug-in is a free plug-in   it's a powerful plug-in and it allows you to  create awesome simple and free contact forms   for your wordpress website so don't forget to  subscribe like this video and let's get started   okay so here we are at our demo website your  divi website dot com and i created a contact   us page and you can see it here so with divi forms  you could create with the free version you could   create basic forms that you would find on small  business websites uh you can see i have a demo   of that here for your first last name email and a  message and then i even show here that you could   insert these little helper icons there as well if  you scroll down the page i also have on there some   more advanced forms that you would get with the  paid versions okay that you could create these   and you could do things like conditional  logic that says when this box is checked   allow them to enter something right you could do  all kinds of cool things with conditional logic   and then i also have advanced multi-part form with  ninja forms the page version as well you could do   multi-part forms we could do multiple steps okay  and that's a really cool thing to do not every   case needs that so let's start with what this  video is all about today is creating a basic form   on your website so let's get started all right so  here we are at our plugins and the first thing you   need to do is download the ninja forms okay by  now you should know how to download plugins if   not you can watch my video on how to download  plugins just search the the wordpress plugin   catalog and it will be the first one that comes  up when you search ninja forms uh you'll see i   have these additional add-ons here that i'm gonna  deactivate these are for the paid version and for   now i'm gonna deactivate them to show you what  the free version of ninja forms gives you okay   so it's deactivated let's go over here to this  ninja forms tab that it will show you you can see   here i've created the other forms here and here is  my basic contact me form this form actually comes   with the plugin when you download the plugin it  will come with a form already created for you and   it's actually a pretty good form so if we come  over here i can edit it and here i can edit it   as well so let's just go ahead and check this  out real quick show you what it looks like   and this is pretty much what it comes with is  a basic form it's got your name last name email   and a message pretty much what you would find on a  basic contact form where you just want someone to   leave their name their email so you can get back  to them and a brief message okay so you could   use this to get started with all right let's just  close this and from here you could also create a   new form okay so let's just go ahead and create  a new form so you could see how this all works   when you get started though i recommend just go  ahead and starting with their contact me form   and you can make the edits in there okay this form  is fine it's all set up and ready to go for you   you just do have to input some basic things like  your email address and stuff like that and we're   going to go through all that right now so let's  just go ahead and create a new form you'll see   you have here additional things that you could do  with your forms none of which we are going to be   using right now so let's go ahead and create  a blank form so we could create a blank form   and you'll see here they have a contact us  formula as well allow your users to contact   you with this simple contact form you can add add  and remove fields as needed that's all great but   i'm going to show you how to create this on your  own so you know more about how to use this plugin   so here we have the form fields here we have where  the actions that are going to take place on the   on the form and then we have advanced settings  as well and then we can preview the form here   so let's just start adding form fields the form  fields come in different varieties and the first   one that we're most familiar with is your first  name and last name so you can either click on   it or you could drag and drop it in there as well  just like that okay you could hover over this one   you could duplicate a field and then you  could delete a field and then you could go   into its settings so we're going to  go ahead and delete this field here   we're going to add in our last name we  want an email and we want them to be able   to send a message so we're going to add our  paragraph text in here as well and last but   not least you're going to want to submit the  form so we're going to drop that one in there   okay so we'll go ahead and close this and now  we are going to work with our form fields so the   first one is our name field and if we come over  here to our settings you can see we could edit it   first thing we could do is edit the label  this is the label right here for the form so   first name if you ever need any helps on this you  hover over this guy and click it and it will let   you know enter the label of the form field this  is how users will identify individual fields   so it's pretty self-explanatory this is your  label right there you can make this required   which i would recommend you could show the  restrictions so disable browser autocomplete maybe   you don't want this form field to pick up some  of the things that are in your users computers   display so in the display you have a lot of  advanced options you could have a default value   you could have a placeholder a placeholder is  basically something that is in that that will   appear in this in the field here now one thing  i don't really like about this form builder   is that when i put something in here it should  show up in here placeholder enter text you would   like to be displayed in the field before  a user enters any data okay so if i press   done this is how it will look okay so there we go  there's our preview right there when we close it   all right so let's just go ahead and open up that  field again now they already know to enter their   name so we're not going to use that you can  enter custom class names now if you know css   here is where you would enter your custom  class names help text now help text is   where you can leave some information to help  your your user figure out what they need to   be putting in this form now we're going to  go ahead and put uh put your name here okay   all right so we can help them along if they need  it description is if you needed a description to   go with this form field so we'll put a description  like this in information remains private   now this is not something you would usually put  in these fields but i just want to show you and   give you example where they show up in your  form okay so we've entered this information   under the display and we're going to go ahead  and press done so that we could see where it   shows up in the form okay so we got our label  we got our description and then we got our field   good all right so let's just go and open this guy  back up let's go to our advanced tab and you can   see you could do things like change the label  position so right now it's at the default which   is above the element you could also go below the  element and to the left of the element let's close   this to see what it looks like and you can see  it's updated there for now let's just go ahead   and go back to the default and you can see you  have all these different options you could even   hide the label as well which i do not recommend  let's go to custom name attribute this is not   something i would recommend changing at all this  is changing the some of the data and the code   behind it that makes this all work okay so do not  change this this field is personally identifiable   now in order to help with uh privacy regulations  these days you should have this selected   stating that it's collecting personal and  private data and then finally there's the   field key this field key like uh before it has  to do with in the back end so that's our first   name we're gonna go ahead and leave all this stuff  in there and we're gonna press done if we open up   the last name you'll see it's a it's a form field  that's set up with the exact same settings as this   one all right so we are just going to go ahead  and leave it we are going to press required and   press done now email fields are set up to  receive emails and we are going to require this we're going to open up restrictions and you'll see  we do not need to disable it uh the display value   will remain blank and everything here will remain  blank maybe for here we'll put the text mes the   help text enter a valid email address we'll close  the display settings we'll look at the advanced   fields leave them all blank and the same thing  with administration okay we're going to close this   and then finally a paragraph text is a form field  that is takes in text so we're going to call this   a message we're going to call it required we  don't want people just forming out this field   this form without all these fields entered  we'll put a character limit of 150 maybe   uh 300. this isn't always necessary but i want  to show you that it's there so this will help you   avoid unnecessarily long emails and we  are going to go ahead and close this display will remain the same as well you know maybe for this display we will put  a a description please leave us a message   and then finally you could show the rich  text editor now this will allow them to use   something like this to create their messages  for you we're going to go and disable that   advanced and administration could stay  the same as well and we're going to press   done you can see this some  of the form has been updated   and before we i show you the submit button let's  go ahead and take a preview of the change okay   so when you click press preview or show preview it  opens up an archives page with your preview on it   so here it will give us a a note saying that  that the fields with an asterisk are required   this is because we made them required you'll  see our first name field here you'll see this   little info button that we created and you'll  see our description here and then our field   you'll see that we did the same thing with  the email address and we put a little info   button here or probably even better is just to go  ahead and leave a description for your user okay   now you'll see here that these are popping up  because the form has not been filled out correctly   so let's go back over here and last but not least  on this form i want to show you the submit button   the submit button is a field that submits the  form okay so wow it looks a lot simple on here   there's a lot of code going on behind these  little items here that help make your form   function okay so submit is what shows up in the  text you could always change that right here   send that's nend send and it's a process scene and same here you could put a custom class  here maybe you wanted to style it differently   so we're gonna press done here and you'll see it's  updated it to send if we click on preview pages   this is one thing i don't like but unfortunately  you can't get away from this kind of but i'm going   to show you a trick around this every time i  press this preview changes it's going to open   up a new tab instead of just refreshing my field  here so let's press preview changes and you'll see   it opens up a new tab and and i don't really like  that let's close these here is the preview that i   had before and all you have to do is go back to  that tab and press refresh and you'll see it's   refreshed it with our with our form okay so that  is a basic form now within this basic form you   have a few things let's go ahead and publish this  form first of all and we're almost there let's   create a title for this and we're going to call  this contact us and we're going to go ahead and   call this demo because i already have one in there  titled contact us so we're going to publish this   all right so now we need to go and look at some  of these email actions and actions so basically   it's set up for us some actions that we could do  when this uh submit button is pressed and all the   forms that are required have been filled and  you'll see here we could add more actions here these are the basic actions and probably the only  ones you'll need when you're creating a basic form   so first off is your success message now you could  turn these off and on as you'd like right here so   we're going to go in there and we are going to  see what this means now what this is is when   they fill out the form and it's successfully went  through there's gonna be a success message this   is the action name that you could change and  it will show up here and this is the message   that will show up when your user has submitted the  form so your form has been successfully submitted   we will reply within 24 hours thank you  okay anything you want would do that here   so let's go ahead and press done on that success  message then we have an admin email so the admin   of wordpress will receive an email saying that  someone filled this out okay so here's your   action is admin email is the is the title and  it's going to go to wordpress admin email which   is pretty neat and you could come in here and  change this to different things you could use   different users maybe your author maybe a user  maybe an editor needs to receive this email   you could select different things here and  so this is selected towards admin email   oh that's entered twice you could have this sent  to multiple email address as well maybe you needed   this to be sent to an author as well okay  so the author of the post for now for basic   forms we're just going to send it to an  email okay uh we're gonna call this uh   my website form submission all right and then what  is gonna be in that email that you receive when   someone sends you this form okay well basically  what we want is everything that is in the form so   we want the forms table okay if you come over here  to this little section you could say what you want   from the email okay you could say oh i only want  the first name and the last name or i only want   three but obviously we want all of those here okay  so if we go to form we could say we want the form   id we want the form title we want the subsequence  we want the submission count for these forms   we want all fields table or we want the fields  table which is all of them okay let's just go   ahead and let's go and select a few of these and  i'm going to show you how they show up in the   in the email that we receive so form id  we want the forms table and then let's   go ahead and add in there from here um the all  fields table and show you what that includes   as well and then you could go into advanced  features as well and fine-tune the way this   email will show up to you okay but for now these  advanced features are fine just the way they are   so we have our admin email setup we're  going to close this and then finally is   a store submission and this is basically how  your how ninja forms stores the submission   uh in your website and is also storing  the data okay of all those fields   we're gonna go ahead and publish this one and if  we go to our form here and refresh it you'll see   nothing has changed all those changes that  we made are on the back end of our form all right so let's go check out the advanced tab  now when we go to the advanced tab you'll see   there's some display settings restrictions and  calculations let's just check out the display   settings and from here you'll see we have  uh different options like the the title we   could display the title or not display it and then  this one here clears successfully completed forms   and then hides the successfully completed  form so that way when they're on that page   and they've sent the form it will remove the form  from the page okay same thing with uh clear it   will clear out all the all the um all the inputs  that the user did and then hide the form as well   and now in these advanced settings i'm going  to show you in another video we'll go over   advanced basic forms but this is basically  how you could style and use html and css to uh   to make advanced forms and if we come over here to  our restrictions you will see that we have some uh   some options here now a form with this value has  already been submitted so you could watch these   fields and make sure that this form isn't being  resubmitted by the same user uh you can require   a user to be logged in to even view the form  now we don't want this on a basic contact form   and we could also limit submissions maybe you  want this form only completed 10 times or 100   times you could create that number here and its  message and as well if the user's not logged in   you could have a not logged in message to show  that the form can be displayed if they just log in   finally we're going to come over here to  calculations and that's just a whole nother   beast that's not needed in a basic contact  form all right so we're gonna press done   all right so here we are back at our ninjas  forum tab uh under our dashboard we'll find   all our forms that we've made here's the form  that we just created the contact us demo and   in order to get this into our website  there's a couple ways that we could do that   here we have a short code and that's the first  way i want to show you so we're just going to   copy our shortcode and then we'll go over to  our pages and then enter our contact us page   and so here you'll see my forms that i've  i already have on on on here and so we're   just going to go ahead and create a new section  here and i'm going to call this basic form demo let's just go ahead and turn this into an  h2 here a heading with the shortcodes all   you need to do is enter it into a text any kind  of text block so we're just going to go ahead   and paste that in here it recognizes it as a  text box and it's ready to go so we are just   going to go ahead and update our page here we're  going to go ahead and preview this in a new tab   and you'll see we're at our contact page with our  contact us demo here is the form that we created   here's the info tab that we created and here's  the second one you'll see that all these forms are   required and then you could send the form in that  way so another way you could do it is just to come   in here to your block editor create a new block  and you can either search if it doesn't come up   but you will look for ninja form okay it's not the  ninja form submission table you want to look for   ninja form select that and then we're  going to select the form to display   for us we created the contact us demo we're  going to click on that and it's going to insert   it the nice thing is that we'll be able to see  it on our page unlike this other one that just   shows the shortcode so it's really up to you how  you want to how you want it to look uh on your   back end we'll come back here to our contact page  update it and you'll see it's the exact same form   that is applied all right so now that we've got  our form uploaded let's go ahead and fill it out   and show you what it looks like when we receive  our email so i am going to put my info here i'm going to enter my email and i'm going to leave a message this  is a message from my contact form   and then finally we're gonna send good and then  here's our form uh here's our reply message our   success message that we set up your form has been  successfully submitted we will reply within 24   hours thank you remember we set that up the form  was reset and you'll see the the basic form demo   is now gone let's go to our email and see  what that looks like as you see we got a form   submission and if we come down here and look at  the message it will include all the forms that we   wanted okay and so remember everything that will  be inputted here is going to be what we ask for in   our admin email okay so everything that we include  in here will be included in that email i also want   to show you this is another important feature  of your form let's go back here to our demo   and we'll go to our emails in action and one thing  that is not here is an email sent to the user that   filled out your form okay so let's go ahead and  send a new message okay so we're gonna go ahead   and click this and when the email is sent we're  gonna we are gonna send an email okay so we're   gonna send this email to the user that filled  out our form okay so we are going to select   not wp admin but we are gonna come over  here and we're going to go to the fields   of the form and then we are going  to select the email field okay   we're going to create a subject  such as welcome to the site   and then we're going to create a message hi thanks  for joining the club you could sign in here and   then we could create a link to where we want their  sign in page we can add anything we want here just   that we can send to our new user after they filled  out this form all right so we're going to press   done and publish to save all our settings then i'm  going to go back into the website fill out my form   and see what our new email looks like i filled  out the email and i got my response as a user   and the subject here is welcome to the site and  here's what we placed in the message hi thanks for   joining the club you could sign in here bam and  that's how you customize the message that's sent   to your user after they've filled out the email  all right then finally you could come back over   here to your form to your contact us demo  form that we just created and you could do   things like view submissions right here on your  wordpress dashboard so we're gonna click this   and you're gonna see we have the list of the  many times i sent this message to uh to create   this tutorial if you need to make a form quite  similar to this and you want to make a duplicate   so that you could stylize it or create a slightly  different form on a different part of your website   you can duplicate it give it a new name and start  a new form so that's pretty cool right there so   that you don't have to start all over again and  then finally also you could see up here you have   a tab for services that are these extra features  for the form plugin that you have to sign up for   as well as apps and integrations okay and we'll  go over that over in future videos if you are   interested i'll leave the link above let's go  through these dashboard settings for ninja forms   we've got we've got our dashboard right here we  could also create a new form here we could view   our submissions here for all of our forms we can  select the form and then view the submissions here   we can import and export the csv files for these  forms or other forms we have a settings where you   could go through some of your basic settings  and uh set them up for instance i have set up   a capture key which i will show you how to do in  a future video and then finally when you download   their extensions you need to upload those plugins  and then activate them with your license which   i will show you in my next video for advanced  forms with ninja forms okay and that's how you   create a free form using the ninja form plug-in  and there you go i showed you how to create a   contact form for your wordpress website using  the ninja forms plug-in the ninja forms plug-in   that we use today is free however they do make  an advanced version for more complicated forms   using conditional logic multi-part forms and  allows you to style your forms quite easily i   have a link above and below to some of those  videos that i created showing you how to use   the advanced version of ninja forms below i also  have an affiliate link if you use that link i get   a small commission and it helps the channel  grow i appreciate your support and aloha you

Channel: Kris Jolls

Views: 3,391

Keywords: wordpress, forms, ninja forms, wordpress forms, plugin, form builder, wordpress tutorial, wordpress website, wordpress tutorial for beginners, wordpress forms tutorial, wordpress forms plugin, wordpress free form builder, ninja forms wordpress

Id: A0VWyYpfnjI

Length: 26min 39sec (1599 seconds)

Published: Mon Mar 01 2021