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.
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):
Once you have installed and activated the plugin, head to the Jetpack dashboard and enable the Contact Form setting via the “Writing” Menu:
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.
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)
- 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.
Moving, Editing and Removing Form Fields
Hovering over any form field will reveal the “move” and edit” 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:
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
The default field type is “text” and you can select from the following fields:
- Checkbox with Multiple Items
- Drop down
You can see what each of these look like below:
Before we add our form to our content, let’s take a look at the “Email notifications” tab.
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:
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
In the next post, we’ll go through how to style the default elements of the Jetpack Contact Form.