Styling Contact Form 7 Forms

Contact Form 7 (CF7) is one of the most popular plugins available for WordPress. It allows users to quickly create customised forms, anywhere on a WordPress website.

While the forms are easy to create and implement, the fields within them are styled minimally by the CF7 plugin – allowing them to blend in with most websites. The appearance of each CF7 form depends on the CSS styling applied to standard HTML form elements used in your current WordPress theme.

This article shows users, skilled at using HTML and CSS, how to style CF7 forms to their particular requirements.

Tl:dr (too long; didn’t read) version

  1. The Form Process
  2. Use Firebug or Chrome Dev Tools to examine your CF7 form
  3. CSS in your current WordPress theme
  4. Targeting CSS changes to CF7 forms
  5. Using CSS to change the appearance of the default CF7 form

You will need to be skilled at using HTML and CSS to follow along in this article. If that description does not fit you, you can learn all you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that.

You will also need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail to follow along in this article. If that description does not fit you, you can learn about Firebug or Chrome Dev Tools and come back to this article when you’ve done that.

Table of Contents

Default Contact Form 7 Form

We use the default CF7 form (normally named “Contact form 1” & installed automatically on every install of the CF7 plugin) as the basis of this article.

The actual look of this default form on your WordPress website will depend on the current WordPress theme used on your website and the CSS styling that theme applies to standard HTML form elements.

In this case our website uses the Balance Theme which is a child theme based on the Genesis Framework and the default Contact Form 7 form appears as follows:

Your Name (required)

Your Email (required)

Subject

Your Message

You may notice this form has a couple of styling issues:

  1. Width of the Your Message fields does not match with other fields
  2. The position of the Send button is not as we want it.

In this article we’ll be demonstrating how to change the style of this form, using HTML and CSS, to meet particular requirements.

The appearance of the default CF7 form on your WordPress website will depend on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

The Form Process

Forms are a common part of many websites and are a very powerful tool for interacting with users. They provide an easy way for visitors to your website to start a conversation with you about their particular requirements.

CF7 forms are based firmly on the more general HTML form process

While the CF7 plugin makes it quick and easy to create forms with little or no knowledge of HTML, Contact Form 7 forms are based firmly on the more general HTML form process – see http://www.w3.org/TR/html401/interact/forms.html.

HTML includes a number of elements which are specifically designed for use in forms – see http://www.w3schools.com/html/html_forms.asp. The CF7 plugin provides support for most of the commonly used HTML form elements, including some recently added new HTML5 elements.

Form appearance depends on the HTML form elements used and the CSS styling applied

The appearance of each CF7 form depends on the HTML form elements used and the CSS styling applied to these elements in your current WordPress theme.

HTML + CSS = FORM

HTML for CF7 Form

HTML for CF7 Form

CSS for CF7 Form

CSS for CF7 Form

In any form the HTML provides the form content and layout (structure) of the form while the CSS controls the forms appearance and presentation (style).

HTML – form content and layout (structure)
CSS – form appearance and presentation (style).

HTML

The HTML in each CF7 form is created by the CF7 plugin based on information supplied by you in the Form section on the CF7 interface.

Any HTML elements added by you in the Form section on the CF7 interface are combined with HTML generated by the CF7 plugin.

HTML (supplied by you) + HTML (added by the CF7 plugin) = FORM Content & Layout (structure)

Standard HTML Form Elements

The default Contact Form 7 form uses paragraph elements (<p>Paragraph Content</p>) as the basis for the form. While this is probably the simpliest way to create a form, it has a number of shortcomings, which we intend to discuss in further future articles.

You can in fact use any HTML elements you want in the Form section on the CF7 interface and this is a key part of building CF7 forms that match your functional and appearance requirements.

With practice you can learn how to create increasingly complex CF7 forms by combining your HTML elements with those added automatically by the CF7 plugin.

HTML code + CF7 Tags in CF7 Form area

The box below shows the content of the Form section of the CF7 interface for the default CF7 form.

<p>Your Name (required)<br />
    [text_ your-name]</p>
<p>Your Email (required)<br />
    [email* your-email] </p>
<p>Subject<br />
    [text_ your-subject]</p>
<p>Your Message<br />
    [textarea your-message] </p>
<p>[submit "Send"]</p>

As you examine this code you should notice that it includes:

  • Standard HTML Elements – <p>Your Name (required)<br />
  • CF7 Tags – [email* your-email]

The standard HTML Elements you add in this section are output largely unchanged by the CF7 plugin. CF7 then uses the CF7 Tags to create fully functioning standard HTML elements which can include a number of additional HTML attributes.

If you are not sure how Contact Form 7 uses CF7 Tags you can read all about them at Contact For 7 Tag Syntax.

Completed HTML code in CF7 Form

The box below shows the complete HTML code generated on the actual website, based on information supplied by you in the Form section on the CF7 interface and the additional HTML code added by the CF7 plugin.

&lt;div id=&quot;wpcf7-f235-p1192-o1&quot; class=&quot;wpcf7&quot;&gt;&lt;form novalidate=&quot;novalidate&quot;
  class=&quot;wpcf7-form&quot; method=&quot;post&quot; action=&quot;/example.com/styling-contact-form-7-forms/
  #wpcf7-f235-p1192-o1&quot;&gt;
&lt;div style=&quot;display: none;&quot;&gt;
&lt;input type=&quot;hidden&quot; value=&quot;8&quot; name=&quot;_wpcf7&quot;&gt;
&lt;input type=&quot;hidden&quot; value=&quot;3.4.1&quot; name=&quot;_wpcf7_version&quot;&gt;
&lt;input type=&quot;hidden&quot; value=&quot;wpcf7-f235-p1192-o1&quot; name=&quot;_wpcf7_unit_tag&quot;&gt;
&lt;input type=&quot;hidden&quot; value=&quot;1cc9dc2c57&quot; name=&quot;_wpnonce&quot;&gt;
&lt;/div&gt;
&lt;p&gt;Your Name (required)&lt;br&gt;
  &lt;span class=&quot;wpcf7-form-control-wrap your-name&quot;&gt;
  &lt;input type=&quot;text&quot; aria-required=&quot;true&quot; class=&quot;wpcf7-form-control
  wpcf7-text wpcf7-validates-as-required&quot; size=&quot;40&quot; value=&quot;&quot; name=&quot;your-name&quot;&gt;&lt;/span&gt; &lt;/p&gt;
&lt;p&gt;Your Email (required)&lt;br&gt;
  &lt;span class=&quot;wpcf7-form-control-wrap your-email&quot;&gt;
  &lt;input type=&quot;email&quot; aria-required=&quot;true&quot; class=&quot;wpcf7-form-control
  wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email&quot;
  size=&quot;40&quot; value=&quot;&quot; name=&quot;your-email&quot;&gt;&lt;/span&gt; &lt;/p&gt;
&lt;p&gt;Subject&lt;br&gt;
  &lt;span class=&quot;wpcf7-form-control-wrap your-subject&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;wpcf7-form-control wpcf7-text&quot;
   size=&quot;40&quot; value=&quot;&quot; name=&quot;your-subject&quot;&gt;&lt;/span&gt; &lt;/p&gt;
&lt;p&gt;Your Message&lt;br&gt;
  &lt;span class=&quot;wpcf7-form-control-wrap your-message&quot;&gt;
  &lt;textarea class=&quot;wpcf7-form-control wpcf7-textarea&quot;
   rows=&quot;10&quot; cols=&quot;40&quot; name=&quot;your-message&quot;&gt;&lt;/textarea&gt;&lt;/span&gt; &lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;submit&quot; class=&quot;wpcf7-form-control wpcf7-submit&quot;
  value=&quot;Send&quot;&gt;&lt;img class=&quot;ajax-loader&quot; src=&quot;http://buzztone.com.au/wp-content/plugins
 /contact-form-7/images/ajax-loader.gif&quot; alt=&quot;Sending ...&quot; style=&quot;visibility: hidden;&quot;&gt;&lt;/p&gt;
&lt;div class=&quot;wpcf7-response-output wpcf7-display-none&quot;&gt;&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;

Take a moment to compare these two bits of code and notice where the information from the Form section of the CF7 interface has made it into the HTML on the actual website.

If you unable to understand easily what is going on in the code included in these two boxes, you probably don’t have adequate skills to change the style of CF7 forms, without at least some external support or advice.

In that case you should continue to learn what you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that.

CSS classes & ids generated by CF7

You may notice that Contact Form 7 adds a number of CSS classes & ids to the individual HTML form elements – for example:

  • <div> id=”wpcf7-f8-p275-o1″ class=”wpcf7″ > – <div> for the complete form which is given a unique id
  • <span> class=”wpcf7-form-control-wrap your-name”> … </span> – inline element which wraps each text field

These are added to allow users, skilled at using HTML and CSS, to style their CF7 forms to their particular requirements.

Target CF7 classes & ids within your CF7 forms

It makes sense for you to target these individual CSS classes & ids within your CF7 forms. Use CSS inheritance to ensure that your CSS changes don’t inadvertently affect other elements on your website.

WordPress theme developers also can use these CSS classes & ids to build support for the CF7 plugin within their theme. As one of the most popular plugins in WordPress, with over 14 million downloads, it makes sense for theme developers to do this.

You can also give your HTML form elements individual classes & ids within the CF7 tags in the Form section of the CF7 interface. This can be very useful when you have number of elements you want to style the same way.

CF7 tag with ID & Class

CF7 tag with ID & Class

Use Firebug or Chrome Dev Tools to examine your CF7 form

At this point you should use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.

Use one of these tools to explore all the HTML form elements in your CF7 form and see how each element is being styled in detail by the CSS in your current WordPress theme. In particular take note of the various style sheets that are contributing to the final style used and how individual style elements are being overwritten (or not) by the CSS hierarchy.

Once you understand how the HTML and CSS is configured in your CF7 form, you can begin to plan the CSS changes you need to change the appearance of the form to suit your requirements.

You will need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail to follow along in this article.

If that description does not fit you, you can learn about Firebug or Chrome Dev Tools and come back to this article when you’ve done that..

CF7 Form Structure

We used Firebug to produce the following diagram which shows the overall structure of the default CF7 form we are using in this article.

The diagram shows how each element of the form is created using standard HTML form elements and how those elements are arranged in relation to each other.

With experience, using Firebug or Chrome Dev Tools should give you all the information you need to change the style of yor CF7 forms quickly and easily, but it may definately help you initially to produce a hand drawn paper sketch similar to this diagram.

CSS

The appearance of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

Default CF7 CSS style

There is a common misconception that the CF7 plugin controls the appearance of CF7 forms though the plugins CSS style sheets.

In truth the Contact Form 7 plugin uses only very minimal CSS styling to allow CF7 forms to blend in with most websites. For a listing of complete style sheet used by the CF7 plugin see Default CF7 CSS style.

CSS in your current WordPress theme

The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

To change the appearance of your CF7 forms to suit your requirements, you will need to:

  1. Understand CSS styling being applied to standard HTML form elements in your CF7 forms;
  2. Adjust the CSS used by your current theme for these HTML form elements.

For some reason many WordPress themes do not provide CSS styling for standard HTML form elements. We regard this as poor practice and always look closely at how a theme styles standard HTML form elements when selecting themes.

Importantly if your theme neglects to provide appropriate CSS for these standard HTML form elements then the appearance of your form will fall back to that provided by default by the browser – which can be different in different browsers.

Use a Child Theme to make changes to your CF7 forms CSS

The most common and preferred method to makes changes to CF7 form styling is to create a Child Theme.

Make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.

The style.css file of the child theme usually imports all styling from the parent theme by including the following CSS code at the top of the child theme’s style.css file.

/* Import Parent Theme */
@import url('../parent-theme/style.css');

Any CSS changes you need to alter the appearance of our CF7 forms are added below this. Due to the CSS loading heirachy, any CSS changes made here will overwrite styles previously set in the parent theme.

For a simple explanation of WordPress Child Themes see http://wplift.com/customise-wordpress-child-theme.

Targeting CSS changes to CF7 forms

When making CSS changes you want to make sure that your CSS changes don’t inadvertantly effect other elements on your website.

The preferred way to do this is to use CSS inheritance to target the relevant HTML elements within your CF7 forms only.

For CF7 forms you have several ids & classes which can be used to give you the necessary targeted inheritance:

  • .wpcf7
  • .wpcf7-form
  • .wpcf7-form-control
  • .wpcf7-form-control-wrap
  • .wpcf7-text
  • .wpcf7-email
  • .wpcf7-textarea
  • .wpcf7-submit

For example you can use the class .wpcf7-form to change the appearance of all HTML input text elements within the default CF7 form only:

.wpcf7-form input { 
	background: #fff; 
	border: 1px solid #bbb; 
	color: #4F4F4F; 
}

To change the background colour of the Send button when the mouse pointer hovers over the button:

.wpcf7-form input:hover[type=&quot;submit&quot;] { 
	background:#4f2a0f; 
	cursor:pointer; 
	color:#fff; 
}

Targeting Specific CF7 Forms

Each CF7 form has a unique id which can be targeted in your CSS changes – see Styling a Specific Contact Form 7 Form for detailed instructions on how to do this.

Using CSS to change the appearance of the default CF7 form

Using the techniques described in this article, we can use the following CSS to change the appearance of the default CF7 form.

.wpcf7-form {
	background:#dcc8a5; 
	border:2px solid #f6efdf; 
	border-radius:7px; 
	width:345px;
	padding: 10px 20px; 
	margin-bottom:10px; 
}
 
.wpcf7-form input,
	#wpcf7-f235-p1277-o2 .wpcf7-form textarea{ 
	background:#f6efdf; 
	border:3px solid #ccb58c; 
	border-radius:7px;
	width:300px;
    margin: 4px 0 8px 0;
    padding: 5px 7px;
	color: #4f4f4f;
    font-size: 14px;
    vertical-align: middle;
}
 
.wpcf7-form p { 
	color:#4f2a0f; 
	margin-top:10px; 
	margin-bottom:10px; 
}
 
.wpcf7-form .wpcf7-submit { 
	background:#4f2a0f;
	border-radius:7px;	
	cursor:pointer; 
	width:100px;
	margin:7px 0;
	padding: 5px 15px;
	color:#fff; 
}

Using the changed CSS given above, the default CF7 form now looks as shown below:

Your Name (required)

Your Email (required)

Subject

Your Message


You can as practice use Firebug or Chrome Dev Tools to see how we’ve styled this form.

Do you have something you think might help others on this issue

This page is still a Work in Progress. We add more information as we become aware of other issues and solutions via the CF7 support forum.

If you have something you think might help others on this issue, you can use the CF7 form below to contact us.

Please note that anything that looks like a request for support or help will be ignored.

Help others on this issue



  1. Input this code: captcha
    (This helps us confirm you are real person and not a bot trying to crack our website)

(Mandatory fields marked * )


Of course this form is made using Contact Form 7 – use Firebug or Chrome Dev Tools to see how we’ve built it.

WordPress in Numbers

WordPress in Numbers Infographic 2013

Contact Form 7 Email Issues

Though the Contact Form 7 (CF7) plugin successfully sends millions of emails every day, there are a host of issues that can delay or stop emails on both the sending and receiving ends of a typical email.

This article was set up to help people, who are having trouble sending and receiving emails from CF7, solve their problems.

Contact Form 7 successfully sends millions of emails every day

Emails from CF7 work flawlessly, without any effort, for most people

We ourselves have never had a problem sending or receiving emails from Contact Form 7. Its always worked flawlessly, on a large number of websites, on a few different servers, with no need for any changes to the default setups. It just works and always has.

We believe most users of CF7 have the same experience. CF7 having over 19 million downloads (currently around 15,000 per day), indicates that a lot of people are successfully sending emails from CF7.

But not for everyone – emails don’t work easily for some CF7 users

If you spend some time in the CF7 support forum you will see a lot of posts from people who do have problems with sending our receiving emails from Contact Form 7.

Contact form is not working …
… form not sending
Refuses to send email … etc.

The important point to note is that the sending and receiving of emails depends heavily on both the server where your WordPress installation is hosted and the email configuration of the local computer where the emails are supposed to be received.

If you are having CF7 email problems, you will need to investigate this issue in detail for your particular local configurations. You have our sympathy, this can be a difficult and time consuming task and you may not, in the end, get it to work.

BUT … it ain’t the plugin that is causing your problems. The plugin works!

Please try to keep that in mind as you work through some of the possible causes and solutions given below.

Tl:dr (too long; didn’t read) version

  1. Test if your WordPress installation is able to send emails
  2. Hosting Issues
  3. Alternatively – try to configure email using SMTP
  4. Ensure proper return address is used
  5. Your email may be treated as spam
  6. Use a CF7 Submission Storage Plugin
  7. Plugin or Theme Conflicts
  8. JavaScript Conflicts
  9. Yahoo DMARC Issue

Sending

Contact Form 7 uses the standard recommended methods used to send emails in WordPress.

The following list contains items that we have found commonly lead to email sending problems with the CF7 plugin (and WordPress in general). We suggest that people work through this list from top to bottom to try to solve their particular email sending issue.

If you are unable to send emails from the CF7 plugin, it is likely that you are unable to send emails from WordPress in general.

You need a functioning mail server

If you are trying to send emails from any WordPress installation, you will need to make sure you have a functioning mail server setup there.

Note: Local installs (using MAMP, WAMP, XAMPP etc.) often don’t have this capability. Trying to test CF7 email functionality on a local WordPress installation with no mail server capability appears to be a common mistake.

Test if your WordPress installation is able to send emails

Try going through the “forgot password” function on wp-login.php.

lost-password

Do you get the email? If you don’t you will need to rectify this.

The WordPress Codex gives some guidance on this at http://codex.wordpress.org/FAQ_Troubleshooting#E-mailed_passwords_are_not_being_received

Contact Form 7 uses wp_mail to send emails. Most quality WordPress hosting will generally support this without the need for any special configuration.

wp_mail is based on the standard PHP mail() function, which uses sendmail. No account information is needed.

If you are a comfortable working with PHP, you can check if wp_mail is functioning by following this article – http://butlerblog.com/2012/09/23/testing-the-wp_mail-function/.

Note: For wp_mail to work, the settings SMTP and smtp_port (default: 25) need to be set in your php.ini file.

Hosting Issues

Some hosting providers require special settings to be applied to your WordPress installation in order to send emails from WordPress. You may need to contact your hosting provider and work with them to ensure emails are being sent correctly from your WordPress installation.

Some hosts don’t support PHP’s mail function. They often claim it’s to reduce spam since the PHP mail() function can be used to send email defining the from address as whatever you want without having to authenticate.

You should be able to get confirmation from your hosting provider that php mail() is functioning correctly from your hosting account.

Alternatively – Try to configure email using SMTP

If your hosting provider does not support wp_mail and the standard PHP mail() function, you can try to configure email sending from WordPress using SMTP (another type of mail service).

WordPress supports SMTP mail but this needs to be configured separately via the admin area of WordPress.

The following plugins can be used to setup SMTP on your WordPress site:
http://wordpress.org/plugins/configure-smtp/
http://wordpress.org/extend/plugins/wp-mail-smtp/

WP Mail SMTP reconfigures the wp_mail() function to use SMTP instead of mail() and creates an options page that allows you to specify various options. You may need to contact your hosting provider to get detailed information on the option settings required.

With SMTP you can also send emails via an external email provider such as Gmail, Zoho Mail, Outlook or some other online email service, and send outgoing email through their SMTP server rather than from the email service on your WP hosting.

See Install WP Mail SMTP to send all emails through an external SMTP server for some detailed instructions on using SMTP via an external email provider.

Note: When using SMTP you need to authenticate, so there has to be a real email address that the emails are coming from.

Most users on quality WordPress hosting will not need to use SMTP. You should avoid using SMTP if possible as using SMTP can contribute to email authentication issues.

Ensure Proper Return Address is Used

The From: address used in the Mail section of the CF7 interface can be important in determining if an email is able to be sent via the CF7 plugin.

Some hosting requires that any emails being sent via WordPress are from a valid email address on your local domain.

If you leave the From: address in the Mail section of the CF7 interface empty, then by default, the WordPress mailer fills in the email’s From: field with wordpress@yourdomain.com and the email’s From: name as WordPress.

If you setup wordpress@yourdomain.com as a real e-mail address on your account, your host should pass the email on for delivery. In fact it will probably send your mail as long as yourdomain.com is setup to send and receive mail, even if wordpress is not a valid mail box.

But if you set you real email address as the From: address (and it’s something like wpgod@gmail.com), the mail may not send because gmail.com is not a domain handled by the mail server.

To use an email address like wpgod@gmail.com you may need to setup SMTP to send emails via an external email provider. See Install WP Mail SMTP to send all emails through an external SMTP server for some detailed instructions on using SMTP via an external email provider.

There is a particular problem with using Yahoo email addresses as the From: email address – see Yahoo Issue.

When using SMTP you need to make sure any emails are from real a email address

With SMTP you typically need to authenticate – so you will need to make sure that any emails sent via the CF7 plugin are coming from a real email address.

This can be significant problem if you collect the From: email address in your CF7 form.

Using the default From: [your-name] <[your-email]> can cause problems

Using the default From: [your-name] <[your-email]> is very useful. It means you can simply hit reply to answer emails that you receive from people filling in your form.

But you need hosting that allows any email to be used as the From: email. Lots of quality hosting does that, but some hosts don’t (for various reasons), and this can definitely cause problems with sending emails.

For some hosts the From: email address needs to be a valid email on that domain. While we would never use hosting that imposes that restriction, it’s inevitable that some people will have hosts that do.

In that case you may need to can avoid using a customer input Email address as the From address and use something like From: noreply@yourdomain.com.

Then you can include the collected email address as a mailto: link in the body of the email as follows:

include-mailto-link

There is a further problem when users use a Yahoo email address – see Yahoo Issue.

Quote from the CF7 Support Forum:

I was having the very same problem, but only recently. Turns out that the new Dreamhost spam policy was the problem. Since it’s technically “spoofing” the user’s address to send email, Dreamhost no longer allows it.

http://wiki.dreamhost.com/Sender_Domain_Policy_and_Spoofing

Adding Additional headers can help

For less restrictive hosts, another possible solution is to add two additional email headers — Sender and Reply-To – in the Additional headers: field in the Mail section of the CF7 interface, like so:

Sender: noreply@yourdomain.com
Reply-To: [your-name] <[your-email]>

mail-contact-form-7-email-headers

These headers will inform the receiving mail server that the email was sent by your website on behalf of the sender.

Your email may be treated as spam

Your email message may have been routed to a spam folder or even worse, simply discarded as malicious. Emails can be considered spam for a whole host of reasons and get rejected at many points in the email process in addition to your spam folder.

This is usually due to email headers (in particular the From email address used) or email content. Adding Additional headers can help in this regard.

See also Contact Form 7 not Sending Emails which explains in more detail the main reasons for failed Contact Form 7 email deliveries and offer some possible solutions.

There is a general problem with Yahoo email addresses – see Yahoo Issue.

There are also a couple of measures you can use to convince recipient’s mail servers that your message is legitimate and should be delivered as addressed. See WordPress Codex – http://codex.wordpress.org/FAQ_Troubleshooting#E-mailed_passwords_are_not_being_received

Use a CF7 Submission Storage Plugin

Many experienced WP users use a submission storage plugin like Contact Form DB or Contact Form 7 Storage to save all your CF7 form submits to the WP database. These plugins provide a robust record of all form submissions even when things go a little wrong.

Our experience is that the submission storage plugins are very robust and rarely fail to save a CF7 form submit. They appear to save a CF7 form submit even if the email is not sent due to a Javascript Conflict or unallowed From: email address.

Contact Form 7 Storage - never miss a single business lead

Plugin or Theme Conflicts

Plugin and theme conflicts are unfortunately a fact of life with WordPress. As one of the most popular plugins in the WordPress Repository, it’s reasonable to assume that CF7 is written so that it does not cause conflicts with other plugins and themes.

However there are many plugins and themes that are not so well written. Like many other popular plugins, CF7 is frequently reported as not working in the WordPress Forums when the real cause is conflict from another theme or plugin – see Plugin or Theme Conflicts for a detailed explanation of this issue.

JavaScript Conflict

Contact Form 7 is a good WordPress community member in regards to it’s use of JavaScript and plugs correctly into the WordPress architecture.

Spinning ArrowHowever there are many plugins and themes that are not so well written and a host of CF7 email problems can be due to a JavaScript conflict with either your current WordPress theme or one of the other plugins you are using.

A spinning arrow continuing to spin after submitting a CF7 form, is a common symptom of a JavaScript conflict.

See JavaScript Conflict Problems to look at this issue in more detail.

Contact the developer of the plugin or theme developer causing the conflict

If you identify a conflict with a particular plugin or theme, you could write to the plugin or theme developer and suggest they might have a possible conflict with CF7.

CF7 is one of the most popular plugins in the WordPress Repository, so it makes sense for developers to deal with any potential conflicts.

Also if a plugin or theme conflicts with CF7, it probably also conflicts with many other plugins. It’s generally a sign of a poorly coded theme or plugin and one that people should avoid using.

Contact Form 7 didn’t install or update correctly on your site

It is always possible that Contact Form 7 doesn’t install or update correctly on your site. It’s a general problem with WordPress due to the unreliability of internet connections. Delete the plugin folder at wp-content/plugins/contact-form-7/ and install the plugin again.

Yahoo Issue

There is a general problem with using Yahoo email addresses as the From: email address. See Yahoo Issue.

Bug in WordPress 3.6 – Qmail based Hosts only

There is a bug in the WordPress 3.6 release that causes Contact-7 forms to fail to be emailed – but it only affects those hosts using Qmail based email systems. See
Bug in WordPress 3.6 – Qmail based Hosts only.

Useful Links

http://www.callum-macdonald.com/code/wp-mail-smtp/
WordPress, Contact Forms, the new Anti Spam Policy and why it sucks
Fix Contact Form 7 not working with Dreamhost
When Plugins Collide: Best Practices For Dealing With WordPress Plugin Conflicts
Conflict Diagnosis Guide for WordPress plugins
Using Your Browser to Diagnose JavaScript Errors

Receiving

There are a host of issues that can delay or stop emails on the receiving end of a typical email. You will need to investigate this issue in detail for your particular local configuration.

Quote from the CF7 Support Forum – If anyone has ‘problems’ in not receiving emails, it’s most certainly not this plugin, they should check their settings and their junk folders.

Emails are delivered late

Most emails are delivered within a few minutes, but emails can sometimes be delayed while in transit due to problems on the sender’s mail server, heavy Internet traffic, or routing problems. On rare occasions, delays can last for several hours or more.

The sender’s address is blocked

The Blocked Addresses feature in some Mail systems allows you to create a list of addresses that you don’t want to receive mail from. Mail coming in from one of these senders will neither arrive nor bounce, but will simply be discarded. Check your blocked addresses list and make sure that email address you’re using is not blocked.

You’ve enabled mail forwarding

Is the email address you’re using set to be forwarded to another email address.

Have you set up filters?

You might have set up filters which caused the email to be sent to the Trash folder or to another folder within your Mail account.

Useful Links

Troubleshooting common issues with email
Email Server Test

Do you have something you think might help others on this issue

This page is still a Work in Progress. We add more information as we become aware of other issues and solutions via the CF7 support forum.

If you have something you think might help others on this issue, you can use the CF7 form below to contact us.

Please note that anything that looks like a request for support or help will be ignored.

Help others on this issue



  1. Input this code: captcha
    (This helps us confirm you are real person and not a bot trying to crack our website)

(Mandatory fields marked * )


Of course this form is made using Contact Form 7 – use Firebug or Chrome Dev Tools to see how we’ve built it.

WordPress in Google Trends

We build all our websites using WordPress – the free open source content management system (CMS) – that is revolutionising the way websites are built all over the world every day. We made the decision to focus exclusively on WordPress powered websites in 2009 and are confidient we’ve made the right choice for both ourselves and our clients.

Web design and development is of course a very rapidly changing field, so we devote a considerable part of our working time each week to keeping up with the latest trends happening and learning these new skills.

One of the tools we often use in selecting which web design and development tools to learn is Google Trends. This, we’ve found, gives a ready guide on how many people are using alternative web technologies and which tools are growing strongly.

In the following Google Trends charts we’ve compared WordPress to other Content Management Systems to show how WordPress is increasingly dominating the building of websites.

WordPress versus other Open Source Content Management Systems

Notes: Joomla after growing very rapidly initially is now increasingly losing support.

WordPress | Joomla | Drupal

WordPress versus Paid Content Management Systems

Notes: It’s hard to see the paid CMS results because they are so small in comparsion to WordPress.

WordPress | ExpressionEngine | LightCMS

WordPress versus any other Content Management System

You can use this Google Trends Report to compare WordPress with any other Content Management System (CMS) that is being suggested to you.

Just click on View full report in Google Trends and add the name of the relevant CMS below WordPress.

buzztone - we make websites that turn up the volume

WordPress versus older ways to build websites

Notes: Both Dreamweaver & ColdFusion have shown steady declines as WordPress has grown.

WordPress | Dreamweaver | ColdFusion

WordPress versus Free Website Builders

Notes: All are very small compared to WordPress and showing significantly less growth.

WordPress | Wix | Weebly | Squarespace

WordPress versus other Blogging Platforms

Notes: WordPress overtook Blogger some time ago but is now being dominated by Tumblr. Tumblr’s growth has stalled since it was taken over by Yahoo

WordPress | Blogger | Tumblr

Built using WordPress

WordPress

We build all our websites using WordPress – the free open source content management system (CMS) – that is revolutionising the way websites are built all over the world every day.

Why WordPress?

We specialize in WordPress websites because of the exceptional value it provides our clients. WordPress is a full-scale content management system (CMS) and is rapidly becoming by far the most popular platform for building a website.

WordPress is actively updated and expanded upon by a group of dedicated core developers and huge number of community volunteers. With thousands of themes and plugins available, WordPress offers the ability to transform your site into almost anything you can imagine.

Content Management System (CMS)

A content management system is a platform for managing all of the content you want to include in your website – images, blog posts, text, video, links, social media, etc.

Using a CMS means you can change, update and maintain website yourself … so you don’t have to keep going back to your website designer to get anything changed.

There are a lot of content management systems you can use to build a full-scale website, but we’ve found that WordPress is the best and most user-intuitive.

Lots of people around the world agree with us. Over 60 million people have chosen WordPress to power their websites – see WordPress in Google Trends.

WordPress