How to Install, Activate & Use Contact Form 7 In WordPress.

11 min readApr 26, 2021

Contact form 7 is without a doubt one among the foremost popular plugins for creating and managing forms in WordPress. it’s helped over 5 million WordPress website owners stay in-tuned with their visitors.

One feature that creates Contact form 7 stand out from all other form plugins for WordPress is its remarkable simplicity. With it, you’ll easily found out your form fields, customize your form templates, and do tons more.

Want to Build a Website? Contact me.

Created by Takayuki Miyoshi, a seasoned WordPress plugin developer, Contact form 7 was meant to be beginner-friendly. However, some beginners complain about finding it difficult to create forms with the plugin. In fact, many experience trouble fixing the plugin properly.

In this article, we’ll be showing you ways to line up contact forms in WordPress using the Contact Form 7 plugin.

Additionally, you’ll study the add-ons and plugins you’ll use to further enhance the functionality of Contact form 7.

We have made this guide very simple, so following through wouldn’t be a drag for you.

Contact Form 7 Installation Steps on WordPress

Step 1: Search, install and activate

First, install the plugin. To do so, navigate to Plugins >> Add New.

Next, look for contact form 7 using the search function. once you find the plugin, install it by clicking the Install now button.

After installation, activate the plugin directly by clicking the Activate button, which can appear after installation is complete.

With Contact form7 installed and activated, you’re now able to move to the subsequent step, which is creating and fixing your form.

Step 2: Creating First Form

To create your very first form, from your WordPress dashboard navigate to Contact >> Contact forms.

There is a default contact form that goes by the name Contact form 1. If you do not have such a lot of time to make a stunning contact form and you would like something quick, you’ll accompany the default form.

It works, only that it’d not look or work the way you would like.

To use the shape , simply copy the generated shortcode and paste it to the page/post you would like it to seem .

But to make your own custom form, navigate to Contact >> Add New.

This is where you build forms, synchronize your mail, format your message body, and customize your forms within the additional settings section.

To create a form, start by entering the title/name of the shape within the title field.

If the shape tab isn’t already active, click thereon . it’s here you’ll find all fields for contact form 7. These are the fields you’ll got to create a functional form.

Inserting Tags

By default, Contact Form 7 will have the essential , required fields already inserted in your form. They include the name text field, email field, message box field, and submission button.

But let’s say these default fields aren’t sufficient, and you’d wish to add more thereto . As an example, you’ll wish to get the phone numbers of these who wish to contact you.

To add a telephone number field, place your cursor where you would like the sector to seem and click on the tel button.

Doing this may launch a popup box where you’ll customize your field.

If you’d wish to make the new addition a required field, check the ‘Required’ box. A required field is one that has got to be filled for form submission to figure .

In the Name field, set a reputation for the newly created form field. this is often the name that you simply will use to spot the sector . So be happy to use what suits you best. during this example, we used telephone-number.

The default value box is where you’ll set the worth that the shape field should have. This value appears by default within the field, but the user can clean it out and write during a new value.

If you’re a complicated user and which to feature styling to the sector using CSS codes, set an ID attribute or Class attribute. It are often anything. Then make regard to the sector in your stylesheet using the ID or Class attribute.

Once done, click the Insert tag button.

Next, like other fields, we’ll wrap a label tag around this field.

And thereupon , we’ve added a telephone field. to feature other custom fields like a dropdown menu, date, radio, etc., just follow an equivalent steps.

You can also change the call-to-action message within the submit button. as an example , you’ll change it from “Send” to “Contact us”.

Step 3: Setting Up Your Form

Now that you simply have created the shape , subsequent step is to urge it to function exactly because it should. To start, click the Mail tab. this is often where you set how and where messages from your contact form are sent.

Contact Form 7 Setup

In the To field, type within the email where all messages coming from the shape are going to be sent to.

The From field is where you get details of the person who sends a message from your WordPress site, via your contact form. as an example , to place the e-mail of the sender therein field, type in [your-email]. Mind you, this code will only work if it’s what you used for email tag within the ‘Form’ tab.

To retrieve the topic of the mail, insert the topic tag — “[your-subject]” — into the topic field.

You can leave the extra Headersand Message Body sections just the way they’re . otherwise you may plan to add text and other tags as required .

With that, you’re through with the mail section.

Next is that the Message section

For a far better user experience, you’ll want your form to display a message when a user completes an action. As an example, you would possibly want to thank them once they successfully submit a form.

In addition thereto , you’ll also want error messages to seem once they make mistakes. It’s within the Messages section that you simply get to line of these .

In the To field, type within the email where all messages coming from the shape are going to be sent to.

To retrieve the topic of the mail, insert the topic tag — “[your-subject]” — into the topic field.

You can leave the extra Headersand Message Body sections just the way they’re . otherwise you may plan to add text and other tags as required .

With that, you’re through with the mail section.

Next is that the Message section

In addition thereto , you’ll also want error messages to seem once they make mistakes. It’s within the Messages section that you simply get to line them

The default values will suffice. But you’ll always change them to what you would like .

After making any changes you deem necessary, your form is prepared to fly. So continue to save lots of it.

With your form built and found out , it’s time to proceed to the subsequent step.

Step 4: Adding Conditional Fields

Conditional fields are fields that only appear supported a WordPress user response.

For example, let’s say you would like to understand how a user acknowledged your website. You list out several options, including “others”.

If a user chooses “others”, a field that says “please specify” then appears. It won’t appear if a user selects an alternative choice . This is often an example of a conditional field.

To add conditional logic to your forms, you’ll need to install and activate Conditional fields for contact form 7 plugin.

The way this plugin works, it creates a gaggle of fields that don’t appear until a group condition is true.

With the plugin installed and activated, select a form you would like to feature conditional logic to, and click on Edit.

Next, click the menu item to feature a dropdown field. within the dialog that pops up, add a reputation for the text input. There should be no spaces within the name.

In the “Options” input box, enter the varied options about how they found your site.

When done, click Insert Tag.

The tag should be inserted and you ought to add a label as seen below. Once that’s done, click Conditional Fields Group to feature a conditional group.

In the panel , enter a reputation for the group (such as ‘show-when-other-selected”) and click on Insert Tag.

An opening and shutting pair of group tags are going to be added.

When we’re done, anything within those tags will only be shown when “Other” is chosen as how the location was found. And this brings us to the next step.

Inserting Tags within the Group

Place your cursor in between the opening and shutting group tags and click on text to insert a text box. this is often the text box which will be displayed when “Others” is chosen .

In the panel that opens, enter a reputation for the text input, and click on Insert Tag. Again, wrap this text field during a label as shown below.

Now save the shape .

Adding Conditional Logic

With that done, you finally need to set the condition. Which is, when a user selects “Others”, the sector within the conditional group is displayed.

To do this, switch to the “Conditional fields” tab and click on add new conditional rule.

The condition works during this way: Show [Conditional Group] if [Selected Field] equals [Selected Value].

In our case, what we set is “Show [show-when-other-selected] if [find-out-about-us] equals [Others]”.

After adding your condition, click Save.

And thereupon , you’ve got added a text field that only appears when the user selects others within the “find us” dropdown menu.

Step 5: Inserting Forms

To access the shape you’ve got just created, attend Contact >> Contact Forms. Then copy the generated shortcode for your contact form.

Now, locate the page you would like the shape to seem and open it for editing. Next, paste the shortcode where you would like the shape to seem .

To see how the shape would display, hit Preview Changes.

If all looks fine, continue and click on Update to publish your contact form. Also remember to run tests on the shape to make sure it’s working and sending email alerts as needed.

Extensions To Improve the Functionality Of Contact Form 7

Contact form 7 can do an entire lot quite just collect messages and sender details. However, for this to happen, you’ll got to install a few of forms extensions to reinforce its functionality.

Below are a couple of .

Really Simple CAPTCHA

CAPTCHA is an innovative solution developed to stay spammers and spambots in restraint . Without them, your inbox would be run over by plenty of spam emails.

Developed by an equivalent author as Contact form 7, this plugin is extremely simple to use, hence its name.

Invisible reCAPTCHA for WordPress

Invisible reCAPTCHA provides an additional layer of security against spam messages. This plugin requires some more work to line up but also provides better spam protection.

To use this plugin, you initially need to add your website to your Google reCAPTCHA account.

After registering your website, a Secret and Site Key are going to be generated for you. All you’ve got to do is to repeat the generated keys and paste them into the plugin’s settings. And you’re ready.

Drop a uploader for Contact Form 7

What if you wanted users to submit file attachments while sending a message via your contact form? Maybe you set a vacancy post, and would really like applicants to send their resume alongside the applications.

Unfortunately, CF7 has no file uploads feature. the sole thanks to make this happen is via an add-on.

Drop Uploader for CF7, a premium addon, can get the work done.

One of the very cool features of this plugin is that it allows you to determine where files are stored when users submit their messages. you’ve got the choice of using Dropbox or your Google Drive.

What’s more, you’ll customize the plugin just the way you would like it.

It is sold for $17, and you’ll catch on at Codecanyon.

Material Design for CF7

Form design is a crucial factor to think about when building contact forms. this is often because a well-designed form will have a far better user experience, hence better engagement (especially once you want to gather customer information).

This is where form builders like Material Design for CF7 involves play. So begin by installing and activating the builder plugin, after which you’ll start building and styling your form.

You can use it to style your input fields, radio buttons, dropdown menus, and much more.

The best part is, it’s free and works with all WordPress themes.

Conclusion

As an internet site owner, you would like to concentrate to the requests of your clients and visitors. the simplest thanks to achieve this is often by fixing contact forms on your site.

Contact form 7 may be a plugin solution you’ll calculate . Not only is it effective, but it’s also free. So you don’t need to worry about making an upfront financial commitment before using the plugin.

But if you’re skeptical about using CF7 form, there are other alternatives to Contact Form 7 solutions you’ll try. Examples are WP forms, Gravity forms, Ninja forms, and Formidable Forms.

Formidable forms, for instance , let you build complex forms that are visually appealing.

For more tips and tricks in WordPress, visit our WP College.