If you’re looking to add a simple contact form to your WordPress site, the Contact Form 7 plugin is one of the best tools to get started. Whether you need a basic form to gather emails or something more customized like a restaurant reservation form, Contact Form 7 makes it easy.

In this article, you’ll learn how to install and configure Contact Form 7, helping you build forms that fit your website’s needs perfectly.

How to Install Contact Form 7 Plugin

You can install the plugin either by manually download it from WordPress repository or search it in the Plugins option in your site’s WP dashboard. We’ll be using the second method.

In your WordPress dashboard, navigate to the “Plugins” section, and click “Add New”. Search for Contact Form 7, install it, and activate it.

Install Contact Form 7 plugin

After the activation, you’ll see the new Contact option in your site’s dashboard.

How to Create a WordPress Contact Form

Now let’s start creating the contact form. In the end it will look like the one below.

contact form 7 final

Contact Form 7 comes with a default form configuration. Go to Contact area and you can click on the default contact form to edit it. Or, you can click Add New at the top to create a new one.

add new contact form

By default the form comes with the following fields Name, Email, Subject, Message. We’ll keep those and add 2 more: a phone field and a selection field where the user can select which department the message is addressed to. Of course you can add / remove other fields depending on what kind of contact form you want to achieve.

To add a phone field, click the tel tag.

add phone field to contact form

A pop-up box will appear and you can start configure the phone field. Here we checked the Field Type as a required field ( this is illustrated with the * symbol next to tel* tag ) and select a Default Value for the placeholder field. Of course you can add an id or class css attribute to the field if you can to style it later. Click the Insert Tag button.

configure phone field

Optionally for the tel tag you can add a min – max length values depending on the phone number on your country. For example you can limit the tel field to have between 10 to 12 digits.

[tel* your-phone minlength:10 maxlength:12 placeholder "Phone*"]

To add a drop down selection field, click on the drop-down menu tag.

add drop-down field

A pop-up box will appear and you can start configure the drop-down field. It’s the same idea like in the tel tag. After you add your options, click the Insert Tag button.

configure drop-down field

Here’s the all contact form code that you can copy / paste in the Form option:

<p>[text* your-name placeholder "Name*"] </p>

<p>[email* your-email placeholder "Email*"] </p>

<p>[tel* your-tel placeholder "Phone*"]</p>

<p>[text* your-subject placeholder "Subject*"]</p>

<label>Select a department<label>
<p>[select your-department include_blank "General" "Sales" "Marketing"]</p>

<p>[textarea* your-message x4 placeholder "Message*"] </p>

[submit "Send Message"]

We’ll have two more steps but for now let’s save the form.

How to Configure Mail Settings in Contact Form 7

In the “Mail” tab of the Contact Form 7 plugin, you can configure how form submission notifications are sent to your email.

mail tab configuration

This is an important step because if you don’t add your receiving email, you won’t get any message that is submitted via the contact form. Here’s a breakdown of the main fields and their purpose:

  1. To: This field specifies the recipient’s email address. By default, it’s set to the email associated with your WordPress account, but you can change it to any valid email address where you’d like to receive form submissions. You can add multiple email addresses separated by comma.
  2. From: The sender’s email address. You should format it as Your Name <[[email protected]]>. Make sure the domain matches your website’s domain to avoid delivery issues, as some hosts block outgoing emails from unauthorized domains.
  3. Subject: This field sets the subject of the notification email. The default subject line is typically your site’s name followed by [your-subject]. You can customize this to something more specific, such as “New Contact Form Submission from [your-name].”
  4. Additional Headers: Here, you can add email headers like Reply-To, CC, or BCC. By default, the plugin sets the Reply-To header to the email provided in the form, which makes it easy to respond directly to the person who submitted the form.
  5. Message Body: This field contains the main content of the notification email. You can customize it by using mail tags that you created in the Form like [your-name], [your-email], [your-message], [your-tel], [your-department] to include the form data. It’s essential to structure this field in a way that’s easy to read.
  6. File Attachments: If your form includes file upload fields, you can reference them here by adding the corresponding mail tags (e.g., [your-file]). Ensure that file sizes don’t exceed the email system’s limit (usually 25MB).

These settings ensure that you receive the necessary details from your form submissions and can respond effectively. It’s important to test the form after configuring these settings to ensure everything works as expected.

Style the Contact Form 7

This is an optional step, but we recommend to do it to match your site colors and style. By default the form fields and submit button will have the default browser style.

default style contact form 7

To change them go to Appearance > Customize > Additional CSS and add the following css styles. Modify them as you want.

This css is for the form fields:

.wpcf7-text, .wpcf7-textarea, select {
  width: 100%;
  padding: 16px;
  border: 2px solid #f2f2f2;
  background: none;
  margin-bottom: 8px;
}

The css below is for the button:

.wpcf7-submit{
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  color: #1b253f;
  border: 2px solid #1b253f;
  padding: 8px 24px;
  background: none;
  cursor: pointer;
  border-radius: 99em;
}

Publish the Contact Form 7 to WordPress Page

Last step is to insert the created contact form into your page or post. You can do that either by the dedicated contact form 7 block or by using the form shortcode.

Open your page, click the “+” sign, and search for contact form 7. Insert the block and select your form. For the shortcode, copy the shortcode from the Contact > Contact Forms option. In the page search for the shortcode block and paste there the contact form shortcode. Check the image below for both options.

publish contact form

Optionally Implement reCAPTCHA for spam protection

Spam is a common issue for websites with contact forms, and adding reCAPTCHA to Contact Form 7 is a simple way to keep bots from flooding your inbox with junk submissions. Implementing reCAPTCHA in your form adds an extra layer of security, making sure real users are filling out the form, not automated scripts.

To start, you’ll need to register your website with Google reCAPTCHA. Head over to the reCAPTCHA admin page and log in with your Google account. From there, select reCAPTCHA v3.

Once registered, Google will give you a site key and secret key. These are unique to your website. Go to the Contact Form 7 settings in your WordPress dashboard, find the Integration tab, and paste both keys into the appropriate fields. This will link reCAPTCHA with your forms.

Finally, it’s a good idea to test your form after enabling reCAPTCHA to make sure it’s working smoothly.

Summary on How to Use Contact Form 7

Setting up Contact Form 7 on your WordPress site is a straightforward process that brings powerful functionality to your contact forms. From installation to configuring email settings, you now have the tools to create customized forms that suit your specific needs. Adding features like reCAPTCHA helps protect your site from unwanted spam, ensuring that only real visitors can submit messages.