Create a Contact form like the demo site

As it is common for all sites to have a contact page, each site will probably do something different than another person. However, if you want to make a contact page like the demo site of Seasonal Pro, this tutorial will guide you through the process. 

Contact Demo

At Least a Couple of Methods

Generally contact forms are done by using form plugins. The one I used on the live demo site is using the built-in “Contact” form that is part of the “Jetpack” plugin. It makes it extremely easy to setup a contact form within a minute or two, so this might be your solution if you are using, or planning to use Jetpack. This tutorial will provide you the method of Jetpack first, followed by an alternative plugin called “Contact Form 7” which is a very popular one. You also have many more very popular plugins that you can choose from if you have one that you prefer. Some are also dedicated solely to the contact form only.

Jetpack Contact – If you need to get Jetpack

  1. Go to Plugins >> Add New
  2. In the search field, type in Jetpack
  3. Click install and activate the plugin.
  4. How you set up your Jetpack will be up to you because it has a TON of built-in modules (like mini plugins rolled into one big package). I strongly recommend you refer to their documentation.

Activate the Contact Module in Jetpack

  1. Go to Jetpack >> Settings
  2. Find the Contact Form module and hover over the row the name exists on and you should see an “Activate” text link show up….activate it.

Create Your Contact Page

  1. Go to Pages >> Add New
  2. Title your page how you want it, for example: Contact Us
  3. Add some content in your editor if you would like to provide some added information.
  4. Add a new line below your content and then look on the editor for a button that is labeled “Add Contact Form” and click on it
    add contact form
  5. A popup window will show which lets you add your form attributes. Follow the information in the window to help you decide if you want to remove or add new fields.
    contact form create
  6. Switch to the “Email Notifications” tab and fill out your email and a subject title (optional)
    contact email settings
  7. Go back to the “Form Builder” tab and when all done, click “Add This form to my post