Contact Form 7

Posted on July 31, 2024 | Updated on July 31, 2024

Most website owners need some type of contact form to gather data on site visitors. Contact Form 7 is a WordPress plugin you can use for free or upgrade to premium for additional features. It is easy to install and use, making it easy even for beginner web designers to utilize. 

However, when people first hear of your brand, they have no reason to trust you. Some of the trust factors they look for on your website include phone numbers, secure browsing and a simple way to contact you. With that in mind, we looked at some of the contact form plugins for our Plugin of the Month feature. 

Siteefy estimates around 193.5 million active websites, with 252,000 new ones created daily. If people don’t trust you to meet their needs, they may just bounce to a competitor. It’s crucial to hit the high notes for every element on your website to convert visitors to customers. Adding a contact form is a must-have for modern sites. 

Contact Form 7 Features

contact form 7 screenshot
Source: https://wordpress.org/plugins/contact-form-7

Contact Form 7 is free, open-source software created by Takayuki Miyoshi, a WordPress developer. Remember, the multiple features that come with the free version and compatibility with things such as CAPTCHA make it stand out from other contact forms. Here are some of the best features of the WordPress plugin:

  • Variety of form boxes, including drop downs, checkboxes and paragraphs. 
  • Add CSS style to customize the form without paying extra. 
  • Integrates with Akismet and Google reCAPTCHA to slow down spam. 
  • Receive email notifications about form submissions. 
  • Allow users to upload files. 
  • Integrates with privacy protection to help with compliance. 
  • Finally, select add-ons, such as storing forms in a database.

Around 71% of Americans worry about the data companies collect on them. By securing your forms and integrating privacy features, you can assuage some of these fears. 

Why You Need Contact Form 7

The nearest competitor is WPForms, which offers a more visual block-building approach to creating forms. Those who enjoy the Classic editing format for WordPress will be more drawn to Contact Form 7. 

You need some way for site visitors and current customers to contact you. With Contact Form 7, you can create multiple forms to match the needs of different segments of your audience. 

Cost to Run Contact Form 7 on Your Site

Contact Form 7 is free to use. However, you can invest in plugins that integrate with it, such as the Jetpack CRM extension for $49 per year. Other addons include Ultimate Addons, Honeypot and Database Addon. 

How to Install and Set Up Contact Form 7

We regularly review WordPress plugins. Contact Form 7 is one of the easiest to set up and implement. You will get a standard form that may be a bit difficult to decipher with some color palettes. We’ll talk about how you can input CSS code to customize your forms. 

Step 1: Install the Plugin

screenshot of where to find contact form 7 on the wordpress dashboard

The simplest way to install Contact Form 7 is to go to your WordPress dashboard/Plugins/Add New and search for the program. Install and activate on your site.

Step 2: Find the Forms

screenshot showing where to find the forms in the contact form 7 program to begin building

Setting up your forms is simple. You can access the forms dashboard in two ways. In the left sidebar, there is the word Contact with an envelope icon. Click on that to go to the forms dash. Alternatively, you can go to Plugins and scroll down to Contact Form 7 to click on “Settings,” which will take you to the same location.

Step 3: Create a Form

screenshot of contact form 7 dashboard

For this step, create a new form by clicking on “Add New.” you can also edit the form that comes preinstalled called “Contact Form 1.” 

screenshot of contact form 7 template when creating a new form and tabs across the top

Choose “Add New Form,” and a preloaded template will appear. Name your form and make any changes you’d like within the code. For a detailed description of what the code does, you can check out the Contact Form 7 documentation

If you look at the taps on the contact form builder, you’ll see the options:

  • Form
  • Mail
  • Messages
  • Additional Settings

Under mail, you can pinpoint where form submissions get sent. With the messages tab, you can tweak the responses users get when interacting with your forms. Additional settings allow you to customize the form a bit. If you plan to use the same style for all your forms, you can add the details to your custom CSS for your site’s theme and every new form created will take on the colors and styles you’ve indicated.

Adding the details to the custom CSS field also ensures the form remains the same even when the site’s theme updates. If your theme doesn’t allow for a custom CSS box, you may need to go into the code through the backend of your site files. 

Some Custom CSS Tips

Here are a few codes you can use to customize the look of your forms:

Change Background for Entire Form

.wpcf7 input[type=”text”],

.wpcf7 input[type=”email”],

.wpcf7 textarea

{

    background-color: #fff;

    color: #000;

    width: 50%;

}

Customize the Submit Button

/* Contact Form 7 Submit Button 

 ——————————-*/

 .wpcf7 input[type=”submit”] {

     color: #ffffff;

     font-size: 18px;

     font-weight: 700;

     background: #E2272E;

     padding: 15px 25px;

     border: none;

     border-radius: 5px;

     width: auto;

     text-transform: uppercase;

     letter-spacing: 5px;

 }

 .wpcf7 input:hover[type=”submit”] {

     background: #494949;

     transition: all 0.4s ease 0s;

 }

 .wpcf7 input:active[type=”submit”] {

     background: #000000;

 }

With any of the codes above, just adjust the colors, fonts, sizing, weight and such to what you want. You can always have the page pulled up within your theme’s customizer and see the changes before saving. 

Also, if any of the codes won’t work, it may have to do with your theme. A quick search for code snippets may be all you need to make the adjustments to give your site the exact look you desire. 

Try for Free

The thing we like best about Contact Forms 7 is that you can install and try it at zero cost. You’ll likely find it meets your basic form building needs. Small businesses on a budget will appreciate the affordability. Installation and creating forms is simple. 

Related Posts

About The Author

The Designerly staff is committed to providing well-researched and ongoing learning resources. We're dedicated to educating you on key design concepts and showcasing strategic marketing plans to help grow your business.

Leave a Comment