Contact Forms in WordPress: Every website needs one

Contact Forms in WordPress: Every website needs one

One thing that you need on all Websites is a Contact Form. This article is about adding & managing Contact Forms on a WordPress Website.

We will talk about Contact Form 7 & Jetpack Forms, two of the most popular & free Contact Form Plugins on WordPress Repository.

No Coding experience is required for this article.

Basic CSS knowledge would help you create better designs.


Contact Form 7

Step 1 ) Install Contact Form 7 Plugin ( Learn how to Install a Plugin )

After successful installation, Plugin creates a demo Form for you that you can access in Contact Menu.


Displaying a Form

Let’s start with displaying a form on your page. First, open the ‘Contact’ > ‘Contact Forms’ menu on your WordPress administration panel. You can manage multiple contact forms there.


Just after installing the Contact Form 7 plugin, you’ll see a default form named “Contact form 1”, and a Shortcode next to it.

Copy this code. Then, open the edit menu of the page (‘Pages’ > ‘Edit’) into which you wish to place the contact form. A popular practice is creating a page named “Contact” for the contact form page. Paste the code you copied into the contents of the page.

Check Demo Contact page for Default Contact form 7 Form attached. Follow link below.

Customizing a Form

adding more fields to contact form 7The default contact form is too basic & you can add more fields to it. Contact Form 7 offers all type of input tags.

To add fields to a form, make tags for them and insert them into the ‘Form’ field. You’ll find unfamiliar codes in the ‘Form’ field, for example, [text* your-name]. These codes are called “tags” in the vocabulary for Contact Form 7.

Customizing Mail

You can edit mail templates in the ‘Mail’ field set as you did with the form template. You can use tags there as well, but note that tags for mail are different from those tags for forms.

Tags you can use in a mail template contain only one word in brackets and look like [your-name]. You should be aware that this ‘your-name’ is the same as the name of the form tag which is noted in the previous example. The two tags correspond with the same name.

In mail, [your-name] will be replaced by the user’s input value, which is submitted through the corresponding form field, which, in this case, is [text* your-name].

Saving Contact Form Values to Database (Important)

Flamingo is a message storage plugin originally created for Contact Form 7, which doesn’t store submitted messages.

After activation of the plugin, you’ll find Flamingo on the WordPress admin screen menu. All messages through contact forms are listed there and are searchable. With Flamingo, you are no longer need to worry about losing important messages due to mail server issues or misconfiguration in mail setup.