WordPress ‘Contact Forms’ Explained (Step-by-Step)

Home   /   WordPress ‘Contact Forms’ Explained (Step-by-Step)

We are building this site for the city Wordville, and as a friendly community, it’s great to get feedback from the people who live here.

In this page, we are going to set up a contact form. This will provide a way for the citizens of Wordville to get in contact with their local government.

After going through this page, you will be able to:

  • Install a contact form plugin.
  • Create a custom contact form.
  • Publish and use a contact form.

with the following Featues ….

  1. Installing a ‘Contact Form Plugin’ in WordPress
  2. Publishing and Using the Contact Form in WordPress

1. Installing a ‘Contact Form Plugin’ in WordPress

For the contact form, we’re going to use a plugin called Ninja Forms. In the last chapter, we saw that Ninja Forms has very positive reviews, over 1 million users, and is frequently updated.

  • Go to “Plugins” and then “Add New”.
  • Search for “Ninja Forms”.
Installing a Contact Form Plugin in WordPress
204-Installing a Contact Form Plugin in WordPress
  • Click “Install Now” and then “Activate”.
  • Click “Ninja Forms” in the admin menu:
Installing a Contact Form Plugin in WordPress
205-Installing a Contact Form Plugin in WordPress
  • You see a “Contact Me” form that has already been created.
Installing a Contact Form Plugin in WordPress
206-Installing a Contact Form Plugin in WordPress
  • Click the Title, which in this case is “Contact Me”.
  • You see that our form will have a place for people to leave their name, email and message before submitting.
Installing a Contact Form Plugin in WordPress
207-Installing a Contact Form Plugin in WordPress

However, let’s add another field so we can collect more details from people who contact us.

  • Click the big, blue “+” button in the bottom right corner.
Installing a Contact Form Plugin in WordPress
208-Installing a Contact Form Plugin in WordPress
  • You will now see a range of different fields, including “Single Checkbox”, “Date”, “Address”, “City”, “Email”, “First Name”, and more.
Installing a Contact Form Plugin in WordPress
209-Installing a Contact Form Plugin in WordPress
  • Drag the “Phone” field from the right column and move it into the left column. Make sure to drag it inside the blue-outlined box.
Installing a Contact Form Plugin in WordPress
210-Installing a Contact Form Plugin in WordPress
  • You can place this new “Phone” field into the middle of the form:
Installing a Contact Form Plugin in WordPress
211-Installing a Contact Form Plugin in WordPress

If you click on the cog icon on the right of each field, it will open up a settings box for that specific field, as shown in the image below. Here you can control several key elements about this field, including the label that visitors will see and whether the field is required.

Installing a Contact Form Plugin in WordPress
212-Installing a Contact Form Plugin in WordPress
  • Now that we have added a phone field, navigate to the “Emails & Actions” tab.
  • Each of these rows is an action that takes place when the form is submitted. The first thing that it does is save the form submissions to the database.
Installing a Contact Form Plugin in WordPress
213-Installing a Contact Form Plugin in WordPress
  • Click the cog next to “Email Confirmation”. Here you can control the “Thank You” email that is sent to the user after they contact you.
Installing a Contact Form Plugin in WordPress
214-Installing a Contact Form Plugin in WordPress
  • “Submission Confirmation” is a pretty bland subject line so, change it to say “Wordville Contact Confirmation”.
  • In the body area, write “Thank you for getting in touch with Wordville.”
Installing a Contact Form Plugin in WordPress
215-Installing a Contact Form Plugin in WordPress
  • The third option, “Email Notification”, controls the email that is sent to you after the user sends a message.
  • The final option, “Sucess Message”, is the text users will see on the screen after contacting you. Let’s personalize this text also to make it more friendly. If you want to include details from the form submission, click the “Table” icon shown below:
Installing a Contact Form Plugin in WordPress
216-Installing a Contact Form Plugin in WordPress

The pop-up window will give you all the details you can use inside the form message. For example, to use the visitor’s name in a message, you can use {field:name}.

Installing a Contact Form Plugin in WordPress
217-Installing a Contact Form Plugin in WordPress
  • Here’s an example of how to use that personalization, by placing {field:name} into the body:
Installing a Contact Form Plugin in WordPress
218-Installing a Contact Form Plugin in WordPress
  • Now let’s go across to “Advanced” and then click on “Display Settings”.
  • Here you change the name of the form to “Contact Wordville”.
  • Click the “Done” button to save the new title.
  • Click the “Publish” button to complete your changes to the form.
Installing a Contact Form Plugin in WordPress
219-Installing a Contact Form Plugin in WordPress

2. Publishing and Using the Contact Form in WordPress

You now have a contact form, but it isn’t available to your visitors yet.

Remember back to the chapter on photo galleries when we briefly showed you the shortcode that was used to create the galleries.

Ninja Forms has shortcodes too, and those can be used to place forms on our site. Copy-and-paste the shortcode for this form.

  • Go to “Pages” and then “Add New”.
  • Place the shortcode into the page, as in the screen below.
  • Click “Publish” twice.
Publishing and Using the Contact Form in WordPress
220-Publishing and Using the Contact Form in WordPress

Next, let’s make it possible for people to access this new form:

  • Go to “Customize”, then “Menus”, and then “Main Menu”.
  • Click “Add Items”.
  • Add “Contact Us” to your menu links.
  • Click “Publish” to save the changes.
Publishing and Using the Contact Form in WordPress
221-Publishing and Using the Contact Form in WordPress
  • Visit the front of your site, and you’ll see your form in action.
  • Try using the form. You have required fields, so if you try to submit empty fields, those required fields will turn red. So at a minimum you must put in your name, email, and our message.
  • Fill out those fields and click “Submit”.
Publishing and Using the Contact Form in WordPress
222-Publishing and Using the Contact Form in WordPress
  • Once you click “Submit”, the form disappears and you see this success message:
Publishing and Using the Contact Form in WordPress
223-Publishing and Using the Contact Form in WordPress
  • To see the messages sent via your form, go to “Ninja Forms”, then “Submissions” and select your form.
Publishing and Using the Contact Form in WordPress
224-Publishing and Using the Contact Form in WordPress
  • You’ll now see a table with all the entries for this form:
Publishing and Using the Contact Form in WordPress
225-Publishing and Using the Contact Form in WordPress

Tags

Categories

Archives

Translate:

Translate »

Contact Us