Create a contact form to enable feedback from website visitors

Add a contact form to your WordPress blog or website to let visitors send you messages using Jetpack plugin

A Contact form on your blog or website enables visitors to easily contact you without you giving up your email address. It is also convenient for visitors too. But you must protect from spam.

There are many ways to add a contact form and you can see this site’s form at rawinfopages.co.uk/contact/

How to create a contact form for your blog. Get more feedback from your site visitors by making it easy for them to contact you

You can put a link to your contact form on a menu, in the sidebar, in the footer, and so on. I put a small link in the footer of every page in the Contact section, but it could be more prominent if you prefer.

A contact form can be placed on any number of pages and they can all be the same or all different. It is up to you how you use them. However, there can be only one per page.

There are many ways to insert contact forms in WordPress web pages and plugins like JetpackContact Form 7 and Contact Form by WPForms are very popular indeed.

First I will look at Jetpack and then Contact Form 7. Jump to Contact Form 7

Add a Contact form with Jetpack

Jetpack, which has 4+ million active installations, is a comprehensive collection of tools that perform many functions and one of these is forms. Some WordPress sites come with Jetpack already installed, but it can easily be added if you do not have it. (People have a love/hate relationship with this plugin so read the Jetpack pros and cons and use Contact Form 7, see below) if you prefer an alternative.)

Install and enable Jetpack Contact Form

  1. Click Plugins in the WordPress sidebar
  2. Click the Add New button
  3. Enter ‘jetpack‘ into the sidebar
  4. Click the Install Now button next to Jetpack
  5. Click the Activate button when installation finishes

The Contact Form module is enabled by default, but if you don’t see it in the post editor toolbar, go to:

www.your-site.com/wp-admin/admin.php?page=jetpack_modules

The Contact Form module can be enabled here:

Enable or disable Jetpack modules

 

Add a contact form with Jetpack

A form can be inserted on any post or page, but I would recommend creating a page called Contact, which can then be put on a menu or linked to.

Enter any introductory text you want at the top of the page, such as ‘Please fill in this form if you want to contact me‘ and then on a blank line, click the Add Contact Form button in the toolbar. A default form is inserted automatically.

Add a Jetpack contact form to WordPress

 

Customise the form

There are two problems with the default form and one is that it has a box for people to enter their website URL. This is not needed, in fact, some visitors may not even have a website.

Click somewhere in the form and it is highlighted. At the top is a pencil and a cross icon. Click the pencil to edit the form.

Edit a Jetpack contact form

 

Click the cross on the right site of the Website section to remove it.

Jetpack contact form

Click Update Form at the bottom and then publish the page.

This form may be all you need and you can publish the page and let visitors use it. If someone fills in the form and sends a message to you, where does it go?

There is a Feedback menu in the WordPress admin sidebar and submitted forms appear there. You can read them or deleted them. and it is very similar to the Comments admin section. You also receive contact form feedback by email too. Messages are sent to the email registered as the site admin in Settings > General, which is probably you.

Stop contact form spam

There is absolutely nothing to stop people sending you spam by filling in this form. However, the main aim of a spammer is to put their junk in front of as many people’s eyballs as possible. A contact form is only seen by you, so this is a bad deal for spammers.

Even if the contact form is easy to find on your site, you tend not to get much spam through it. If you find that spam does come through the contact form, there are ways to make it harder for spammers.

Most spam is automated and programs, bots, go from site to site adding spam comments. These bots are semi-intelligent and can fill in forms like the comments form on posts and the contact form.

However, you can often fool them by adding a simple question with a required answer.

Add a form field

Return to the contact form and click Add Field at the bottom.

Add a field to a Jetpack contact form

 

Enter some text into the Field Label box

Set the field type to Checkbox

Tick the Required box to make it compulsory

Customise a field in the Jetpack comment form

 

Click the Update Form button, publish the page and here is what it looks like:

A checkbox in a Jetpack comment form

If a spam bot is not clever enough to tick the box, the form will not be submitted because a response is required.

Does it work? I started to get a few spam contact form submissions, so I added this checkbox. It is too early to say whether it is working, but I haven’t had any spam yet, so maybe it is!

Build your own custom Jetpack forms

Forms can be placed anywhere and for any purpose. Just add them when you need to collect information from visitors or when you need to get a response from them. You now know how to:

  • Add a form
  • Remove fields
  • Add new fields
  • Make fields required

One of the nice features of the contact form in Jetpack is that if you use the Akismet spam filtering plugin on your site, the contact form is sent to Akismet and spam is automatically discarded.

Information submitted using a contact form is not private or secure, so it cannot be used for collecting credit cards and other private information.

Add a contact form with Contact Form 7

Contact Form 7 is more powerful and flexible than Jetpack forms and you can do a lot more with it.  It has extensions and add-ons that add features and functions, which is useful, and the plugin has over 1m users so it is very popular. It is a bit more difficult to use than Jetpack, but you get used to it and after making your first Contact form, you can try making other forms.

Install and enable Contact Form 7

  1. Click Plugins in the WordPress sidebar
  2. Click the Add New button
  3. Enter ‘contact‘ into the sidebar
  4. Click the Install Now button next to Contact Form 7
  5. Click the Activate button when installation finishes

Install Contact Form 7 in WordPress

View and edit the Contact form

The plugin comes with a contact form that is ready to use. To see it, select Contact in the sidebar, mouse over Contact Form 1 and click Edit (clicking a form’s name opens it in the editor, too).

Contact Form 7 forms in WordPress

The form itself is in code, but it is not too complicated and it is a bit like HTML with start and end tags enclosing text.

A form in Contact Form 7 in WordPress

If this looks confusing, wait until you see it on the page because it makes more sense. You can change the text following <label> but the default is fine.

Stop Contact Form 7 spam

Spammers and bots fill in contact forms with junk, adverts, bad links and more, and they must be stopped. There are several ways to prevent abuse of the contact form and I have had good success with a simple question asking if the user is human.

Click the blank line before the last one with submit on and click the acceptance button in the toolbar.

Add an extra field to a Contact Form 7 form in WordPress

The name is filled in automatically (do not copy mine), but you can enter any text you want in the Condition box.

The Acceptance Checkbox is useful for making sure people accept terms and conditions or have read your privacy policy and so on. Here we just want to check that people are human and not bots.

Clear the checkbox, Make this checkbox optional – we want to make it compulsory. Click Insert Tag.

Contact Form 7 code in WordPress

This is what the form looks like. Save it with the button at the bottom of the page.

Configure Contact Form 7 email settings

Select the Mail tab and you might find the settings OK, but you might need to tweak them. When someone fills in the contact form and clicks the Send button, it is sent to you as an email. Make sure the To box has the email address that is to receive contact forms. The other boxes are fairly obvious.

Configure the email settings with Contact Form 7 in WordPress

Save it and now you are ready to create a Contact page.

Build the Contact page

Select Contact in the sidebar and copy the shortcode for the form you created.

Contact Form 7 shortcode in WordPress

Go to Pages and create a new page called Contact. It can be called anything, but it makes sense to call it Contact.

A contact form page in WordPress

Here you can see the shortcode that was copied and pasted. It is optional, but useful to add some text and/or images above the form just to say what it is form. Save it and take a look.

A contact form page in WordPress

How the Contact page looks depends on the theme you, so the colours, styles and sidebar will be different on your site. The contact form will look more or less like the one above.

Notice the Confirm that you are human checkbox at the bottom. The Send button will only work if the checkbox is ticked. (You can add another saying ‘I accept your terms and conditions’ or something similar.)

Check the Contact Form

Try filling in the form and sending a message. Check your email to see if it arrived. It works fine on both my WordPress websites but some people have found that their web hosting company has not enabled email or has not configured it correctly and contact form emails never arrive.

If you do not receive emails, double check the Email tab in Contact Form 7 editor. If you are sure it is correct, get a plugin called WP Mail SMTP. It lets you use a third party email service with your website that ensures emails are delivered. You might need to sign up for a free account at a site like SendGrid – select the Email API tab and get an API Key. Copy and paste it into WP Mail SMTP plugin settings.

 


Affiliate links

2 Comments

  1. Hi,

    I was just dropping in a quick line to know, if I could send some great article ideas your way for a guest post at your website ?

    If you like my suggested ideas, I can then provide you high-quality FREE CONTENT/ARTICLE. In return, I would expect just a favor of a backlink from within the main body of the article.

    Do let me know if I can interest you with some great topic ideas?

    Best Regards,

    Junaid Ali Qureshi

Leave a Reply

Your email address will not be published.