If you want to add a simple contact form to your WordPress site, Contact Form 7plugin is one of the easiest ways to get started. It works great for a basic “Contact Us” form, and it’s flexible enough for more specific use cases like a restaurant reservation form or a support request form.
In this guide, you’ll learn how to install Contact Form 7, create a form, configure email delivery in the Mail tab, publish the form on a page, and optionally add reCAPTCHA for spam protection.
How to Install Contact Form 7 Plugin
You can install the plugin either by manually downloading it from the WordPress repository or by searching for it inside your WordPress dashboard. We’ll use the dashboard method.
In your WordPress dashboard, go to Plugins → Add New, search for Contact Form 7, then click Install Now and Activate.
After activation, you’ll see a new Contact menu item in your dashboard. If your forms don’t send emails reliably, consider using an SMTP plugin (some hosts block default WordPress mail).
How to Create a WordPress Contact Form
Now let’s build the form. Here’s what the finished Contact Form 7 layout looks like:
Contact Form 7 includes a default form. Go to Contact → Contact Forms and click the default form to edit it, or click Add New to create a new one.
By default, the form includes Name, Email, Subject, and Message. We’ll keep those and add two more fields: a required phone field and a selection drop-down so visitors can route the message correctly. 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.
A pop-up box will appear where you can configure the phone field. Mark it as required (that’s the tel* tag) and add a placeholder. You can also add a CSS class if you want to style it later. Click Insert Tag.
Optionally, you can set a minimum and maximum length depending on typical phone number length in your country. Example: allow between 10 and 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.
A pop-up box will appear where you can configure the drop-down field. Add your department options, then click Insert Tag.
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-phone minlength:10 maxlength:12 placeholder "Phone*"]</p>
<p>[text* your-subject placeholder "Subject*"]</p>
<p><label>Select a department</label></p>
<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.
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:
- 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.
- 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. - 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].” - Additional Headers: Here, you can add email headers like
Reply-To,CC, orBCC. By default, the plugin sets theReply-Toheader to the email provided in the form, which makes it easy to respond directly to the person who submitted the form. - 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. - 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.
How to Style 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.
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;
}How to Add Contact Form 7 to a WordPress Page (Block or Shortcode)
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.
Optional: Add reCAPTCHA v3 to Contact Form 7 (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.
For more details check How To Setup Google reCAPTCHA v3 with Contact Form 7 article.
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.
If you’re choosing between multiple form tools, see our roundup of free WordPress contact form plugins.
