WordPress Contact Forms Explained

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 there. In this article, 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 this article, you will be able to:

1. Install a contact form plugin
2. Create a custom contact form
3. Publish and use a contact form

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

• Go to “Plugins” and click “Add New”.
• Search for “Ninja Forms”.
• Click “Install Now” and then “Activate”.
• Click the “Ninja Forms” link on the Dashboard menu.

You see a “Contact Me” form that has already been created.

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.

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.

You will now see a range of different fields, including “Single Checkbox”, “Date”, “Address”, “City”, “Email”, “First Name”, and more.

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.

If you hover over a field and click on the cog icon, it will open up a settings box for that specific field. Here you can control several key elements about this field, including the label that visitors will see and whether the field is required.

Now that we have added a phone field, click on 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.

Click the cog next to “Email Confirmation”. Here you can control the “Thank You” email that is sent to the visitor after they contact you.

“Submission Confirmation” is a pretty bland SUBJECT, so let’s change it to say “Wordville Contact Confirmation In the body area, type “Thank you for getting in touch with Wordville”.

Click the cog next to “Email Notification”. Here you can control the email that is sent to you after the visitor submits a message through the site.

Notice the word “field:” enclosed in curly brackets {field:email}. This means the “REPLY TO” information will auto-populate using the info provided by the visitor on the form. Notice {system:…} in the “TO” box. This means that information is auto-populating from your website, not the form.

Click the cog next to “Success Message”. Here you can change the text that visitors will see on the screen after hitting the contact form submit button, so let’s make it more friendly.

Type in the MESSAGE: Thanks. You have submitted this form successfully. A confirmation email was sent. Feel free to Bold, Center, or add Bullet Lists to customize your message.

If you want to personalize the message and include details from the form submission, such as their first name, click the “Table” icon.

This pop-up window will give you all the details you can include inside the message. In our example, we have asked for the visitor’s Name, Email, Message, and Phone number.

Publishing & Using the Contact Form

You now have a contact form, but it isn’t available to your visitors yet. Ninja Forms uses shortcodes, and those are used to place forms into posts and pages.

SHORTCODE: Little bits of code in brackets [ ] that are inserted on a WordPress post or page in order to produce the desired dynamic content on your website.

• Copy the shortcode for this form

• Go to “Pages” and then “Add New”
• Type in Title: Contact us
• Type in paragraph block: Your voice important in building our community Please feel free to send us a message using the form below:
• Paste the shortcode
• Click “Publish” twice and preview.

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” button.
• Add “Contact Us” to your menu links.
• Click “Publish” to save changes.

To see all the messages sent via your form, go to “Ninja Forms”, then “Submissions” and select your form. You’ll now see a table with all the entries for this form.