Skip to content

Complete guide on fully editing Contact Form 7 – Design customization, conditional fields, two columns, countries, auto-responders & more

Reading Time: 8 minutes
Editing contact form 7

Alright, one of the most important parts of a website, forms. If you want your form to be beautiful and practical at the same damn time, here’s a complete guide on fully editing Contact Form 7 – Design customization, conditional fields, two columns, countries, auto-responders & more.

Content table:

  1. About Contact Form 7 – Elements, usage
  2. Design customizations
    1. General outline
    2. 2 columns
    3. Specific form id edits
    4. Edit each & every field possible
    5. Change Contact Form 7 placeholders’ colors
  3. Usages
    1. Subscribe
    2. Reservations
  4. Conditional fields
  5. Redirect to a thank you page after successful Contact Form 7 submission
  6. Contact Form 7 CRM
  7. Add a countries select widget to Contact Form 7
  8. Set up form completion notifications
  9. Set up auto-responders
  10. Best Contact Form 7 addons, plugins
  11. Contact Form 7 alternatives

1. About Contact Form 7 – Elements, usage:

The most used plug in for forms, I don’t really know the reason, as it is very simple, lacks user friendliness and doesn’t have design capabilities without coding. But it is what it is, we have CF7, and to be honest after getting the hang of it, you don’t want to use another plug in for forms.

Contact Form 7 Elements

NameExplanationCSS class
textThe user enters a text, can be used for names, last names, company names, etc…form input.text
emailUsed for emails, obviouslyform
URLUsed to capture websites, verifies whether the input is a website or notform input.url
telUsed to capture phone numbersform
numberUsed to enter numbers, can be used for age, income amount, website visitors count, etc…form input.number
dateA date picker, where the user can pick a dateform
text areaUsed to allow visitors to enter a message, usually longform textarea
drop-down menuA drop down menu where the user can choose one of the pre-defined optionsform select, form select option
checkboxesCheck box list, where the user can check/uncheck one or multiple pre-defined optionsspan.wpcf7-form-control.wpcf7-checkbox
radio buttonsRadio buttons, where the user can select one pre-defined optionspan.wpcf7-form-control.wpcf7-radio
acceptanceCheckbox, usually used for accepting terms & conditions, receiving promotional emails, upsells, etc…span.wpcf7-form-control.wpcf7-acceptance
quizUsed to verify users or just for fun quizzesinput.wpcf7-form-control.wpcf7-quiz
fileAn attachment place, where the user attaches a fileform .file
submitSubmit button, used to allow the user to submit the filled forminput.wpcf7-form-control.wpcf7-submit

In case you want to change all input types, here’s the class: form input:read-write, form textarea, form select, form select option

form input:read-write, form textarea, form select, form select option {
	color: #fff;
	border-radius: 25px;
	background-color: #000;

2. Fully customize your Contact Form 7 design

Customizing Your Contact Form 7 forms, is really easy, but needs a bit coding. I’ve organized it into sections.

1. General changes

Form styling such as, button, font family, size, color are inherited from theme options… In case you want your form to have a different style, here’s the way to do it:

Change the CF7 button styling, obviously change every metric as you wish:

input.wpcf7-form-control.wpcf7-submit {
background-color: #fff;
border: solid 5px #000;
border-radius: 0;
color: #000;
font-weight: 500;

2. Making Contact Form 7 form elements 2 columns

In order to make any two fields in two columns you have to do two things.

  1. Firstly, create the class. Secondly, copy and paste the below code in your Additional CSS… Go to Appearance -> Customize -> Additional CSS
/* CF7 Inline columns */
.cf7column {
  float: left;
  width: 50%;

/* Clear floats after the columns */
.cf7row:after {
  content: "";
  display: table;
  clear: both;

2. Firstly, add the class to the form fields. Secondly, in the contact form editor, add the classes to the fields you want to have in 2 columns. Contact -> choose to edit your form

<div class="cf7row">
  <div class="cf7column">[email* your-email placeholder "Your Email"]</div>
  <div class="cf7column">[submit "Submit"]</div>

3. Edit only specific form

If you don’t want your styles and edits to take effect on all the forms on your website, all you have to do is make the changes to the specific form by adding its id.

You can find the id in the inspect element of the specific form.

Go to your website -> right click on the form you want to edit -> click on “Inspect” -> You can find the form id in the CSS code just like in the screenshot -> id=”wpcf7-f77-p7-o1”

To target a specific form go to your wp dashboard, after that, Appearance -> Customize -> Additional CSS ->

#[form id] [element class] {CUSTOM_STYLING}

Contact Form 7 inspect element form id

4. Edit each & every field possible

Alright, first you will have to add a “Class attribute” to each and every field.

You can edit each element by targeting the specific class attribute you added in the additional css. Go to wp dashboard. After that, Appearance -> Customize -> Additional CSS

.wpcf7 .css_class

Here you can see a fully customized Contact Form 7 and its customization code.

5. Change Contact Form 7 placeholders’ colors and styles

In order to change Contact Form 7 placeholder colors, you have to also change the opacity, as changing the color alone is not enough. And you have to do so for every browser. Here’s the code, change the colors with whatever you want.

You can also do this for only specific forms, by adding the form ID, #[form-id] and the code instead of .wpcf7.

.wpcf7 ::-webkit-input-placeholder { /* WebKit browsers */
color: #ffffff; !important;
opacity: 1;
.wpcf7 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ffffff; !important;
opacity: 1;
.wpcf7 ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ffffff; !important;
opacity: 1;
.wpcf7 :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #ffffff; !important;
opacity: 1;
.wpcf7 form input:read-write, form textarea {
	font-family: "Open Sans";

3. Contact Form 7 simple usages

1. Subscribe submission

You can use CF7 to expand your subscriptions list. For instance, just add email field and a submit button.

[email* your-email placeholder “Your Email”]

[submit “Submit”]

2. Reservations

You can use CF7 to accept reservations. Here’s an example:

[text* your-name placeholder “Name*”]

[tel* tel-428 placeholder “Phone number*”]

[date* date-259 placeholder “Reservation date*”]

[number* number-722 placeholder “Number of people*”]

[textarea your-message 40×2 placeholder “Reservation details”]

[submit “Make your reservation now”]

4. Conditional fields for Contact Form 7

Conditional fields are the fields which are shown or hidden based on certain input values of other fields.

Let’s say your form can only be submitted by people who are 18+… So when the visitors inputs 17 the submit button disappears.

To use conditional fields, use the following plug in.

Tips & tricks for using the Contact Form 7 – Conditional Fields free plug in

  1. You can make any element appear by default, by adding a “show” rule with an empty value. Let’s say you want the submit button to disappear when the age is less than 18. So you have to create show rules on the submit button on all the possible ages above 18. But in this case the button won’t appear when the form is still empty, so you add a new rule to show the button when the age value is empty. Tataam…
  2. You can easily copy paste conditional fields by changing the edit mode to “Text mode”, and copy paste the code to another form
Conditional fields text mode

5. Redirect after successful form submission

There are two ways to redirect a user after a successful Contact Form 7 submission.

  1. The easy way

Add this code to your child’s theme functions.php or via Snippet plug in. However, change the with where you want to redirect…

document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = '';
}, false );
  • The easier way

Install the Redirection for Contact Form 7 plug in, after that, go to the form -> Actions -> add the redirect.

Redirect CF 7 plug in

6. Save Contact Form 7 submitted contacts

1. Save contacts directly in WordPress admin

Install the Redirection for Contact Form 7 plug in -> add a new action “Save leads”

Save leads in contact form 7

You can view the leads by going to actions -> find the save leads action -> View leads

View leads in Contact Form 7

2. Integrate Contact Form 7 to a CRM

You can integrate Contact Form 7 to a custom CRM with API integrations, or:

Integrate Contact Form 7 with MailChimp

Integrate Contact Form 7 with HubSpot

Integrate Contact Form 7 with Salesforce

Integrate Contact Form 7 with Zoho

7. Add a countries select widget to Contact Form 7

To add a country select widget, install the Country & Phone Field Contact Form 7

Select country widget in Contact Form 7
Select country field settings in Contact Form 7

8. Set up Contact Form 7 form completion notifications & emails

Edit Form submission messages from each Contact Form 7 form -> Messages

Contact Form 7 submission messages


Go to your specific form -> Mail

The first mail message is set up to notify you that a form was submitted, in other words, to inform you about the details of the form.

Your form fields are variables. Their value changes based on the filled value by the visitor. You can find the variable ids at the top of the Mail tab (highlighted in the red square [your-name], [last-name]….)

So in order for you to find out what the leads have actually filled, you need to enter these values in the message body, highlighted in the 2nd red square, in the Message body section.

Note: The variables will be different for you based on your form fields, therefore use the variables that you have.

Note: This email is for you, so you write whatever 😀 motivate yourself.

Contact Form 7 notification email

If you’re asking visitors to upload a document or attach a file you have to add the attachment variable in the File attachment section in the Mail tab.

9. Set up Contact Form 7 auto-responders

To set up an auto-responder you need to go to the form -> Mail -> scroll down to Mail (2) -> Check it

Make sure you add the to field the email variable for the form, so that the email goes to the lead (since the lead has filled his/her email in the field)

Auto responder in Contact Form 7

10. Best Contact Form 7 addons, plugins

Here’s a shortlist of the best Contact Form 7 addons and plug-ins, which will improve its work and add more practical functionalities to it.

11. Best Contact Form 7 alternatives

In case you don’t want to use Contact Form 7, here are some of the better alternatives. Although, once you get used to CF7 it becomes good. But here are some:

Leave a Reply

Subscribe, I never spam

Read More
Although I don’t have a restaurant the urge to read it was too strong and didn’t disappoint. I guess if you have a restaurant this is a must-read. Thanks a lot.
Diogo Barros
Diogo Barros
Read More
Thank you !
Read More
i've been searching everywhere for this solution, you're the first person who gave a simple solution. Ty
Farah I
Farah I
Read More
Thanks. I already have cloudflare and its still slow.. was thinking of how to remove unused js... but found your video instead
Read More
makes complete sense bro. Thank you
 Tobee Panyasith
Tobee Panyasith
Read More
Thank you for this great video

Table of Content

Subscribe to my mailing list

I never spam