This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

🔊 Web Growth Summit is here! Learn from industry experts on July 17-18, 2024. REGISTER NOW→

Complete Guide to Installing, Configuring, and Optimizing Contact Form 7 in WordPress

Updated on November 9, 2023

14 Min Read

Having trouble figuring out the best way for your website visitors to contact you on your WordPress site?

Well, the answer is a contact form.

But crafting one from scratch can be a bit of a headache.

WordPress Contact Form 7 plugin might just be the solution you’ve been looking for. As one of the most user-friendly tools available in the WordPress toolkit, it’s designed to bridge the communication gap between you and your visitors effortlessly.

In this blog, I’ll guide you through the process of installing and configuring WordPress Contact Form 7, including creating a contact form, styling it, and ensuring its security.

Let’s get started!

What Is WordPress Contact Form 7?

Contact Form 7 stands out as a free WordPress plugin, offering you the capability to generate diverse contact forms for your website. It allows users to effortlessly create and manage multiple contact forms and customize them with simple markup as per their liking.

What’s even better is that this plugin doesn’t cost a dime, and it simplifies the process of adding your contact forms to any post, page, or widget area by providing custom shortcodes for each form you create.

Contact form 7 stands out due to its simplicity among all contact form plugins.

Key Features of WordPress Contact Form 7:

  • Multiple Contact Forms
  • Customizable Forms
  • Ajax-Powered Contact Form 7 Submissions
  • CAPTCHA Integration
  • Akismet Anti-Spam
  • Form Tag Syntax
  • Customizable Mail Template
  • File Upload Support
  • Localized Translations

Why Should We Use WordPress Contact Form 7?

A contact form provides a clear, convenient, and organized way for your visitors to connect with you while keeping your communication safe and professional.

Contact Form 7 does a tremendous job of giving WordPress website owners the flexibility to create the contact form effortlessly.

Here are a few reasons why you should choose contact form 7:

Why Choose Contact Form 7:

1. Cost-Free: No premium version means no distracting upsells in the main dashboard, providing a clutter-free experience.

2. Customizable: Easily adjust your forms by using available parameters or applying CSS for a personalized touch.

3. Theme Compatibility: Enjoy broad compatibility with both free and premium themes, ensuring your contact forms remain functional even if you change your website’s theme.

Seamlessly Integrate Contact Form 7 with Cloudways WordPress Hosting

Leverage our optimized stack, multiple cloud provider options, SSH, SFTP access, and Git integration for powerful performance and control.

The Pros and Cons of Having a Contact Form

Having a contact form can have its pros and cons. I will describe them below:

Pros Cons
Shield your email from spam It may seem less personal than direct emails
Imparts professionalism Possible technical issues or malfunctions
Structured messages for easier handling Missed opportunities or communications
Reduced junk messages
Focus on genuine interactions

How to Install WordPress Contact Form 7?

To install Contact Form 7, you need to follow these steps:

  • Go to your WordPress Dashboard
  • Select Plugins > Add New
  • Search for Contact Form 7
  • Install and Activate the plugin

WordPress Contact Form 7

  • Once installed, you can see the “Contact” menu on your dashboard.

 "Contact" menu

Upgrade to Managed WordPress Hosting on Cloudways

Take your Contact Form 7 to the next level with managed hosting on Cloudways. Benefit from automatic updates, MariaDB integration, PHP version control, and efficient WordPress cloning for a hassle-free and secure solution.

Exploring the Features of WordPress Contact Form 7 Configurations

Contact Form 7 is a powerhouse when it comes to WordPress form plugins, offering users a rich array of settings to fine-tune their contact forms. At the heart of its configurations, you have the ability to design custom forms and integrate various form tags like text, email, URL, and more.

When you install the contact form 7, you get a dummy form. You can access this by following these steps:

  • Go to your WordPress Dashboard
  • Select Contact > Contact Forms

 Features of WordPress Contact Form 7

Now, I will describe each setting separately:

  • Form: The Form tab has a built-in template that you can use. You also can edit the template as per your needs.
  • Mail: It allows you to decide the flow of email notifications once the form is submitted, ensuring you never miss a message.
  • Messages: It lets you tailor the auto-responses and validation messages your visitors receive.
  • Additional Settings: With its advanced settings, you can combat spam using the ‘Quiz’ feature or even integrate CAPTCHA for added security.

How to Create a WordPress Contact Form?

Now that you have explored the features of WordPress Contact Form, I will tell you how you can create your customized Contact Form. To do that:

  • Go to the Contact tab on your WordPress dashboard and click “Add New”.
  • Name your contact form. I am going to name mine “Cloudways Contact Form”.

Cloudways Contact Form

  • Once done, click save.

save the form

  • Before starting the customization process, I will first explain the different form tags you’d find in Contact Form 7.

Contact Form 7’s form tags are integral to how the plugin functions. These form tags act as shortcodes, and when placed in the form editor, they generate specific form elements for your contact form.

Users can choose their preferred form field type, configure it, and effortlessly insert the generated form tag into their form.

Here is a brief explanation of each form tag:

Form Field Type Description
Text Fields Generates a basic text input field.
Email Fields Creates an input field specifically for email addresses, including validation for proper email format.
URL Fields An input field designed for website URLs.
Telephone Number Fields An input for phone numbers.
Number Creates a form tag for a number.
Date Fields Provides an input field with a date picker.
Textarea Generates a larger text field suitable for longer messages or comments.
Drop-down Menu Creates a dropdown list for user selection.
Checkboxes Provides checkboxes for multiple selections.
Radio Buttons Generates radio buttons for single-choice selection.
Acceptance Typically used for agreeing to terms and conditions, it’s a checkbox that users must check to proceed.
Quiz Field Useful for basic spam prevention; users answer a quiz.
reCAPTCHA An advanced form tag that enhances spam prevention. Integrates Contact Form 7 with reCAPTCHA to deter spam bots.
File Upload Field Allows users to attach and upload files.
Submit Button Adds a submission button to your form.

Now that we’ve looked at the different form tags, I will show you how to actually use these tags. For the purpose of this blog, I will be demonstrating the text form tag usage. All other form tags will be used similarly.

Using the Text Form Tag

The text form tag in Contact Form 7 creates a single-line text input field in your form. This form tag is ideal when you need users to provide concise text, such as their name or a subject.

  • To use this, click on Text, and the pop-up will appear.

Using the Text Form Tag

Here are the fields you’d find in the text form tag in Contact Form 7:

  • Field Type: Checkmark this option if a field in your form is a required field.
  • Name: This is a unique identifier for the form field. This name is used to capture and subsequently process the data. For example, in [text your-name], “your-name” is the identifier.
  • Default Value (Optional): When the form loads, you can set a default value that will appear in the text field. This is done using the default option followed by the desired value. For example:
  • [text your-name default: “Liza Rajput”]
  • Akismet: Akismet compares comments and form submissions on a website against its vast global spam database. It uses this information to determine whether a comment or submission looks like spam.
  • ID and Class Attributes (Optional): You can assign ID and class attributes to the text field for more advanced customization, especially when dealing with CSS styling or JavaScript interaction. This is done using the id and class options, respectively.

I have filled these values, as shown in the screenshot below. After filling in the fields, I can see a short code generated.

insert short code

  • Now click on insert tag. This will add the form tag to the contact form template.

form tag to the contact form

  • And once I publish this, here is the result.

publish

Customize WordPress Contact Form 7

Just like we added the text form tag, I will use the combinations of these form tags and generate my customized Cloudways contact form. So, let’s begin.

As I have already created a Cloudways Contact Form, I will now edit it to give it a personalized look.

Here are a few features that I want in my form:

  • Name
  • Email
  • Subject
  • Message
  • A checkbox
  • A submit button

I will use the form tags just like I showed you earlier:

  • Firstly, I will go to Contact > Contact Form
  • Then select the Cloudways Contact Form > Edit

Cloudways Contact Form > Edit

  • I will use the text, email, checkbox, and submit form tag and will click ‘insert tag’
  • The final form text will look like this

The final form text

  • After using all these tags, I will simply click save.
  • Then, you will see a short code generated. Copy the text.

short code

  • Now go to the page where you want your contact form to appear. I want it on a sample page.
  • On your WordPress Dashboard > select Pages > All Pages
  • Click on Sample page > Edit
  • Click on the ‘+’ icon and select Short Code

Sample page

  • Now paste the shortcode that you copied

paste the shortcode

  • Click on publish.
  • Your contact form with your customized details is ready.

contact form

How to Structure a Contact Form With Form Tags?

Sometimes, you don’t like the placement of tags within the contact form. That’s where you would want to restructure your form. It is very simple.

You need to insert the tags in the order you want them. Below I’ll share two examples with you to make it easier for you to understand.

Example 1:

I want the form labels to appear in the following format:

  • Name
  • Email
  • Checkbox
  • Subject
  • Message
  • Submit button

To achieve this, I will place the form tags in the same order.

place the form tags

  • For the above code, this is the result

contact form

Example 2:

Now, for your understanding, I will move the male/female check boxes below the message. To achieve that, I’ll just place the check box tag below the message tag.

tag customization

  • Here’s the result.

result

How to Configure Mail Settings in Contact Form 7

We have explored the form tab, and now the second tab in line is the mail tab. This tab enables you to configure mail settings. This helps you receive the submissions from your contact forms in your desired email inbox.

I will describe each field with its purpose below:

To Field:

To Field” refers to the email address where the form submissions will be directed. Usually, this is your email address or another appropriate inbox within your organization where you wish to receive the submitted form data.

From Field:

This denotes who the email will appear from. It’s good practice to use the email associated with your domain to avoid the emails being marked as spam. You can also dynamically fetch the email input from the form using tags like [your-email].

Subject Field:

Define the subject of the email you’ll receive. To make sorting easier, you can use a clear subject line like “New Submission from [your-name],” where [your-name] dynamically fetches the user’s input for their name.

Additional Headers:

Here, you can add additional mail headers if needed. A common usage is “Reply-To: [your-email],” which makes it easier for you to directly reply to the email address that the user has provided.

Message Body:

This is the main content of the email you’ll receive. By default, Contact Form 7 provides a simple template that includes all the form fields. However, you can customize this however you want.

Use Mail (2):

This is an additional mail template. It can be useful if you want to send a different or additional email, like a confirmation message to the user or a notification to another team member.

File Attachments:

If you have a file upload field in your form and you wish to receive the uploaded files as email attachments, you can specify that here by adding the relevant form tag, e.g., [your-file].

Save Changes:

After configuring your desired mail settings, remember to click “Save” to ensure all your settings are stored.

 Mail Settings in Contact Form 7

What Are Contact Form 7 Mail Delivery Issues and How to Fix Them?

Sometimes, you encounter difficulties in mail delivery while using the contact form. I will describe some of the common mail delivery issues that people face with mail delivery, along with their fixes.

1. Emails Landing in Spam

Sometimes, emails sent via Contact Form 7 might end up in the spam folder.

Solution

  • Check your spam/junk folder regularly.
  • Use a plugin like WP Mail SMTP to route emails through established email providers.

2. Not Receiving Emails:

You might not receive emails at all, even though users are submitting the forms.

Solution

  • Ensure the “To” field in the mail settings of your form matches an email from your domain (e.g., [email protected]).
  • Consider switching to SMTP (Simple Mail Transfer Protocol) to send emails. SMTP plugins like WP Mail SMTP or Easy WP SMTP can help.

3. Sending Failures

Users might see a failure message after submitting the form.

Solution:

  • Double-check your email settings in the form’s “Mail” tab.
  • Ensure your web host supports the mail() function (used to send emails). Some shared hosts might have restrictions.

4. Incorrect Configuration

If the form is incorrectly configured, it might not send emails.

Solution:

  • Ensure all fields in the “Mail” tab of your form are correctly filled out.
  • Avoid using generic emails (like gmail.com) in the “From” field. Use an email from your domain instead.

5. Server-Side Issues

Web hosting configurations or server issues can block emails.

Solution:

  • Reach out to your hosting provider to ensure they aren’t blocking outgoing emails.
  • Ask if there are specific SMTP settings they recommend.

Using Contact Form 7 Form Submission Messages

Contact Form 7 provides users with feedback messages after they submit a form. These messages can inform users about whether the form submission was successful or if there were errors.

Here are the default messages that Contact Form 7 has:

 default messages

How to Style Your Contact Form WordPress Using Custom CSS?

Once you have created and structured your form, you must style it. My current form looks rough, so I will align it and make the submit button prominent.

There are various ways to do it. I will use custom CSS to do it.

  • Navigate to Appearance > Customize > Additional CSS.
  • Insert the following code:
/* Style the entire form container */
.wpcf7 {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}

/* Style text input fields */
.wpcf7-text {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Style the submit button */
.wpcf7-submit {
    background-color: #333;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Change the submit button color on hover */
.wpcf7-submit:hover {
    background-color: #555;
}
  • Click the publish button, and here are the results.

 results.

Why Style Your Contact Form 7 Forms?

Having a contact form isn’t enough. You need to style it, too, due to aesthetic reasons. A visually appealing contact form adds to the user experience and persuades users to utilize it. A well-styled form engages users and appears more professional, building trust with the visitors.

Furthermore, a thoughtfully designed form can enhance usability and accessibility, making it easier for users to interact with and submit their information.

Also, you don’t have to insert the contact form randomly. It must align with the brand’s design to maintain the consistency of your website.

How to Secure Your Contact Form?

Secure your Contact Form with reCAPTCHA?

After setting up and styling your contact form, the next step is to secure the form.

The Contact Form 7 plugin has a captcha feature included. Please follow the steps below to add reCAPTCHA to your website:

To get started with reCAPTCHA, you need to have a Google account and register your site for API keys:

reCapture admin panel

  • Register your website: enter your Domain name and Label. Click the Submit button

Register your website

  • Once you do that, you will get a site key and a secret key.

get a site key and a secret key.

  • Copy the keys.
  • Log in to your WordPress admin panel.
  • Navigate to the Contact → Integration page. Find the reCAPTCHA section.

Contact → Integration

  • Enter your site key and secret key into the fields you see:

Enter your site key and secret key

  • Click on save changes.
  • Open your contact form under the Contact → Contact Forms section in your dashboard and add the shortcode below to the contact form field: [recaptcha]

add the shortcode

  • Click Save and refresh your site to see the changes.

see the changes

Secure Your Contact Form With Cloudflare (Optional)

You can also secure your contact form using Cloudflare. For that, your application must be integrated with Cloudflare.

If your app is hosted on Cloudways, you can easily enable Cloudflare on your application. Read this guide on “Configuring Cloudflare on your website” if you’re a Cloudways customer.

Supercharge Security with Cloudflare Enterprise

Enhance Contact Form 7 security and performance. Activate Cloudways’ Cloudflare Enterprise add-on with features like DDoS protection, CDN with 100GB storage, Edge Page Caching, and much more for advanced protection and speed.

If you’re not a Cloudways customer and want to set up Cloudflare CDN on WordPress manually, check out our guide on Cloudflare WordPress CDN.

Now, to use Cloudflare to secure your contact form, you need to set up a special page rule on Cloudflare.

  • On the Cloudflare website, click on the page rules panel.

page rules panel

  • You will be redirected to the following page:

page rules

  • In the ‘if the URL matches’ tab, write your domain name and the page. The address should be in this format: “domain.com/your-contact-page”.
  • Toggle on the Browser Integrity Check button.
  • Set the security level to High.
  • Click on Save and Deploy.

This will secure your contact form.

Summary

And that concludes this guide! We’ve walked through everything, from setting up Contact Form 7 on your WordPress site to adding your personal touch with custom designs and bolstering its security against spam.

If you have any more questions or need further information, don’t hesitate to reach out.

Frequently Asked Questions

Q. Can I Install Contact Form 7 on Any WordPress Theme?

Yes, Contact Form 7 is designed to be compatible with any WordPress theme. However, the appearance of the form may vary depending on the theme’s styling, and additional CSS might be needed to match the form’s style with your theme.

Q. Does Contact Form 7 Support Multiple Languages?

Yes, Contact Form 7 is translation-ready and supports multiple languages. Plugins like WPML or Polylang can create forms in different languages.

Q. How Can I Prevent Spam Submissions Through Contact Form 7?

You can integrate anti-spam plugins like Akismet or add CAPTCHA fields to your forms to prevent spam. Contact Form 7 also provides built-in features like Honeypot to help combat spam.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Sarim Javaid

Sarim Javaid is a Digital Content Producer at Cloudways. He has a habit of penning down his random thoughts and giving words and meaning to the clutter of ideas colliding inside his mind. His obsession with Google and his curious mind add to his research-based writing. Other than that, he's a music and art admirer and an overly-excited person.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now