Topic Progress:

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

6: Ninja Forms

Running Time:  20:02

When it comes to adding forms that allow you to obtain voluntarily supplied user data, WordPress has many plugins to choose from.

One of these is Ninja Forms, a very well known and flexible forms plugin.

Here I show how to set up a contact form using one of the templates that comes with the plugin.

While the plugin is free there are many affordable add-ons (plugins that only work with Ninja Forms) that allow you to connect with third party services like MailChimp and AWeber.

Links In This Video

Transcript Of This Video

Have you ever been to a website that didn’t have a contact form? Probably not. In this video I’m going to show you how to set up a contact form using a very well-known plugin called Ninja Forms, and you can see with this plugin I have a field for the name, field for email address, I’ve got this little text box area over here with a rich text editor and a submit button, and I’m going to use Ninja Forms to set up something very similar on the site that I’m developing. But first, let me show you about Ninja Forms. Here’s their site. It’s a very well-known plugin, and it’s an excellent resource. All kinds of good information and the nice thing about Ninja Forms is the plugin itself is free. But as we’re going to see, extensions for the plugin or what they call add-ons– Those are things that you’ll have to pay for. But let’s get right into it, and I’m going to go to my site that I’m building.

So I’ve already installed the Ninja Forms plugin like I said it’s free, and it gives me all these other areas here to explore. We’ll look at a lot of the plugin here, we’re not going to check on everything, but we’re certainly going to hit the highlights here.

On this page here it gives me a list of all the plugins that I’ve had so far. Now, just by virtue of the fact that I’ve installed the plugin, it gives me my first form, and it’s called “Contact me.” But let me show you something before we get into that, let me go over here to “Add new” and what I love about this plugin is that it gives you a whole list of plugins that are already pre-built that you can use just out of the box, or you can edit them to your specifications. That is a real time saver if you ask me. We’re not going to explore all of these, but if you wanted to collect feedback, or here’s a blank form which means you could start from scratch. There’s all kinds of great forms here that get you started. MailChimp, and so forth.

OK, great. But the one I want to start with and explore is the “Contact Us” option here, so we’ll start with that. It does that pretty quick. It didn’t give me much time to give it a name, which is something I don’t like. That was way too fast. But I think that’s the only little glitch in the whole thing, so not too bad. Anyway, you can see that it gives us four different inputs to start with, and you have the “Name” “Email” “Message” and “Submit.” If I click on any one of these like I just did, you’ll see on the right side all the options will open up for that field. So again, if I click on “Email”, you’ll see that’ll change, “Email.” You can see that they change. We’ll look at some of this, we’re not going to go through every single thing, but you’ll get the idea. If I want to put in somebody’s name, by the way, I usually have two different inputs for name. First name and last name, it’s just a lot easier to handle the data that’s submitted. But right now, just name, that’s the default, and that is the way Ninja Forms sets this up. The label is what people are going to see on the site, so you’ll say “Name” or “First name” or whatever, those are the words that you’re going to see.

Then, how do you want the label to be positioned? Do you want it to be positioned above the little box, or below the little box? Here you can see all these different options over here. “Above” is the standard, so I’d leave it that way. Is this going to be a required field? Do people have to fill this out? That would make sense that they do. “Restrictions,” limit the number of words or characters? No, we’re just going to leave that alone. “Display,” do you want to put a rich text editor in there? That wouldn’t make any sense to me, so I’m not going to do that. Some of these other ones deal with use of HTML and CSS, so we’re going to leave that stuff alone, and we’re just going to accept that. We’ll go over here to “Email,” and “Email” is pretty much the same thing, so I’m not going to get into that. For “Message,” the only thing I want to do with “Message” says “Paragraph text,” and “Message–” So you want to leave a message, that would be fine. I don’t want to make this a required field, so I turned that off. Then for “Display” I’m just going to go over here, and in this case, I do want to use this cool little rich text editor here, so I’m going to flip that on over here.

It says, “Do you want to turn it off for mobile?” I think I’m going to leave it off for mobile and leave it the way it is because it looks silly for mobile and probably doesn’t work all that well. Having done all that I am now going to click “Done.” Of course, I can come back and edit this anytime, and as I’ll show you later on you can add more fields or take fields out. So, let’s have a look at the form as it currently exists. For that, we’re going to go click publish. Now, this doesn’t mean it’s on a page, and it just means it’s saved. I wish they had said, “Saved,” it would make a whole lot more sense.” I’m just going to go back to our main page over here, and you can see now I have two forms named “Contact me,” which is confusing. But I want to use the one that I’m working on, which is this one right over here. The second one. So I’m going to click this little button over here, and you can see I have various options that come out here.

I can edit the form, but what I want to do, I can duplicate the form which is nice. Suppose you have two forms very similar you don’t want to start all over again, that’s a good way to start is by using the duplicator over here. But I want to preview the form, so I clicked on “Preview.” Again, this is not live on my site. It’s not in any page. It’s just going to give me an idea of what I’m going to have here. Here’s that rich text editor business over here, and submit, and that’s OK. I like that. What I’m going to do is publish this. Let’s click out of this, and we don’t need this. OK, I’m going to publish this and then I’m going to add some things and show you a little bit more so you get a better sense of all the different options that Ninja Forms allows you to use.

I’m going to go over to my site. In fact, what I’m going to do is let’s go to the prototype site. Take a look, and now the prototype site is two columns. It’s got a column for the form, and it’s got this little text area which I’m going to copy. I’m going to cheat, and then I’m going to show you what I’m going to do. For contact, we don’t have anything which is exactly what I would expect. Now I’m going to click “Edit” over here, and for this, I’m going to use a multi-column layout. So let’s use that column black over here, and I’m just going to type in “Column.” Here we go, “Column.” In the first column we’re going to put the form in, and the second column to the right we’re going to put the text in. I’m just going to paste that in, Command-V. All right, but what about here?

This is kind of cool and sort of new, actually, because of Gutenberg. I’m going to click on this, and I installed that plugin, Ninja Forms, so there might be a block for Ninja Forms. If I type in the word “Ninja–” There it is. That’s great. So now, if I click on this, it’s going to display the two forms I already have set up. I know it’s the number two, so all I have to do is click on number two and wait a second, and you get a real live look at the form, not just some code that you might have seen in the past. Now you get to see the form. You can’t edit anything here, and you’re can have to go to the Ninja Forms admin area to do that. But at least you get an idea, “This is what it’s going to be.” I am just going to update the page, and we’ll have a look. Let’s see.

Let’s go over to look at this page, and we’ll see how good is that? OK, but I want to add something to it. I want to add– Let’s say, “Subscribe to my newsletter.” How do you do that? Let’s go back into the admin, and we’re going to go back to Ninja Forms, we’re going to go back to the dashboard, and this is the form we’re working on. To get rid of any confusion, I don’t want this form, and this is the one that came with it. If you don’t want a form anymore or if you don’t want it at all, we’ll click on this little button over here, and we’ll click on “Delete,” and it will prompt you with all kinds of things because you never know. You might not be awake and might make a mistake. So, I do want to delete it, so I’m just left with this one. That’s fine. Now I’m going to edit this so you can click on this, and we’re going to add another input and another field. How do you do that?

Right over here in the bottom right-hand corner, there is this nice plus sign over here, and this opens up all the different kinds of inputs that you can add to your form. You can see you can do all kinds of things. They even have things that deal with e-commerce and layout, but we’ll make it pretty simple. When you’re asking a question where you want a mutually exclusive answer, in other words, a yes or no or give me one out of the following five. For that, you’re going to use a radio list. OK, so I’m going to take this little guy right over here and drag it into place, and I’m going to now click “Done.” There we go. Now, by the way, you might have figured out “Yes you can drag these around too, much like creating menus in WordPress, how you can drag and drop these little things, you can do that with this form. So I’m now going to say radio list, and I want to put it over here, and I’m going to click on this, and it gives me a fly out over here with all the options. I don’t want the user to see the word “Radio list,” I want them to say something like “Subscribe to my newsletter.”

We’ll leave all this stuff alone. We’re not going to– Let’s make it required because I want them to answer this question. It’s a required field, and for this, there’s only going to be two answers. OK, so we’ll get rid of one right off the bat. We don’t need that. For the first one, we’re going to say “Yes,” and then for this we’re going to say “Yes” over here. Which means I’ll tell you why in a second. Let’s do “No” over here, and we’ll do– There, perfect. “No.” So these are the words “Yes” and “No,” this is exactly how they’re going to see it on the website, but this is how data when they say value– This is how the information gets stored, lowercase like that. That’s just my prerogative. Now, do I want it to be pre-selected? I think that’s what that’s going to do, pretty sure about that. So that means “Subscribe to my newsletter, yes” will be pre-selected for them. I like that. When I’m done, I’m going to click “Done.”

Now if I go to the site, I’m actually on the site. Let’s do this. Let’s publish, which is again crazy because what you’re doing is updating in this case, and I’m going to close out of this, and we’ll see– Let’s go to the site. We’ll go to contact, and this is perfect.

So that’s exactly what I want. You can see that the “Yes” was pre-selected, so the user could still click “No” and then submit, but I like the pre-selected idea. You can see that you can add many different fields and do all kinds of customization for each one, but there’s a little more to it than what I’ve shown you so far. Let’s have another look.

So, we’ll go over now to Ninja Forms. What happens if I wanted to integrate this to MailChimp or AWeb, or all different kinds of services? For that, you’re talking about add-ons. So I’m going to take us down to over here, “Add-ons,” and these are the different add-ons. They’re like plugins actually, that plug into Ninja Forms. They would only work with Ninja Forms, and you can see the different types of services that you can connect your form with. I love MailChimp, so you could do that. There is all kinds of different systems. There’s AWeb over here, and this is another email distribution service. If you wanted your data, let’s say they subscribed and you wanted the information to go to AWeb, not just to you. Then you would click on “Learn more,” I suppose, and “Learn more” is going to take you to the place where you’re back on the Ninja Forms website, and you can purchase it. Over here, you can see a single site license is $19 for a year, and you have the ability to connect whatever users submit from your site using Ninja Forms to AWeb. It’s nice.

Now if I go back over here to the site that I’m working on, you’ve seen all these different integrations, and by the way that’s how Ninja Forms makes their money. Because they give away the Ninja Forms plugin for free, it’s all these extensions that cost money. But I want to show you something else, a little deeper look into that contact form that we created because we need to see a few other things. So, let’s have a look at the form. Let’s go back over here. Now, you had these options over here that we haven’t looked at and we’re not going to look at every one. In fact, the only one I want to spend time on is “Email” and “Actions,” because this is important. Which is “What is going to happen after the user submits the data? Hits that ‘Submit’ button. What do you want to happen?” As the way they do things, they have a whole bunch of things already set up for us. For example, one thing we’re going to do is the data is going to be stored, so whatever information they supply to us the data will be stored in our database so we can have access to it. It doesn’t have to go anywhere, and it can go right to us unless you say for some reason I don’t want to store the data. Wouldn’t make any sense.

Then you have these other options over here, other things that are going to happen. One is an email confirmation, so let’s click on that. We’ll see over here that an email is going to be sent to me, that is the admin is going to get an email, and it’s going to tell me exactly all the information where it says over here. These are little shortcodes, all the information that was submitted is going to appear in my email right over here, so this looks like an email. Of course, you can edit this to whatever you want. Ninja Forms, like almost all form plugins, use these little shortcode-y things and these curly braces, and there’s plenty of places to get information on what this all means. You would go to the Ninja Forms website to find out all the shortcodes that you could use.

You could put in a subject, and this would go to yourself. That goes to the admin or the site owner, the next one over here is a notification, and this is what the user gets when they fill out the form. So maybe you’re going to send them a little message over here. You could put in– You could take this all out and put in your message that says “Hi X,” whatever their name is, “Thank you for filling out my form and subscribing to my newsletter.” You could do something like that. This is an email that goes to the user, and the last one over here, “Success message,” this is what the user sees on the web page when they hit the “Submit” button. So you hit the submit button, and you see a little message over here, that’s what this is. Now the nice thing about all this is you can customize all these, and you can– Let me get rid of this over here.

You can remove them, so if you don’t want something– Let’s say you don’t want a message to be on the web page, you can delete it. Of course, you go down here, and if you want other actions to take place or other events after they submit, you’ve got all these things over here that you can use. Notice over here, here are the add-ons. OK, again they are all greyed out because I haven’t paid for any of them, but it would be very easy to pay and then install the extension, and then I’d have access to this additional service. I’m going to go back over here and a couple little things more to do and we’ll be done. Yes, I do want to leave the page. OK, so that’s fine. When you do buy an extension one of the things you’re going to want to do is just head over here to “Settings,” and I like this plugin so much that I don’t mess around with the settings, so I’m not going to take you through it. You might have to do something with the settings, and this would apply to all the forms that you use. Remember, you don’t have to create one form for your site. You can create many different forms, starting with the pre-made forms that they have or creating your own form from scratch using that blank form.

But what I want to show you is license. So, you’re going to have to type in, or you’re going to put your license in over here if you buy additional add-ons OK. It would say “MailChimp,” and then you’d put the license key in over here, a series of digits. Two other things I need to show you, one is if I go over here to “Imports and exports, let’s say you have a website and you love the forms that you’ve created, and you want to move them to another form. Let’s say it’s a friend’s form, a client form, a client site, whatever. It doesn’t matter. You can export the form, and it’s in the form of what’s called a JSON file. You download it to your computer, and then you import it to the site that you want the form to appear on. So, that’s nice. There’s an “Import, export” feature to this. Fabulous. The last thing to show you is this, and that is once people start filling out your forms all that data is going to get stored on your server. You can reuse it and download it as a CSV file, but the more effective way to use the submitted data is, of course, to connect your site using one of those add-ons with a third party service.

All 6 Modules In This Course