A WordPress Contact Form

WordPress has the ability for people to comment on your post. But to contact you in a more private conversation you need a WordPress contact form.

Having said that, WordPress does not have one by default so we need to add one now.

If we go back to where we left off in the last tutorial, we had installed Twenty-Seventeen theme.

Contact in menu

You notice that we do have a contact page already if you look at the top menu.

Click on it now and you find this message telling us we need a plugin to create a Contact form.

Contact Page - WordPress Contact Form

So lets fix that now. Go to the dashboard in the  Admin backend - Select Plugins in the Left main Menu.
At the top of the Plugins page select Add new.
In the Search just type in "Contact". You should see Contact Form 7 as the first option. Click Install, then Activate.

Plugin CF-7

Contact Form -7 at the time of writing this tutorial is the most downloaded plugin in the whole plugin directory.

It's solid, simple and powerful. It also has a number of other plugins written to compliment and extend its functionality.

One such sister plugin called Flamingo is also written by Takayuki Miyoshi.

Flamingo is a message storage plugin originally created for Contact Form 7, which by itself doesn’t store copies of submitted messages - it only forwards them to your external email.

Search for Flamingo, install and Activate also.

CF-7 installed

Go to the Dashboard and you will see we have both Flamingo and Contact now in the side menu.
Click on Contact. You then see the screen above.
You already have the default "Contact form 1" created for you.
You can add as many forms as you like, each with variations and modifications to suit your needs. The default form 1 has the basic fields you would expect for people to fill in. It has also used your information from the WordPress settings to route the mail to your external e-mail address.

Lets take a look how the form works, then we will install it on the Contacts page. Hover on the title Contact form 1. Your options appear to edit or Duplicate. Click edit.

Form1

Don't worry it's not as scary as it looks. The code you see in the main editing box is generated by the plugin.

The first thing to notice is the  ShortCode text in the blue background towards the top of the window.
Shortly, we will put that shortcode (including the square brackets )on our Contact Page.

In fact, we can paste that code almost anywhere on our site and it will publish this contact form in that location.
That is how shortcode works. Pretty nifty trick.
As an added bonus, that piece of short code always drags in this form. So if we modify the form, creating additional fields, they will immediately appear anywhere we pasted the original shortcode. Remember every additional Contact form we create , will have its own unique shortcode.

Now back to the form editor in the plugin.
Notice there is a blue text "Editing form Template" link on this page that will take you to the  plugin Author's page. I won't attempt to rewrite what the Author of the plugin has already done so well. I suggest you take a quick peek just to know its there then lets move on.  Just suffice to say that placing the cursor in the form at the desired insertion point then clicking each of the named buttons in the editor will add the required code into the form at that point.

We are currently on the form tab, now lets click on the second tab Mail.

Mail-1

This tab shows the information the contact form uses to transport the message to you - your email box. As previously mentioned the necessary details were automatically retrieved from your wordpress setting for your site. It picks your details as the site administrator. No need to change anything here.

The next Tab  "Messages" shows the automated messages displayed to people using the Contact form on your site. Nothing you need to change here.

The last tab "Additional Settings" allows for further customization which is fully described in the Authors tutorial. But for now there is nothing you really need to do here. The default form will perform perfectly without any changes whatsoever.

If you decide modify your contact form, I recommend using the duplicate option to make a new form. Give the duplicate a new name,  maybe "Contact Form-".  Make the changes or customization you need. This new form will have its own unique Shortcode generated when you save it. You can then insert the new code on the page you want it to appear on.

In fact lets do that now as there is an important concern we need to address.

Spam Filtering with Akismet

Today, spammers target everything. Your contact form is no exception. Contact Form 7 provides several ways to prevent spam, and cooperation with the Akismet spam filtering plugin is an important part of the prevention strategy. Lets implement Akismet on your contact form.

We already installed and activated the Akismet plugin in the previous session .

Go out of the Contact form -1 (if you are still in it).

We still only have the one Contact Form in our list. Now hover on its title in the list of forms and click Duplicate to make a copy.

Name this particular copy "Contact Form - Akismet"

Inside  the Form tab, drag your mouse over all the content currently in the edit box and press delete. Make sure everything is deleted including all special characters.

Next, copy (everything including the starting < and the ending ]) and paste the code below into the empty form.

<label> Your Name (required)
[text* your-name akismet:author] </label>

<label> Your Email (required)
[email* your-email akismet:author_email] </label>

<label> Subject
[text your-subject] </label>

<label> Your Message
[textarea your-message] </label>

[submit "Send"]

Now save the form to accept the changes. Job done. We have a new secure version of the Contact form. It also has its own unique Shortcode for placing in our Contact page, which is our final task.
Contact Form 7 will send Akismet all of the sender’s input and the information relating to the submitting activity. Akismet will then  use its Algorithms to judge whether this submission is likely to be spam.
If Akismet judges the submission as spam, Contact Form 7 cancels the sending of mails and shows a message that says, “it failed to send the message.” The sender will then see an orange border around the response message when it has been judged as spam. They don't actually see the word SPAM as in the graphic below. Most spam is not sent by humans,  but by 'robot programs" They may try again later as the message says, but will get the same result.

response sample

Finally, to make sure it works, you can test it by sending “viagra-test-123” as name of the sender. This test case will always be judged as spam.

But first we need the Contact form running on our site. Copy the shortcode for tour new Contact Form-Akismet. The shortcode for each form is shown in the list of forms.

Now Go to Pages - open the Contact Page.

Clear all  the text message telling us we "need to instal a contact form plugin"

Now paste in the shortcode for out contact form.

Click Update.

Now click on View page showing in the top left.

You now have a contact form working on your site. Send yourself a message, you should receive the message in your relevant mailbox.

Then as mentioned earlier try a message using “viagra-test-123” as name of the sender. This test case will always be judged as spam.

(If you run into problems, send me a message here)

 

Take a break

WordPress Contact Form 1

 

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top