Pay less than $ 3 for rest of September
Start Now

How to Set Up Contact Form 7 Like a Pro

Hey and thanks for finding your way to this article.

During the next couple of minutes, I will share some of what I think are the most important tips about configuring your Contact Form 7.

A form is the gateway between your online presence and starting a relationship with a customer.

I am going to take you through some of the nuances that are often overlooked when setting up a high converting form.

After that, I will share a few cool and creative ideas you can use Contact Form 7 for.

Here is how to use contact form 7.

Installing Contact Form 7

You don't need anything special to get Contact Form 7 up and running.

It is free and you don't need any license key or similar.

Log in to your WordPress admin area, go to plugins, and search for "Contact Form 7".

Once installed and activated, new Contact button will appear on the left side of your WordPress menu area.

Navigate there and find the dummy contact form that has already been set up.

You can edit the form, add or delete the fields as you please.

Form fields

By default, Contact Form 7 comes with a number of prebuilt tags.

You can use them to easily edit your contact form templates.

To insert the elements into the form just click the buttons/tag generators that match your needs.

Here is a complete list of all available Form-tag types:

Text Fields

  • Text (text and text*) - Single line input field that will enable the visitor to enter any form of text. The only difference between text and text* is that text* represents a required field.
    Pro tip: all tags in Contact Form 7 which have asterisk ‘*’ are considered as required fields.
  • Email (email and email*) - This tag creates a single line input field where an email address can or must be typed in.
  • URL (url and url*) - Clicking the URL tag will add a single line URL input field to your contact form.
  • Tel (tel and tel*) - adds a single line field that accepts only telephone number.
    Pro tip: When you choose the “tel” input field type, it will show the phone input keyboard on phone. This type of input could also be used in other cases where you simply want to offer the user a nice number-typing experience on phone.
  • Textarea (textarea and textarea*) - Field that accepts any form of text. It is intended for multi-line input. The height of textarea is controlled by the number of “rows”. For instance, If you need 5 rows in this field, simply add “x5” to your textarea shortcode that you generated. In this case, your shortcode should look something like this [textarea your-message x5]

See official documentation about Text Fields here.

Number Fields (number and number* / range and range*)

Fields that enable your visitors to enter only numeric values.

Contact Form 7 gives you the option to set up “min:(num)”, “max:(num)” and “step:(num)” for Number Fields.

Min and max refer to minimum and maximum allowed input value for this specific field.

Step attribute value gives you option to narrow down acceptable inputs by the user. For example, if minimum number is 4 and step number is 2, acceptable inputs would be 6, 8, 10, etc.

See official documentation about Number Fields here.

Date Field (date and date*)

Creates date input field for your form. In other words, it allows users to pick a date.

See official documentation about Date Fields here.

Checkboxes, Radio Buttons, and Menus

  • Checkboxes (checkbox and checkbox*) - Adds checkboxes to your form. This field is used in case you have a list of multiple choices and you expect that your user will select one or more of them. With checkbox* user must check at least one of the provided boxes.
  • Radio Buttons - radio button is used in case you have a list of multiple choices but user will be able to select only one of them.
  • Drop-Down Menu (select and select*) - Represents a drop-down menu where user can or must select one of the provided options.

See official documentation about Checkboxes, Radio Buttons, and Menus here.

Acceptance Checkbox

This field is intended for obtaining clear consent of submitters to certain terms and conditions. You can find more info about this field below.

See official documentation about Acceptance Checkbox here.

Quiz

Generates the quiz which will help you to protect your forms from unwanted spam. The user needs to pick the correct answer to prove that he is not a bot.

See official documentation about Acceptance Checkbox here.

Really Simple CAPTCHA

Allows you to insert CAPTCHA to your form. However, Contact Form 7 recommends using reCAPTCHA.

See official documentation about Acceptance Checkbox here.

reCAPTCHA (v3)

Adds a field with Google’s version of CAPTCHA.

See official documentation about Acceptance Checkbox here.

File Uploading and Attachment

This feature will enable your visitors to upload files through your form. To receive these files via email, you need to set up mail settings in Contact Form 7.

See official documentation about Acceptance Checkbox here.

Submit

Form tag that creates submit button to contact form.

See official documentation about Acceptance Checkbox here.

How to style Contact Form 7 with Oxygen Builder

When you insert the shortcode from Contact Form 7 into Oxygen Builder it doesn’t look all that pretty.

Contact Form 7 isn't loaded with visual builders like many of the other modern form builders.

This is one of the things I like about Contact Form 7, it is simple and clean.

We still need the form to look pretty.

To do that you can install a plugin that adds the visual building features, you can style it using normal CSS, or thirdly you can use our pre-styled form elements from oxyelements.

 

The contact form elements from oxyelements can be used for any form setup you have.

We have prepared the CSS, so it works right away, and if you wish you can make your own tweaks to our styling.

This should get you up and running with a beautiful form in no time.

Set up an auto-responder to stay in touch with leads

Contact Form 7 has a built-in auto-responder feature.

It can send emails automatically to visitors who filled out your form.

This feature is a time-saver, and not only that but it’s also a great way to enhance communication and to build a stronger relationship with your visitors.

Giving people instant feedback, that their request was received or their mail was sent will enhance their experience.

Follow these steps and you’ll have auto responder up and running in no time:

1. From your admin dashboard go to Contacts

2. Select a contact form for which you want to configure Auto-responder and go to the “Mail” tab

3. Here you can set up an auto-email with information from the form, the visitor filled out. You have the option to either send the information to yourself, the visitor, or someone else entirely. If you want to send two separate emails, for example, one to yourself with the information and one for the visitor, you can enable an extra email.

4. Scroll down and check and check the box that says Use Mail (2)

5. In both emails you can use various shortcodes to generate the perfect email for you (or your staff) and the website visitor. Contact Form 7 has some built-in shortcodes, they call “Special Mail Tags”. The custom ones you created for the form will be shown above the email text box “Message Body”.

Shortcode [your-email] (if you used another name for the email field in your form, you should use that name here instead) in the “To” section will catch users’ email and send the message to that specific address. You can even use “reply-to”, “cc”, and “bcc” headers for more advanced email sending needs.

6. After configuring all the options above click “Save” button.

Make your form comply with GDPR regulations

If you are creating a form that takes personal data from a European citizen, to process this data you might need to get explicit consent from the person. Always consult a lawyer if you’re uncertain about what you are required to do. Either way, you can easily do that with Contact Form 7.

The plugin has a built-in acceptance field. It is a standard HTML checkbox tag.

Using this field you can require the user to accept, check, or uncheck certain terms.

You can read a detailed description of this feature here https://contactform7.com/acceptance-checkbox/. For now, I am going to share a standard HTML snippet with you, to get you started:

[acceptance your-consent] I accept the <a href=”/terms-conditions” target=”blank”>terms and conditions</a>. [/acceptance]

Remember to change the href attribute of the a-tag to the URL of your terms and conditions page.

A common issue is that the form won't validate the other fields (or check if the values are ok) before the user has accepted the terms.

If the user forgets to accept the terms and make a mistake too, it will show an error twice.

To get around this issue, you can tell the form to treat the checkbox as any other field and validate it all at the same time.

You need to implement a small "code" that you can find under additional settings (read more about "additional settings" here).

Here is the code for you:

acceptance_as_validation: on

With these settings, you should be all set for taking personal data.
Again, always consult a legal expert when dealing with personal data.

Avoid being bombarded with Spam

If your website ranks fairly well on Google, there is a fair chance that emailing bots around the globe will find your website and start sending you a bunch of annoying spam emails. Usually, it is harmless, but annoying in any case.

It is particularly annoying if you just made an awesome website for your client and their main sales email gets filled up with spam.

To fix this problem you can take a few different approaches depending on your budget and the amount of spam.

1. Add common spam words to the built "black list" inside WordPress.

From WordPress admin panel go to Settings>Discussion, now scroll down until you reach “Comment Blacklist” section.

This will work on both comments and Contact Form 7.

It is free and can be quite effective, but requires some maintenance and you risk losing some relevant emails too unless you are really careful when specifying your list of words to be rejected. Being too broad will reject all mails. Being too specific will only reject mails exactly like the one you already got.

2. Google Captcha

Contact Form 7 has built-in compatibility for Google Captcha.

This setup seems quite robust, however, I find it quite unattractive with their small badge, when using the standard settings.

Also, I prefer not adding yet another script to the frontend. This might be a bit biased since I spend a lot of time speeding up sites.

There are no additional fees for using this service, it’s completely free.

Installing and integrating Google Captcha into Contact Form 7 is a simple process.

To do that, follow guide here on how to add recaptcha to contact form 7.

 

3. Akismet

The good old plugin is one of the most downloaded plugins for WordPress. It helps protect blogs' commenting section from spam and can do the same for Contact Form 7.

It requires a membership and will connect to your site via their API. If you are considering to use Akismet for a non-commercial website, you are in luck as you can use it for free.

f you want to use it for a commercial site, you can get started for as low as 5 USD per month.

To install Akismet plugin and to get it running on your website, follow the steps from this page.
Based on what I hear, this works really well.

Avoid Ending up in Customers' Spam Folder

Is your contact form 7 not sending emails as expected?

Not getting spam is half the battle, but not ending up in spam yourself is even more important when getting new business.

WordPress uses the standard PHP mailing setup to send mails.

When you set up WordPress your site will in most cases have no authority or credibility in the eyes of the receiving mail servers.

To fix this, there is a number of things you can do.

The main idea is to send through a mail server that already has credibility and authority, thereby be accepted by the recipients’ mail server.

To do this you need to go through these steps:

  1. Create an email account on your company domain, for example, using Google Apps for Business or Microsoft Exchange
  2. Add an SMTP plugin to your WordPress installation
  3. Use your email account credentials to enable the SMTP plugin to send through your account
  4. Test and verify that the mail setup does, in fact, end up in your own inbox instead of your spam folder
  5. Test even further using mail tester
  6. If the test suggests that your email credibility could be improved, consider looking further into that.
  7. Check that your Contact Form 7 sends through the new mailing setup

Using Webhooks to Send Data to Your CRM

As mentioned Contact Form 7 has loads of plugins to extend its capabilities, such as integrating into Zapier, so you can automate your workflow.

They have also made several code snippets so you can write your own PHP code to send web requests using the Curl function.

It does require a little bit of setup, but once implemented you can do really powerful things.

Creative ideas

Prefill forms to identify existing customers

Contact Form 7 has a built-in feature for prefilling both visible and hidden fields.

You can add a small parameter to the URL of the page, where the form is placed, to inject information.

For example, if you are asking your customers for feedback, you could add an identifying parameter such as CRM id or email.

example.com/feedback?clientId=123456

You can also prefill the email address if the visitor is a registered user on your WordPress website.

Again this can be useful for getting quick feedback with only one text field.

This will make it faster and more convenient for the user.

Here is an idea for you, make your own NPS (Net Promoter Score) setup for free.

Get users location

Sometimes you need to know the location of the user.

Naturally, you could make a dropdown of countries and a text input for city and so on.

However, there is an easier way. There is a free plugin that lets you determine the location of the visitor based on their IP address - GeoIP Detection.

 

Fortunately, this plugin has a shortcode that adds a country dropdown and a city text input.

Both fields are prefilled with the visitors’ estimated location and the dropdown even has a list of all countries.

[geoip_detect2_countries mycountry]

[geoip_detect2_text_input mycity property:city]

No need to set that up yourself.

Can be super useful and it makes it much more convenient for the user to fill the form.

Conclusion

There you have it! Now you know how to configure and customize Contact Form 7 on your website.

Get started, setting up beautiful Contact Form 7 forms with your oxyelements subscription. See a list of available form elements.

Once you set it up don’t forget to test it, just to be sure that you didn’t skip some steps.

To extend the functionality of your forms you can browse through third-party extensions.