Categories: Tutorials

How to configure and customize ContactForm7 for WordPress

Link Naar Tutorial Configure Contact Form 7

For many of the websites I build, I use ContactForm 7. A very nice and customizable plugin which allows for flexible creation of all kinds of forms.

There are several ways the forms can be customized:

– Only load the CSS and JQuery on pages where there actually is a form, to avoid unecessary overhead on page loads.

– Spread the quote form over two columns to make full use of the page width and not introduce any unnecessary scrolling.

– Adjust the styling to fit within the website layout design

In this post, I will explain how ContactForm7 can be configured, and what changes I made to customize the design. I’ve also listed one bug, although I believe the bug is PHP-related and has nothing to do with the plugin.

1. Regular configuration

For the code between the brackets []: if you do not understand them, I suggest you install the plugin, and experiment. It’s not difficult to understand. If you generate a new field, and click on the brown bar at the bottom of it after each change you make, you’ll see the difference in the code. You can also find a lot of information on the developer’s website (contactform.com) and the plugin’s support pages at WordPress.org.

Thanks to Andy Depp at HeCode.com for useful tips (site no longer reachable unfortunately).

1.1 Contact Form

The contact form is the most basic form, its configuration is mostly default.

1.1.1 Form code

[text* your-name] 
Your e-mail address (vereist)

[email* your-email] 
Subject

[text your-subject] 
Message

[textarea your-message] 

Attach file (maximum 5Mb, Office, PDF, Adobe CS, txt and image files only)
[file your-file limit:5mb filetypes:.doc|.docx|.xls|.xlsx|.ppt|.vsd|.pdf|.jpg|.png|.txt]

[submit "Send"]

1.2 Quote form

The quote form is a lot more extensive, and contains text fields, radio buttons and check boxes. Radio buttons are used when there are several options, but only one should be selected. Check boxes are used when there are several options, and you can select more than one of them.

As you can see below, I also added some HTML classes which I’ve used to control the styling with. More about that in the customization part of this article.

1.2.1 Form code

<table>
<tbody>
<tr>
<td class="tablepaddingL">

For which product would you like to request a quote?
[checkbox* Product use_label_element "Website" "Sitescan" "Logo" "Other"]

[text Other watermark "Other, specifically...."]

Comments
[textarea Comments watermark "Additional information and questions..."]

Attach file (limit 8MB, Office, PDF, Adobe CS, txt and image files only):
[file your-file limit:8mb filetypes:.doc|.docx|.xls|.xlsx|.ppt|.vsd|.pdf|.jpg|.png|.txt]

What is roughly your budget?
[checkbox* Budget use_label_element "-€500" "€500+" "€1000+" "€2500+"]

Please fill out your personal information here:
[text* Name akismet:author watermark "Name"]
[text* CompanyName watermark "Company name"]
[text* Branche watermark "Branche"]
[text* CurrentWebsite akismet:author_url watermark "Current website"]
[email* E-mailaddress akismet:author_email watermark "E-mail address"]
[text* Phone /10 watermark "Phone number"]</td>
<td class="tablepaddingR">

Please fill out the following part only in case you are requesting a quote for a website:

Wat is the main goal of your website?
[text Goal watermark "For example webshop; portfolio; contact details; etc."]

Approximately how many pages will the website contain?
[radio Pages use_label_element "0-10" "11-20" "21-50" "50-more"]

For easy content management, a CMS-based website is advisable. Is it your aim to manage 
your own content and make use of a CMS?
[radio CMS use_label_element "Yes" "No"]

Would you like me to take perform other services for you as well?
[checkbox* OtherServices "No" "Yes, maintenance after project completion" 
"Yes, domain registration" "Yes, hosting"]

Do you have any additional requirements?
[checkbox Extra use_label_element "Webshop" "Image gallery" "Calendar" 
"News items" "Contact- or other forms" "Blog"]

[submit "Send"]</td>
</tr>
</tbody>
</table>

1.3 Mail and Message fields

Mail and Message fields apply to any form. This is a generic explanation of what they do::

Mail(1) and Mail(2) fields
I recommend using both:
1) To send the e-mail to your own mailbox with all the information the sender filled in.
2) To send a reply to the sender with a confirmation that the mail has arrived, and that he or she will be contacted shortly.

Message fields
I recommend to always review the default values and adapt them to your liking. If you’re using a different language, that’s even more important.

2. Customization

2.1 Conditional load

To keep the website as lean and mean as possible, I wanted the JQuery library and CSS file to only load on pages where there actually was a form.
The developers of ContactForm posted a clear explanation of how to go about this:

loading-javascript-and-stylesheet-only-when-it-is-necessary/

2.2 Spread form over two columns

The ContactForm form fields can also contain HTML code. That’s very handy! To spread the form over two columns, I created a left and a right column class, and configured the classes in the plugin’s CSS stylesheet (styles.css). See how it turned out:

2.3 Styling adjustments

The default CSS file is rather bare. But a bit of research on what classes and ID’s are generated by the plugin will allow you to easily style almost everything. Here is the entire CSS file. The top part is the default CSS (expect where I commented out the lines), the second part is fully customized. Some of those lines are also commented out, but I left them as it shows some of the other classes and ID’s that are generated and style-able.

Styles.css:

/* div.wpcf7 {margin:0 0 0 10px; padding:0 5px;} */
div.wpcf7-response-output {
 margin:2em 0.5em 1em 0; /* added 0 for left */ padding:0.2em 1em 0.2em 0; /*added 0 for left; *//* overflow: visible;
 z-index: 500;*/}

div.wpcf7-mail-sent-ok {border:2px solid #398f14;}

div.wpcf7-mail-sent-ng {
 border:2px solid #0FAADD; /* custom color */ background-color: #F6F6F6; /* added bg color */}

div.wpcf7-spam-blocked {
 border:2px solid #9F3; /* custom color */ background-color: #F6F6F6; /* added bg color */}

div.wpcf7-validation-errors {
 border:2px solid #F00; /* custom color */ background-color: #F6F6F6; /* added bg color */}

span.wpcf7-form-control-wrap {position:relative;}

span.wpcf7-not-valid-tip {
 position: absolute;
 top: 20%;
 left: 20%;
 z-index: 100;
 border: 2px solid #00d8ff; /* custom border */ font-size: 10pt;
 width: 280px;
 padding: 2px;
 background-color: #F6F6F6; /* added bg color */}

span.wpcf7-not-valid-tip-no-ajax {
 color: #f00;
 font-size: 10pt;
 display: block;}

/* span.wpcf7-list-item {margin-left: 0.5em;} */
.wpcf7-display-none {display: none;}

div.wpcf7 img.ajax-loader {
 border: none;
 vertical-align: middle;
 margin-left: 4px;}

div.wpcf7 .watermark {color: #888;}

/* --------- above is customized where commented, below is all custom --------- *//*label {width:auto; display:inline;}*/
/* span.wpcf7-checkbox label1 span.wpcf7-list-item {width:auto; display:block;} */
.wpcf7-form{margin-left:5px;} /* moves entire form */
/*.wpcf7-form p{font-size:small;color:#000;text-align:left;}*/
.wpcf7-form p .wpcf7-file{height:30px;width:390px;}

.wpcf7-form p input, .wpcf7-form p textarea{
 font-size:normal;
 background-color:#ebebeb;
 color:#000;
 border-left-color:#888;
 border-top-color :#888;
 border-bottom-color:#fff;
 border-right-color:#fff;
 padding:2px;}

.wpcf7-form p textarea, .wpcf7-form p .wpcf7-text{width:390px;}

.wpcf7-form p input{height:15px;}

.wpcf7-form p textarea{height:90px;}

.wpcf7-form p .wpcf7-submit{
 display: block;
 border:none;
 background-image: url(../../themes/oranje/images/submit-bg.png);
 background-repeat: no-repeat;
 height:30px;
 color:#fff;
 font-size:normal;
 font-weight:bold;
 width:390px;}

/*span .wpcf7-list-item-label{padding: 0 0 3px -15px;}*/
input[type="radio"], input[type="checkbox"] {
margin: 0 0 0 12px; /* space between individual radio buttons or checkboxes in a row */vertical-align:bottom;
width:15px;
display:inline;}

/*input[value=""]{padding: 0 0 6px 0;}*/
.tablepaddingL{width:390px; padding:0 20px 0 0;}
.tablepaddingR{width:390px; padding:0 0 0 20px;}

p .block{display:block;}

That’s all. I hope it helps you in customizing your own ContactForm7 forms!

3. Issues

So far, I’ve only found one issue, and unfortunately it occurrs in every other Form plugin I tried, as well as in a manually created PHP form:
If you include an option to upload an attachment, a “browse” button is generated automatically. If you click it, a browse window to your local machine opens, and you can select the file you wish to upload. It works in every browser I tested, even in Internet Explorer 6. But in Internet Explorer 7 and 8, the “browse” button is not generated properly (only a small button about 10px wide is generated), and the malformed button does nothing. If you have a solution, please post it here!

This post was last modified on 26/06/2018 11:14

Boris Hoekmeijer

Next Tips om uw nieuwe website voor te bereiden »

Previous « Web terminologie en begrippen uitgelegd in mensentaal

View Comments

Albert Thomas says:

24/11/2017 at 09:02

Thanks a lot for the post. It has helped me get some nice ideas. I hope I will see some really good result soon.
Arturo Bustamante says:

22/04/2013 at 03:35

tengo 2 formularios de contacto, uno tiene mas contenido que el otro. Necesito recortar la parte final (height) del que contiene menos información.
Podrian ayudarme con esto
Muchas gracias
Quedo atento a una pronta respuesta a través de mi correo electrónico
- Fernando says:
  
  05/06/2013 at 01:22
  
  La altura la toma en automatico cada forma pero puedes modificarla agregando div.wpcf7 {height:400px para altura fija o min-height para si la forma no alcanza el tamaño deseado dejando un espacio en blanco. para llenar los con la altura de los campos usa % (area)
  
  the form uses an automatic height but you can add a control with div.wpcf7 { height:400px for a fixed height or min-height to increase the height if form div is too short, it creates a blank space below the form. to avoid blank space you can fill it with input fields using on height css % instead px (for area fields only)
- Boris Hoekmeijer says:
  
  22/04/2013 at 07:15
  
  Arturo, puedes explicar en Ingles? Mi Espanõl no es sufficiente para intiender que tu queieres saber.

I finally found a solution (workaround) for the buttom problem:

1. I created another div around the upload-tag: [file* upload1 1/ class:upload1]

2. the css looks like this:

.upload1 input[type="file"] {
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
position: relative;
float: left;
height: 35px;
cursor: pointer;
border: none;
background: none;
height: 2.5rem;
letter-spacing: 1.05rem;
}
.fileupload{
border: 1px solid red;
background-color: #f3f3f3;
height: 2rem;
color: #285996;
cursor: pointer;
font-size: 1.5rem;
padding: 0.5rem;
width: 28rem;
background: url(images/express-upload.jpg) no-repeat;
z-index: 1500;
}
.fileupload:hover{
background: none;
}

have fun
Manuel

Boris Hoekmeijer says:

12/04/2013 at 13:09

That's brilliant Manuel, thanks for the feedback!