Yahoo DMARC Issue

There is a general problem with Yahoo email addresses in Contact Form 7 forms (and lots of other applications) due to changes made by Yahoo to there DMARC security policy.

In April 2014, Yahoo published a DMARC “p=reject” record, telling all receiving email servers to reject emails from yahoo.com addresses that don’t originate from a Yahoo server.

While this was done to protect Yahoo users from increasing email spam, the downside is there are a lot of people using Contact Form 7 who effectively send mail from a Yahoo email address, but not through Yahoo’s servers.

Gmail and many others are now rejecting emails from any yahoo.com address that originate from the numerous WordPress installs not on Yahoo servers.

You can use the following solutions to make Contact Form 7 DMARC-compliant forms which work with the increasing number of companies like Yahoo that are using DMARC rules the block forms submitted using Yahoo email addresses in the “From” field.

From: email address

As long as Yahoo keeps their DMARC reject policy in place (there has been no indication that they will remove it), you can no longer send mail from Contact Form 7, using an Yahoo address, unless you send the mail directly from a Yahoo server.

If you have WordPress installed on anything other than a Yahoo server, you will not be able to use a Yahoo Email address in the From: address field in the Mail section of the CF7 interface.

Yahoo recommends that you switch to sending mail from your own domain. You should use something like noreply@yourdomain.com or any other valid email address on the same domain as your WordPress install.

User email address

A further problem arises if you use the default From: [your-name] <[your-email]> to collect the form user’s email address and then use that as the From: email address in CF7.

If a user happens to have a Yahoo email address, it is highly likely that the email will be rejected under this DMARC policy and you will as a result not receive any CF7 from submissions from people using Yahoo email addresses.

The recommended solution is to set the “From” address to your site’s email address and the “Reply-to” address to the form user’s address.

1. In the Mail section for the form, put an email address from your domain in the “From:” box so it looks like this:

[your-name] <noreply@yourdomain.com>

In this case, we are using a forwarder called “noreply,” but it can be any legitimate forwarder or email account on the hosting domain.

2. In the Additional headers box for the form, put this in:

Reply-To: [your-email]

yahoo-email-address

This method uses an email based on the sending domain as the “from” address to make the email DMARC-compliant, but leaves the user’s email in the header as a reply-to address so that you can click ‘Reply’ in your email client and reply to the inquiry.

Thanks to linux4me2 for providing this method at http://wordpress.org/support/topic/yahoo-dmarc-fix

Back to Contact Form 7 Email Issues

Related Links:

From Yahoo

http://yahoomail.tumblr.com/post/82426900353/yahoo-dmarc-policy-change-what-should-senders-do

https://help.yahoo.com/kb/postmaster/yahoo-dmarc-policy-sln24050.html

https://help.yahoo.com/kb/SLN24016.html


https://help.yahoo.com/kb/postmaster/error-quot-message-accepted-policy-reasonsquot-sending-email-yahoo-sln7253.html

From Others

http://www.pcworld.com/article/2141120/yahoo-email-antispoofing-policy-breaks-mailing-lists.html

http://blog.mailchimp.com/yahoo-changes-may-affect-your-deliverability/


http://blog.returnpath.com/blog/christine-borgia/all-about-yahoos-dmarc-reject-policy

http://www.fastsecurecontactform.com/yahoo-com-dmarc-policy


http://wordpress.org/support/topic/yahoo-dmarc-fix

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

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.

Back to Contact Form 7 Email Issues

Styling a Specific Contact Form 7 Form

Each CF7 form has a unique id which can be targeted in your CSS changes.

<div id="wpcf7-f47-p339-o1" class="wpcf7">
<form class="wpcf7-form" novalidate="novalidate" enctype="multipart/form-data" method="post" action="/forms/bogart/#wpcf7-f47-p339-o1">
<div style="display: none;">
<input type="hidden" value="47" name="_wpcf7">
<input type="hidden" value="3.4.1" name="_wpcf7_version">
<input type="hidden" value="wpcf7-f47-p339-o1" name="_wpcf7_unit_tag">
<input type="hidden" value="e6484ca73a" name="_wpnonce">
</div>

Use Firebug or Chrome Dev Tools to find this unique id in your CF7 form. Then target only this CF7 form using CSS heirachy as follows:

#wpcf7-f47-p339-o1 {
	font-family: Verdana;
}

#wpcf7-f47-p339-o1 .wpcf7-form fieldset { 
	padding:10px; 
	background:#fff; 
	margin-bottom:10px; 
	border:1px solid #000;
}

Back to Styling Contact Form 7 Forms

Default CF7 Form in Firebug

Default CF7 form in Firebug-02

Back to Styling Contact Form 7 Forms

Default CF7 CSS style

The Contact Form 7 plugin uses very minimal CSS styling to allow CF7 forms to blend in with most websites.

Default CF7 CSS style:

div.wpcf7 {
	margin: 0;
	padding: 0;
}
 
div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
}
 
div.wpcf7-mail-sent-ok {
	border: 2px solid #398f14;
}
 
div.wpcf7-mail-sent-ng {
	border: 2px solid #ff0000;
}
 
div.wpcf7-spam-blocked {
	border: 2px solid #ffa500;
}
 
div.wpcf7-validation-errors {
	border: 2px solid #f7e700;
}
 
span.wpcf7-form-control-wrap {
	position: relative;
}
 
span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	background: #fff;
	border: 1px solid #ff0000;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
}
 
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;
}

Back to Styling Contact Form 7 Forms

CF7 Form Structure

Default CF7 Form

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

CF7_Form_Structure_A4
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.

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 may notice the CSS classes & ids that Contact Form 7 adds 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

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.

Back to Styling Contact Form 7 Forms

CF7 Form Section

CF7-Form-Section-03
Back to Styling Contact Form 7 Forms

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.

JavaScript Conflict Problems

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

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

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

This typically indicates that Contact Form 7’s JavaScript is not completing due to a problem in some other JavaScript loaded on that page.

If the JavaScript added by one other plugin has an error, the execution of the code will generally stop. Subsequent scripts loaded by any other plugin or the theme will not be run and the functionality breaks.

Step by step approach to finding JavaScript Conflicts

The most common and generally easiest way to find JavaScript Conflicts is to disable temporarily all JavaScript on your site, other than that from Contact Form 7, and then add back items until you get the problem again.

1. Switch temporarily to a WordPress default theme (Twenty Eleven etc.) and see if the problem goes away.

If it does, you’ve most likely got a JavaScript conflict with your current WordPress theme.

If switching to default theme doesn’t help it could be one of the plugins you are using that is causing the problem.

2. Disable all plugins other than Contact Form 7

If doing that solves the problem, you can then add back each item – one by one, until you find the real cause of the problem.

You will typically need to disable, temporarily, ALL JavaScript, other than that from Contact Form 7, including anything in your theme (switch temporarily to a default theme), if you want to get to the source of the problem.

Use Firebug or Chrome Dev Tools

You can also use Firebug or Chrome Dev Tools to try to find the cause of JavaScript conflicts with Contact Form 7. See Using Firebug or Chrome Dev Tools to examine your website for JavaScript Conflicts.

Remember that a problem in one script can cause issues in another. For example, some jQuery errors can stop jQuery processing any more script, which can make the culprit hard to find. A jQuery error in one of your plugins or your themes javascript files can stop jQuery processing before it gets to the CF7 script.

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 can be a sign of a poorly coded theme or plugin and one that people should avoid using.

You can stop Contact Form 7 loading any JavaScript

As a temporary stop gap measure you may consider stoping Contact Form 7 loading any JavaScript.

When the value of WPCF7_LOAD_JS is set to false (default: true) in wp-config.php, Contact Form 7 does not load the JavaScript. You can set the value of this constant in your wp-config.php like this:

define(‘WPCF7_LOAD_JS’, false);

See http://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/

You will lose all of CF7’s Javascript functionality and of course the real cause is the theme or other plugin which may be poorly written and perhaps something you should avoid using.

Useful Links

When Plugins Collide: Best Practices For Dealing With WordPress Plugin Conflicts
Conflict Diagnosis Guide for WordPress plugins
Using Your Browser to Diagnose JavaScript Errors

Back to Contact Form 7 Email Issues

Using Firebug or Chrome Dev Tools

You can use Firebug or Chrome Dev Tools to try to find the cause of plugin and theme conflicts with Contact Form 7. See Using Your Browser to Diagnose JavaScript Errors for some general guidance.

You will need to be skilled at using Firebug or Chrome Dev Tools to find what is causing your Javascript conflict and how to resolve it. If that description does not fit you, you can learn about these extremely useful developer tools at the following links.

https://getfirebug.com/wiki/
http://www.evotech.net/blog/2007/06/introduction-to-firebug/
http://www.youtube.com/watch?v=sHbYpl1XFiM
http://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
https://developers.google.com/chrome-developer-tools/

Remember that a problem in one script can cause issues in another. For example, some jQuery errors can stop jQuery processing any more script, which can make the culprit hard to find. A jQuery error in one of your plugins or your themes javascript files can stop jQuery processing before it gets to the CF7 script.

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.

Back to Contact Form 7 Email Issues

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.

It appears that WordPress used a few month old version of class-phpmailer.php, one where a bug had been introduced for Qmail based email systems. The authors of phpmailer.php had already issued an update for the file, but WordPress issued the 3.6 upgrade with the older class-phpmailer.php version 3.5.4 (version 3.5.5 had already been fixed).

In any event the WordPress core developers are now aware of the issue and have already indicated that a more current version of class-phpmailer.php (one that is fixed for Qmail) will be included when WordPress 3.7 is released.

Meanwhile to correct the issue with the Qmail bug:

  1. Go to this link- https://github.com/PHPMailer/PHPMailer/blob/master/class.phpmailer.php
  2. Copy the actual file contents starting with:
  3. Then replace the contents of your wp-includes/class-phpmailer.php with the code from the above file - that should correct the issue if related to the Qmail bug.

NOTICE!!! the name of the file is class(dash)phpmailer.php, not (dot) as it appears in the second line comment of the source.

Source - http://wordpress.org/support/topic/wp-36-doesnt-work-with-cf7. Thanks to Jack Armstrong for this information.

If you are experiencing problems sending emails, you might consider contacting your hosting provider to ask if they use the a Qmail based email system.

Back to Contact Form 7 Email Issues