Adding a Contact Form to Your Site

Learn how to add different types of contact forms to your site without knowing any code. It is important to add a contact form to your site to ensure you can connect with clients or visitors to your site in a safe and professional way.

Learning outcomes

1. Explain the different types of contact forms.
2. Explore using different plugins to add a contact form to your site.
3. Create a general, registration and subscription contact form.
4. Identify that the UI appears and works differently for every plugin.

Comprehension questions

1. What type of contact form would you like to add to your page?
2. Which forms plugin appeals to you or suits your needs?
3. What are the advantages of using a contact form on your page?

Resources

Choosing and Installing a Plugin

Transcript

Hi, and welcome to Learn WordPress. Today we are going to look at how to add a contact form to your site. Now the question, of course, is what type of contact form are you looking for? Are you after a standard contact form? Or would you like visitors to subscribe or sign up for something or RSVP for an event, or maybe you would like somebody to be able to download a document once they register, or you have a business and want the ability to allow visitors to your site to request a quote from you. As you can see, there are many options to choose from. All you will need is a forms plugin.

In this session, we are going to explore how to add a general contact page, a registration form and also a subscription button using different plugins. Let’s start with the contact page and I’ll show you how I created this contact page using the WPForms plugin. I’ve created this page using a Columns block and then added a Cover block with a white background on the left.

So let’s make our way to plugins and click on Add new and then search forms. As you will notice, there are many plugins to choose from. But in this example, I’m going to install and activate the WPForms plugin. Once installed, we can scroll down and click on Create your first form, and on the right, you have many free templates to select from but in my example, I’m going to add a blank form. And now, you can start building your form by selecting from the standard fields on the left of the page. So firstly, let’s add the name field, email and then a drop-down field, as I want visitors to my site to select a specific topic when they contact me. So firstly, let’s change the label to Topic and the three choices are firstly, requesting a demo, secondly, getting inspired by what other clients are saying or projects we are working on, and thirdly, finding out about pricing. Then I will click on Add fields top left and insert a paragraph text field, and once added, we can change the label to Comment or Message. And once we change the name of our form to Contact form, in this case, we can click Save and make our way back to our page.

Now I will add my contact form above the contact information and insert the form I’ve just created. When you click on Preview to see things from the front end, you will notice on the right it says Book a demo, Get inspired and Pricing, and now when you click on the drop-down, you see those options as well. In the second example, we are going to create a registration form with the help of the Ninja Forms plugin.

Let me show you how I made this registration form for a leadership conference. I once again used a Columns block and added some information on the left and images on the right. To add our new plugin, let’s make our way to the Plugins Directory again and click on Add new and search for forms,
and this time, we are going to install and activate the Ninja Forms plugin. Once installed, click on Ninja Forms in the sidebar settings and then select Add new. Here are some templates to choose from, but we are going to go ahead with a blank form again.

We will add a first name, last name, email address, phone number, address, country, zip code and then also a checkbox list for dietary requirements. When you open the checkbox list we can change the heading to dietary requirements and then add the labels below from vegetarian to different allergies. And once you’re finished, click Done, Publish and then make your way back to the registration page. And now we are going to add the registration form below the information in the left column. So find the Ninja form, select the one you created, and even though it looks quite narrow on the back end, if you click on Preview, you will notice it displays correctly. And there you have it.

In our last example, we are going to create a subscription button or call-to-action. As you will notice, we only want people to share their email addresses. For this example, I copied and pasted a pattern from the Patterns Directory and I’ve added the heading, Sign up for our newsletter. So to add our subscription button, let’s make our way to plugins, click on Add new, search for forms, and for this example, I’m going to use the Formidable Forms plugin. So once installed and activated, click on Formidable in your left sidebar settings, click on Add new and select blank form again. Name it appropriately and click on Create. And now, we are only going to add one field, email, and once you’ve done that, you can click on Update and head back to your call-to-action page. And then below Sign up for our newsletter, we will add our form. Then we can click on Preview again to see the final result.

There are many plugins available in the Plugin Directory, so you can choose the one that’s right for you. As you have seen, the user experience of plugins differs. The way the plugin looks and works all depend on the plugin developer. Please be reminded that some of these examples might slightly change as WordPress and plugins constantly evolve. Visit Learn WordPress for more tutorials and training material.