Back to Styling Contact Form 7 Forms
Category Archives: Contact form 7
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 (allowing them to blend in with most websites). As it turns out, it’s not the ugliest thing in the world, but it’s not all that attractive either.
This article shows users, skilled at using HTML and CSS, how to style CF7 forms to their particular requirements.
- Default Contact Form 7 Form
- The Form Process
- HTML
- Standard HTML Form Elements
- HTML code + CF7 Tags in CF7 Form area
- HTML code on actual website
- Compare these two bits of code
- Use CSS classes & ids generated by CF7
- Use Firebug or Chrome Dev Tools to examine your CF7 form
- CSS
- Default CF7 CSS style
- Appearance of CF7 forms is controlled by CSS in your current WordPress theme
- Use a Child Theme to make changes to your CF7 forms CSS
- Targeting CSS changes to CF7 forms
- Using CSS to change the appearance of the default CF7 form
- Targeting Specific CF7 Forms
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 at – http://www.evotech.net/blog/2007/06/introduction-to-firebug/ or Chrome Dev Tools at – https://developers.google.com/chrome-developer-tools/ and come back to this article when you’ve done that.
Default Contact Form 7 Form
We use the default CF7 form (installed automatically on every install of the CF7 plugin) as the basis of this article.
The actual look of this default form 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 standard WordPress Twenty Eleven theme and the default Contact Form 7 form appears as follows:
The appearance of this default form 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 article we’ll be demonstrating how to change the style of this form, using HTML and CSS, to meet particular requirements.
The Form Process
HTML forms are a common part of many websites. While the CF7 plugin makes it quick and easy to create forms with little or no knowledge of HTML, CF7 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. CF7 provides support for most of the commonly used HTML form elements, including some recently added which some new HTML5 elements.
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
CSS for CF7 Form
HTML – form content and layout
CSS – form 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.
Click on image to open larger version
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 /> </p> <p>Your Email (required)<br /> [email* your-email] </p> <p>Subject<br /> </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 – ‘ text “your-name” ‘
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.
HTML code on actual website:
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.
HTML (supplied by you) + HTML (added by the CF7 plugin) = FORM Content & Layout
<div id="wpcf7-f8-p275-o1" class="wpcf7"><form novalidate="novalidate" class="wpcf7-form" method="post" action="/cf7trial.project.buzztone.com.au/development/styling-contact-form-7-forms/#wpcf7-f8-p275-o1">
<div style="display: none;">
<input type="hidden" value="8" name="_wpcf7">
<input type="hidden" value="3.4.1" name="_wpcf7_version">
<input type="hidden" value="wpcf7-f8-p275-o1" name="_wpcf7_unit_tag">
<input type="hidden" value="1cc9dc2c57" name="_wpnonce">
</div>
<p>Your Name (required)<br>
<span class="wpcf7-form-control-wrap your-name"
><input type="text" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" value="" name="your-name"></span> </p>
<p>Your Email (required)<br>
<span class="wpcf7-form-control-wrap your-email">
<input type="email" aria-required="true" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" value="" name="your-email"></span> </p>
<p>Subject<br>
<span class="wpcf7-form-control-wrap your-subject">
<input type="text" class="wpcf7-form-control wpcf7-text" size="40" value="" name="your-subject"></span> </p>
<p>Your Message<br>
<span class="wpcf7-form-control-wrap your-message">
<textarea class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="your-message"></textarea></span> </p>
<p><input type="submit" class="wpcf7-form-control wpcf7-submit" value="Send"><img class="ajax-loader" src="http://cf7trial.project.buzztone.com.au/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;"></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>
Compare these two bits of code:
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.
As you can see, Contact Form 7 adds a number of CSS classes & ids to the individual HTML form elements. These are added to allow users, skilled at using HTML and CSS, to style their CF7 forms to their particular requirements.
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.
Use CSS classes & ids generated by CF7:
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 12 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
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.
Default CF7 form in Firebug – Click on image to open a larger version
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 at – http://www.evotech.net/blog/2007/06/introduction-to-firebug/ or Chrome Dev Tools at – https://developers.google.com/chrome-developer-tools/ and come back to this article when you’ve done that.
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.
CF7 Form Structure:
We used Firebug to produce the following diagram which shows the overall structure if the default CF7 form we are using in this article.
Click on image to open larger version
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
Default CF7 CSS style:
These is a common misconception (particular among users with limited WordPress experience) 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.
Appearance of CF7 forms is controlled by 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:
- Understand what CSS styling is being applied to standard HTML form elements in your CF7 forms via the CSS of your current WordPress theme;
- Adjust the CSS used by your current theme for these HTML form elements.
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.
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.
For a simple explanation of WordPress Child Themes see http://wplift.com/customise-wordpress-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 most common and preferred method to makes changes to the CSS styling in your current WordPress is via a Child Theme.
For this article we have created a child theme based on Twenty Eleven. The style.css file of the child theme 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('../twentyeleven/style.css');
Any CSS changes that 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.
Targeting CSS changes to CF7 forms:
When making CSS changes, to give us the appearance we are looking for in our CF7 forms, we want to make sure that our 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 we have several ids & classes which can be used to give us the necessary targeted inheritance:
- .wpcf7
- .wpcf7-form
- .wpcf7-form-control
- .wpcf7-form-control-wrap
- .wpcf7-text
- .wpcf7-email
- .wpcf7-textarea
- .wpcf7-submit
For a list of ids & classes used by the CF7 plugin see CF7 CSS Classes
For example we 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="submit"] {
background:#4f2a0f;
cursor:pointer;
color:#fff;
}
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; padding:20px; border:2px solid #f6efdf; margin-bottom:30px; border-radius:7px; } .wpcf7-form input { background:#f6efdf; padding:5px 7px; border:3px solid #ccb58c; margin-bottom:8px; border-radius:7px; } .wpcf7-form textarea { background:#f6efdf; padding:5px 0px 5px 7px; border:3px solid #ccb58c; border-radius:7px; } .wpcf7-form p { color:#4f2a0f; margin-top:10px; } .wpcf7-form .wpcf7-submit { background:#4f2a0f; cursor:pointer; padding-left:15px; padding-right:15px; color:#fff; border-radius:7px; } |
Using the changed CSS given above, the default CF7 form now looks as shown below:
Targeting Specific CF7 Forms
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;
}
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:
- Go to this link- https://github.com/PHPMailer/PHPMailer/blob/master/class.phpmailer.php
- Copy the actual file contents starting with:
- 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.
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 http://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/ 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.
Javascript Conflict Problems
Contact Form 7 is a good WordPress community member in regards to it’s use of Javascript. It only loads it’s JavaScript where it is needed and only loads scripts required for the current page. It also plugs correctly into the WordPress architecture.
However 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.
Switch to a WordPress default theme 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.
Use Firebug or Chrome Dev Tools
Use Firebug or Chrome Dev Tools to try to find the conflict. See http://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/ 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.
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 (particularly by users with limited WordPress skill and experience) when the real cause is conflict from another theme or plugin – see http://wiki.simple-press.com/installation/troubleshooting/theme-conflicts/.
Step by step approach to finding Plugin & Theme Conflicts
1.) Disable all plugins other than CF7
a.) Does it work now? – Turn back on plugins one by one until you find the conflict
b.) You may need to clear the browser cache between each one
2.) Disable your current theme and load one of the WordPress Default themes
a.) Does it work now? – The problem is with your current selected theme
3.) With everything disabled, try (if you can) to correct the problem by reinstalling elements that may have become corrupted.
You may need to :
1.) Deactivate Contact Form 7 and completely delete it. Then re-install it into your WordPress instance.
2.) Reinstall your theme.
3.) Delete and reinstall the plugin causing the conflict.
4.) Re-upload your wp-content folder with a fresh copy.
Note: Any plugin that uses wp_mail and does not reset wp_mail_content_type back to ‘text/plain’ after sending a message can lead to unexpected problems with e-mails from WordPress.
Use 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 Firebug or Chrome Dev Tools to examine your website for possible Plugin or Theme Conflicts.
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 Email Issues – Rev 1
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 11 million downloads (currently around 10,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.
Note: 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 at the bottom of this page to contact us.
Please note however that anything that looks like a request for support or help will be ignored and deleted faster than you can imagine.
Tl:dr (too long; didn’t read) version
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.
- You need a functioning mail server
- Test if your WordPress installation is able to send emails
- Hosting Issues
- Alternatively – try to configure email using SMTP
- Ensure proper return address is used
- Your email may be treated as spam
- Plugin or Theme Conflicts
- Javascript Conflicts
- Contact Form 7 didn’t install or update correctly
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.
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.
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 the following email authentication issues.
Ensure Proper Return Address is Used
By default, the WordPress mailer fills in the From: field with wordpress@yourdomain.com and the From: name as WordPress. This is fine if this is a valid e-mail address.
For example, if your real e-mail is wordpress@yourdomain.com, your host should pass the email on for delivery. 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 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.
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.
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. There are a couple 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
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 (particularly by users with limited WordPress skill and experience) 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 Problems
Contact Form 7 is a good WordPress community member in regards to it’s use of Javascript. It only loads it’s JavaScript where it is needed and only loads scripts required for the current page. It also plugs correctly into the WordPress architecture.
However 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 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 didn’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.
Current 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://codex.wordpress.org/FAQ_Troubleshooting#E-mailed_passwords_are_not_being_received
http://joshbetz.com/2010/01/problems-getting-wordpress-emails
http://www.premiumpress.com/tutorial/wordpress-email-settings/
http://www.kriesi.at/support/topic/error-sending-mail-via-the-wordpress-twicet-theme-contact-page
http://butlerblog.com/2012/09/23/testing-the-wp_mail-function/
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
http://wiki.dreamhost.com/Sender_Domain_Policy_and_Spoofing
http://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/
http://wiki.simple-press.com/installation/troubleshooting/theme-conflicts/
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.
Error: Contact form not found.
Please note that anything that looks like a request for support or help will be ignored and deleted faster than you can imagine.
Contact Form 7 Email Issues – (Link Only)
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.
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 11 million downloads (currently around 10,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 at Contact Form 7 Email Issues.
BUT … it ain’t the plugin that is causing your problems. The plugin works!
Standard HTML form elements supported by CF7
Listing of standard HTML form elements supported by CF7
CF7 Form Section
<!-- Text Fields --> <fieldset> <legend>Text Fields</legend> <ol> <li> <label for="cf7s-text-01">text <em>(required)</em></label>[text 1="cf7s-text-01" 2="60/100" 3="id:item1a" 4="class:textfield" 5="akismet:author_url" 6="watermark" 7="default" language="*"][/text]</li> <li> <label for="cf7s-item2a">email</label>[email item2a]</li> <li> <label for="cf7s-item3a">url</label>[url item3a]</li> <ol class="singleline"> <li> <label for="cf7s-tel-01">tel</label>[tel cf7s-tel-01 15/]</li> <li> <label for="cf7s-tel-02">mobile</label>[tel cf7s-tel-02 15/]</li> </ol> <li> <label for="cf7s-item5a">textarea</label>[textarea item5a]</li> </ol> </fieldset> <p>Use paragraphs for text that is not a form field.</p> [submit "Submit - Text Fields"] <!-- Checkboxes, Radio Buttons, Dropdown Menu --> <fieldset> <legend>Checkboxes, Radio Buttons, Dropdown Menu</legend> <ol> <li> <label for=cf7s-checkbox-01">Checkboxes</label>[checkbox cf7s-checkbox-01 id:item1b class:checkbox "Item1" "Item2" "Item3" "Item4"]</li> <li> <label for=cf7s-radio-01">Radio Buttons</label>[radio cf7s-radio-01 label_first use_label_element "Item1" "Item2" "Item3"]</li> <li> <label for=cf7s-menu-01">Dropdown Menu</label>[select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"]</li> </ol> </fieldset> <p>Use paragraphs for text that is not a form field.</p> [submit "Submit - Checkboxes, Radio Buttons, Dropdown Menu"] <!-- Other Fields --> <fieldset> <legend>Other Fields</legend> <ol> <li> <label for="cf7s-number-01">Number (spinbox)</label>[number cf7s-number-01]</li> <li> <label for="cf7s-range-01">Number (slider)</label>[range cf7s-range-01]</li> <li> <label for="cf7s-date-01">Date</label>[date cf7s-date-01]</li> <li> <label for="cf7s-file-01">File upload</label>[file cf7s-file-01]</li> <li> <label for="cf7s-quiz-01">Quiz</label>[quiz cf7s-quiz-01 "Item1" "Item2" "Item3"]</li> <li> <label for="cf7s-acceptance-01">Acceptance</label>[acceptance cf7s-acceptance-01]</li> <li> <label for="cf7s-captcha-01">Captcha Image</label>[captchac cf7s-captcha-01]</li> <li> <label for="cf7s-captcha-01">Captcha Input</label>[captchar cf7s-captcha-01]</li> </ol> </fieldset> <p>Use paragraphs for text that is not a form field.</p> [submit "Submit - Other Fields"] |
HTML Output
<p><!-- Text Fields --></p> <fieldset> <legend>Text Fields</legend> <ol> <li> <label for="cf7s-text-01">text <em>(required)</em></label><span class="wpcf7-form-control-wrap cf7s-text-01"><input type="text" name="cf7s-text-01" value="" size="60" maxlength="100" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required textfield" id="item1a" aria-required="true" placeholder="default" /></span></li> <li> <label for="cf7s-item2a">email</label><span class="wpcf7-form-control-wrap item2a"><input type="email" name="item2a" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" /></span></li> <li> <label for="cf7s-item3a">url</label><span class="wpcf7-form-control-wrap item3a"><input type="url" name="item3a" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" /></span></li> <ol class="singleline"> <li> <label for="cf7s-tel-01">tel</label><span class="wpcf7-form-control-wrap cf7s-tel-01"><input type="tel" name="cf7s-tel-01" value="" size="15" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" /></span></li> <li> <label for="cf7s-tel-02">mobile</label><span class="wpcf7-form-control-wrap cf7s-tel-02"><input type="tel" name="cf7s-tel-02" value="" size="15" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" /></span></li> </ol> <li> <label for="cf7s-item5a">textarea</label><span class="wpcf7-form-control-wrap item5a"><textarea name="item5a" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"></textarea></span></li> </ol> </fieldset> <p>Use paragraphs for text that is not a form field.</p> <p><input type="submit" value="Submit - Text Fields" class="wpcf7-form-control wpcf7-submit" /></p> <p><!-- Checkboxes, Radio Buttons, Dropdown Menu --></p> <fieldset> <legend>Checkboxes, Radio Buttons, Dropdown Menu</legend> <ol> <li> <label for=cf7s-checkbox-01">Checkboxes</label><span class="wpcf7-form-control-wrap cf7s-checkbox-01"><span class="wpcf7-form-control wpcf7-checkbox checkbox" id="item1b"><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item1" /> <span class="wpcf7-list-item-label">Item1</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item2" /> <span class="wpcf7-list-item-label">Item2</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item3" /> <span class="wpcf7-list-item-label">Item3</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item4" /> <span class="wpcf7-list-item-label">Item4</span></span></span></span></li> <li> <label for=cf7s-radio-01">Radio Buttons</label><span class="wpcf7-form-control-wrap cf7s-radio-01"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item1</span> <input type="radio" name="cf7s-radio-01" value="Item1" /></label></span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item2</span> <input type="radio" name="cf7s-radio-01" value="Item2" /></label></span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item3</span> <input type="radio" name="cf7s-radio-01" value="Item3" /></label></span></span></span></li> <li> <label for=cf7s-menu-01">Dropdown Menu</label><span class="wpcf7-form-control-wrap cf7s-menu-01"><select name="cf7s-menu-01[]" class="wpcf7-form-control wpcf7-select" multiple="multiple"><option value="">---</option><option value="Item1">Item1</option><option value="Item2">Item2</option><option value="Item3">Item3</option></select></span></li> </ol> </fieldset> <p>Use paragraphs for text that is not a form field.</p> <p><input type="submit" value="Submit - Checkboxes, Radio Buttons, Dropdown Menu" class="wpcf7-form-control wpcf7-submit" /></p> <p><!-- Other Fields --></p> <fieldset> <legend>Other Fields</legend> <ol> <li> <label for="cf7s-number-01">Number (spinbox)</label><span class="wpcf7-form-control-wrap cf7s-number-01"><input type="number" name="cf7s-number-01" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" /></span></li> <li> <label for="cf7s-range-01">Number (slider)</label><span class="wpcf7-form-control-wrap cf7s-range-01"><input type="range" name="cf7s-range-01" value="" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" /></span></li> <li> <label for="cf7s-date-01">Date</label><span class="wpcf7-form-control-wrap cf7s-date-01"><input type="date" name="cf7s-date-01" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" /></span></li> <li> <label for="cf7s-file-01">File upload</label><span class="wpcf7-form-control-wrap cf7s-file-01"><input type="file" name="cf7s-file-01" value="1" size="40" class="wpcf7-form-control wpcf7-file" /></span></li> <li> <label for="cf7s-quiz-01">Quiz</label><span class="wpcf7-form-control-wrap cf7s-quiz-01"><span class="wpcf7-quiz-label">Item2</span> <input type="text" name="cf7s-quiz-01" size="40" class="wpcf7-form-control wpcf7-quiz" aria-required="true" /><input type="hidden" name="_wpcf7_quiz_answer_cf7s-quiz-01" value="6e856af7e865a7dd4a5a517954272d45" /></span></li> <li> <label for="cf7s-acceptance-01">Acceptance</label><span class="wpcf7-form-control-wrap cf7s-acceptance-01"><input type="checkbox" name="cf7s-acceptance-01" value="1" class="wpcf7-form-control wpcf7-acceptance" /></span></li> <li> <label for="cf7s-captcha-01">Captcha Image</label><input type="hidden" name="_wpcf7_captcha_challenge_cf7s-captcha-01" value="663905828" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-cf7s-captcha-01" width="72" height="24" alt="captcha" src="http://localhost/ONLINE/CF7/cf7skinsPoC/wp-content/images/wpcf7_captcha/663905828.png" /></li> <li> <label for="cf7s-captcha-01">Captcha Input</label><span class="wpcf7-form-control-wrap cf7s-captcha-01"><input type="text" name="cf7s-captcha-01" value="" size="40" class="wpcf7-form-control wpcf7-captchar" /></span></li> </ol> </fieldset> <p>Use paragraphs for text that is not a form field.</p> <p><input type="submit" value="Submit - Other Fields" class="wpcf7-form-control wpcf7-submit" /></p> |
A lot of themes forget to handle the standard HTML form elements.
Does WordPress test theme have all CF7 form elements?
Check if Fieldset, Legend, Label items are styled in Default WordPress themes
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 11 million downloads (currently around 10,000 per day), indicates that a lot of people are successfully sending emails from CF7.
BUT … it doesn’t work that easily for everyone
But not for everyone – emails don’t work easily for some CF7 users
If you spend some time in the CF7 support forum at http://wordpress.org/support/plugin/contact-form-7 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.
Note: 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 at http://wordpress.org/support/plugin/contact-form-7.
If you have something you think might help others on this issue, you can use the CF7 form at the bottom of this page to contact us.
Please note however that anything that looks like a request for support or help will be ignored and deleted faster than you can imagine.
Sending
Contact Form 7 uses the standard recommended methods used to send emails in WordPress.
Current bug in WordPress 3.6 – Qmail based Hosts only
There is actually a bug in the 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:
- Go to this link- https://github.com/PHPMailer/PHPMailer/blob/master/class.phpmailer.php
- Copy the actual file contents starting with:
- 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.
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.
- You need a functioning mail server
- Test if your WordPress installation is able to send emails
- Confirm wp_mail is working
- Hosting Issues
- Alternatively – try to configure email using SMTP
- Ensure proper return address is used
- Your email may be treated as spam
- Plugin or Theme Conflict
- Javascript Conflict
- Use Firebug or Chrome Dev Tools
- Contact Form 7 didn’t install or update correctly
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.
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
Confirm wp_mail is working
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.
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 the following email authentication issues.
Ensure Proper Return Address is Used
By default, the WordPress mailer fills in the From: field with wordpress@yourdomain.com and the From: name as WordPress. This is fine if this is a valid e-mail address.
For example, if your real e-mail is wordpress@yourdomain.com, your host should pass the email on for delivery. 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 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.
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
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. There are a couple measures you can use to convince recipient’s mail servers that your message is legitimate and should be delivered as addressed.
The following paragraphs are copied from WordPress Codex – http://codex.wordpress.org/FAQ_Troubleshooting#E-mailed_passwords_are_not_being_received
SPF: (Sender Policy Framework) This is the most common anti-spam measure used. If you are on a hosted system, there is a good chance your host has set this up for the mail server you are using. Have WordPress email you and check the message headers for evidence that the message passed the SPF check. You can get a message sent by following the Forgot Password link on the login page. To keep your old password, do not follow the link in the message. If your system email failed the SPF check, you can set up the credentials if you have access to your DNS records and your mail server’s domain belongs to you. Check the return path of the email your system sent. If the mail server listed there has your domain name, you can set up SPF credentials. There are several how-tos on the Internet.
DKIM: (Domain Key Identified Mail) This system is also used. You can use both SPF and DKIM in the same message. Again, just as with SPF, you can check if your receiving mailserver verified your host’s domain key by examining the mail header. There is a fair chance no signature key was provided, indicating your host chose to not use this protocol. Also as with SPF, if you can edit your DNS records and the mail server belongs to your domain, you can set up DKIM credentials yourself. Some how-tos exist if you search the Internet.
To get WordPress to send the proper DKIM keys, hook the ‘phpmailer_init’ action. You are passed the $phpmailer object. Set the necessary properties and return the object. See the class source code for more information. It’s on wp-includes/class-phpmailer.php .
Plugin or Theme Conflict
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 (particularly by users with limited WordPress skill and experience) when the real cause is conflict from another theme or plugin – see http://wiki.simple-press.com/installation/troubleshooting/theme-conflicts/.
Step by step approach to finding Plugin & Theme Conflicts
1.) Disable all plugins other than CF7
a.) Does it work now? – Turn back on plugins one by one until you find the conflict
b.) You may need to clear the browser cache between each one
2.) Disable your current theme and load one of the WordPress Default themes
a.) Does it work now? – The problem is with your current selected theme
3.) With everything disabled, try (if you can) to correct the problem by reinstalling elements that may have become corrupted.
You may need to :
1.) Deactivate Contact Form 7 and completely delete it. Then re-install it into your WordPress instance.
2.) Reinstall your theme.
3.) Delete and reinstall the plugin causing the conflict.
4.) Re-upload your wp-content folder with a fresh copy.
Note: Any plugin that uses wp_mail and does not reset wp_mail_content_type back to ‘text/plain’ after sending a message can lead to unexpected problems with e-mails from WordPress.
Javascript Conflict
Contact Form 7 is a good WordPress community member in regards to it’s use of Javascript. It only loads it’s JavaScript where it is needed and only loads scripts required for the current page. It also plugs correctly into the WordPress architecture.
However 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.
Switch to a WordPress default theme 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.
Use Firebug or Chrome Dev Tools
Use Firebug or Chrome Dev Tools to try to find the conflict. See http://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/ 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.
Contact Form 7 didn’t install or update correctly on your site
It is always possible that Contact Form 7 didn’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.
Useful Links
http://codex.wordpress.org/FAQ_Troubleshooting#E-mailed_passwords_are_not_being_received
http://joshbetz.com/2010/01/problems-getting-wordpress-emails
http://www.premiumpress.com/tutorial/wordpress-email-settings/
http://www.kriesi.at/support/topic/error-sending-mail-via-the-wordpress-twicet-theme-contact-page
http://butlerblog.com/2012/09/23/testing-the-wp_mail-function/
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
http://wiki.dreamhost.com/Sender_Domain_Policy_and_Spoofing
http://wiki.simple-press.com/installation/troubleshooting/plugin-conflicts/
http://wiki.simple-press.com/installation/troubleshooting/theme-conflicts/
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 at http://wordpress.org/support/plugin/contact-form-7.
If you have something you think might help others on this issue, you can use the CF7 form below to contact us.
Error: Contact form not found.
Please note that anything that looks like a request for support or help will be ignored and deleted faster than you can imagine.