How to add a Contact Form to WordPress

How to Add a Contact Form to Wordpress

A Contact Form is a useful tool when you want visitors to your website to be able to contact you without posting your e-mail address online.

There are many Plugins with many whizzy features that can be useful for creating Contact Forms and I’ll cover some of those in later posts. However, for now, here’s how to use the Jetpack Contact Form.

A Contact Form is a great way to enable your blog readers to contact you without posting your e-mail address online. Here’s how to use the WordPress Jetpack Contact Form.

How to add a Contact Form to WordPress (using the Jetpack Contact Form)

The first thing to do, if you haven’t already, is install the WordPress Jetpack Plugin.

For those of you who are unsure how to do this,  there’s a video tutorial in Lecture 3 of the WordPress Theme Customisation for Beginners course (free Preview):

Wordpress Theme Customisation

Once you have installed and activated the plugin, head to the Jetpack dashboard and enable the Contact Form setting via the “Writing” Menu:

Enable Jetpack Contact Form

This will add a new button to your WYSIWYG (What You See Is What You Get) editor, which will be visible when you are creating or editing any post or page.

Add Contact Form Button

Any information submitted via the Jetpack Contact Form will be automatically scanned for spam and if deemed legitimate, will be e-mailed to you.

The Default Form

Pressing the button will bring up the Form Builder, with the default form already configured, including the form fields:

  • Name (required)
  • Email (required)
  • Website
  • Comment (required)

The fields marked “(required)” need to be completed by your website visitor before the form will submit. Any fields without this note are optional.

Default Contact Form

Moving, Editing and Removing Form Fields

Hovering over any form field will reveal the “move” and edit” options.Form Field Options

  • Hovering over “move” will allow you to drag the fields into the desired order.
  • Click “edit” to change the label, field type and whether or not the field is required.
  • Click the “-” button to remove the field.

Pro Tip: There is no reconfirm message when you click “-” – if you click on it, the field will be removed. This means if you accidentally delete a field you will need to add it again.

Adding a Form Field

The Contact Form includes a link to “Add a new field”. Click on this link to add a new field at the bottom of your form:

Add New Form Field

From here, you can move this field within the form, change the label, mark the field as required and also select the Field type.

Form Field Types

 

Form Field Types

The default field type is “text” and you can select from the following fields:

  • Checkbox
  • Checkbox with Multiple Items
  • Drop down
  • Email
  • Name
  • Radio
  • Text
  • Textarea
  • Website.

You can see what each of these look like below:

Form Field Types Visual

Before we add our form to our content, let’s take a look at the “Email notifications” tab.

Email Notifications

Email Notifications

This is where you can specify the email address you would like the information collected using the forms to go to. If nothing is specified here, the notification will be sent to the admin email address specified in Settings > General of your WordPress dashboard.

Specify multiple email addresses by separating them with commas and each of them will receive a notification.

You can also specify a subject line for your email notifications here, which will default to the page/post title if left blank.

Add Your Form

When you’re ready, click the blue button at the bottom of the pop-up to add your new form to your post.

You’ll see a block of code that looks something like the below (dependent on fields) drop into your WordPress editor:

Contact Form Code

This code block includes the shortcodes for all the fields selected for your form.

Preview or publish your form, to see it in all its html glory:

Your Contact Form

Contact Form

In the next post, we’ll go through how to style the default elements of the Jetpack Contact Form.

Are you ready for some DIY Wordpress magic?

Easy tips & resources to help you design, build and grow your blog with some Wordpress DIY magic - join me for DIY Wordpress Tips straight to your inbox:

Written by diywptips