From the course: WordPress: Contact Forms

Adding a basic contact form - WordPress Tutorial

From the course: WordPress: Contact Forms

Start my 1-month free trial

Adding a basic contact form

- [Narrator] After we activate Ninja Forms, we can click on Ninja Forms in the menu. And this will show us our list of forms. Ninja Forms comes pre-installed with a simple contact form that you can check out. But for right now, let's click add new. This will take you one of my favorite features about Ninja Forms. They have a couple different templates for you to choose from. There's a blank form, a contact form, a quote request, and a lot more. These templates can save you a bunch of time. Let's start with the contact us form. And notice that this takes us to a whole new layout. This is becoming more common in the WordPress world for a plugin to take over the whole screen so you aren't distracted by other things in your site until you're done with the task. We can immediately see that we have four fields and we can tell that they're all different types of fields based on these little icons on the left. You can click into any of these fields and customize a ton of the options. We'll look into this later in this chapter. For right now, let's go with the form as is. One feature I love is the preview feature. You can click the little I and see exactly how this looks on the front end of your site. Let's click publish, and then we'll click the little X icon to get out of the screen. In previous versions of WordPress, we used to have to copy this short code right here. But now that we have Gutenberg, there are far improved ways of adding a contact form to a page. But just to show you the difference, I'll still copy the short code and show you both ways. Let's go to pages. I'll go to contact. And we'll scroll down. This used to be where our Jetpack was. I'll delete that block. And now I'll click the little plus icon. And I'll type in short code. This lets us manually add any short code to our page. So I could save this right here, and on the front end we would see our Ninja Forms form. This still works, but short codes are so 2018. Let's use the new Gutenberg magic. I'll delete this. And then I'll click the little plus symbol. And I'll type in form, and Ninja Forms is right at the top. I'll click Ninja Forms and then I'll select the form I want to use. The post editor then loads our form in our content, which is great for previewing what it looks like. One of the things I want to point out is that Ninja Forms is more complex than Jetpack, and you can't edit on the screen like we could with Jetpack. Let's update this page and fill out our form. I'll click submit. And here we can see that the form was submitted successfully and the user gets a confirmation email and the admin gets a confirmation email. We'll look at how to customize these later in the course. For right now, let's go back to our form and customize it. I'll go to the admin. Go to Ninja Forms. And our second form, here, which we created. And here we can customize all the fields. I like name, email, and message, but I want to add a phone field. Let's click the plus button and then select phone, which has the little phone icon. And as soon as we do, it's added to the form. Now we just drag it above the message field. And now we can click into it and customize it. The label seems pretty fine. Let's go ahead and make that required. And under restrictions, there's something we can do to make this easier for our users to fill out. We can scroll down to input mask and select U.S. phone. Let's click done and then click the little preview icon to see what this does. If we scroll down, we can see that this is showing us how to fill out this data. So, if I try to type in GTH, nothing is showing up. It's limiting what data I enter and it automatically formats it for me in the way I want. Input masks are a very powerful tool that Ninja Forms includes. Let's close the preview. I'll click back into phone. And I'll close restrictions. And under display, there's a useful help and description field. The description field is automatically displayed and takes up some visual space right above the field itself. The help field adds a little information icon next to the field name, and you can hover over that little I icon to see the text. I recommend either using the help text or the description text, but not both. I like options that only show text when you hover, so it's less visually cluttered. So, I'll put my text there. And then let's click done. Once again, let's take a little preview. There's the little I icon and my text. With other form builders, you sometimes have to add spam protection to your form and it's something that you have to think about. Luckily for us, Ninja Forms does this automatically. They include a honeypot field in every form. And they even let you do more with this. I'll click on the little plus icon. I'll scroll down. And they have an additional anti-spam field that we can add if we want. You can ask a basic question which has to be answered for the form to be submitted, like what is two times three. Most bots aren't equipped to handle any sort of reading and inputting data, so if you ever have spam problems, this anti-spam field is very useful, but I wouldn't add this field until you have issues with bots getting past that built-in honeypot feature. Let's click done and let's remove this anti-spam field. I'll hover over the little gear icon, and then a trash icon becomes apparent. I'll click that and it's deleted. Let's click publish, and that's the basics of Ninja Forms. As you can see, it offers a lot more features for store owners to dig into.

Contents