See http://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/
Author Archives: Neil Murray
Static or Floating-tip Validation Error Messages
Dealing with extra line breaks in CF7
http://wordpress.org/support/topic/great-plugin-2656
The only thing I’d like to see is less markup added by the plugin. I find the
tags get in the way of my styling of the plugin.
Creating HTML Emails in CF7
HTML emails are widely used for all kinds of professional correspondence especially email newsletters. They’re also used for all sorts of application-generated messages, such as receipts and confirmations.
Styled messages have lots of appeal for marketers, designers and consumers – but it’s a a bit of a headache to create them properly – especially within CF7.
Creating an HTML email that looks right to every reader is a job that makes cross-browser testing look easy. What can go wrong? After reaching its final destination, an email could be read using any of a number of standalone email clients (such as Outlook, AOL, and Eudora), and even more Web-based clients (Yahoo, Hotmail, and Gmail to name a few). Each of these email clients displays your HTML email message a little bit differently, so ensuring that your message displays correctly can be a daunting task.
There are some uncomfortable facts about HTML email you should be aware of. Building a HTML email is not like building for the web.
While web browsers continue their onward march towards standards, many email clients have stubbornly stayed put. Some have even gone backwards. In 2007, Microsoft switched the Outlook rendering engine from Internet Explorer to Word. Yes, as in the word processor. Add to this the quirks of the major web-based email clients like Gmail and Hotmail, sprinkle in a little Lotus Notes and you’ll soon realize how different the email game is.
Body only – no header stuff
You don’t need ,
should be
.
Premailer
Use inline styles
The most reliable way to include CSS in an HTML email is to use inline styles. They aren’t pretty, but few email clients ignore them. These styles are defined within the HTML tags in the body of the document, like this:
<p style="color:green;font-family:sans-serif;">green and arial text</p>. |
Using span tags to apply inline styles also works well.
First, you should keep it simple
The more complex your email design, the more likely is it to choke on one of the popular clients with poor standards support.
Second, you need to take your coding skills back a good decade
That often means nesting tables, bringing CSS inline and following the coding guidelines I’ll outline below.
Finally, you need to test your designs regularly
Just because a template looks nice in Hotmail now, doesn’t mean it will next week.
Just remember that pixel perfection in all email clients is a pipe dream.
Set the width in each cell, not the table
When you combine table widths, td widths, td padding and CSS padding into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself.
<table cellspacing="0" cellpadding="10" border="0"> <tr> <td width="80"></td> <td width="280"></td> </tr> </table> |
Err toward nesting
Table nesting is far more reliable than setting left and right margins or padding for table cells. If you can achieve the same effect by table nesting, that will always give you the best result across the buggier email clients.
Avoid spacer images
While the combination of spacer images and nested tables was popular on the web ten years ago, image blocking in many email clients has ruled it out as a reliable technique today. Most clients replace images with an empty placeholder in the same dimensions, others strip the image altogether. Given image blocking is on by default in most email clients, this can lead to a poor first impression for many of your subscribers. Stick to fixed cell widths to keep your formatting in place with or without images.
FORM:
EMAIL:
EMAIL TEMPLATE:
HTML:
Name: [cf7s-text-01] Business Name: [cf7s-text-02] Email: [cf7s-email] Phone: [cf7s-phone] Mobile: [cf7s-mobile] Your Preferences: Checkboxes: [cf7s-checkbox-01] Radio Buttons: [cf7s-radio-01] Dropdown Menu: [cf7s-menu-01] -- This mail is sent from http://cf7trial.project.buzztone.com.au/forms/new-designs/hudson/ |
<body style="margin:0; padding:0; background:#ffffff;">
<table bgcolor="#f4f4f2" align="center" width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><fieldset style="background: #EFEDDF;border: 2px solid;border-color: #DCD8CF;">
<legend style="background: #228C9C;border: 2px solid;border-color: #FEFFFF;color: #FFFFFF;font-size: 1.2em;padding: 5px 14px 5px 15px;margin: 7px 0 0 50px;"><b>Your Details</b></legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="50"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="50" height="10" ></td>
<td valign="top" width="545">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="20" ></td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
</tr>
<tr>
<td valign="top" width="130" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Name :</b></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px">[cf7s-text-01]</td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="8" ></td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="5" ></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="5" ></td>
</tr>
<tr>
<td valign="top" width="130" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Business Name :</b></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px">[cf7s-text-02]</td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="8" ></td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="5" ></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="5" ></td>
</tr>
<tr>
<td valign="top" width="130"style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Email :</b></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px">[cf7s-email]</td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="8" ></td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="5" ></td>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="5" ></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="130" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Phone :</b></td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px">[cf7s-phone]</td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top" width="80" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Mobile :</b></td>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top"style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px">[cf7s-mobile]</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="15" ></td>
</tr>
<tr>
<td valign="top"><fieldset style="background: #F6F5ED;border-radius: 3px;border: 3px solid;border-color: #DCD8CF;
margin-top: 10px;">
<legend style="background: #3E4742;color: #FFFFFF;font-size: 1.1em;padding: 5px 14px 5px 15px;margin-top: 5px;"><b>Your Preferences</b></legend><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="15" ></td>
</tr>
<tr>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Checkboxes :</b> [cf7s-checkbox-01] </td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Radio Buttons (horizontal) : </b> [cf7s-radio-01]</td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" width="10"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" style="font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:18px"><b>Dropdown Menu :</b> [cf7s-menu-01]</td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
</tr>
<tr>
<td valign="top"><table width="200%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table></td>
</tr>
</table>
</fieldset> </td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="30" ></td>
</tr>
</table>
</td>
<td valign="top" width="50"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="50" height="10" ></td>
</tr>
</table>
</fieldset></td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
</<a href="https://litmus.com/blog/html-email-coding-101-infographic">tr>
<tr>
<td valign="top" style="text-align:center;padding:5px 50px"><p>This mail is sent from <a href="http://cf7trial.project.buzztone.com.au/forms/new-designs/hudson" title="hudson" target="_blank">hudson</a></p></td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="10" ></td>
</tr>
<tr>
<td valign="top"><img style="display:block;" src="http://cf7trial.project.buzztone.com.au/wp-content/images/blank.gif" alt="" width="10" height="20" ></td>
</tr>
</table>
</body>
The Foundations of Coding HTML Email
The Ultimate Guide to CSS – HTML Emails
Email Design & Coding Recommendations – PDF
How To Code HTML Emails
MailChimp’s Resources Guides
Build an HTML Email Template From Scratch
Rock Solid HTML Emails
How to Create Great HTML Emails with CSS
=================
You can add any HTML to the Mail/Message body: section of the CF7 interface.
<ol> <li> <strong>Your Name: </strong>[your-name] </li> <li> Your Email: [your-email] </li> </ol> |
Make sure you tick Use HTML content type
Using Firebug to solve CSS styling issues in CF7 forms
Take screenshots of solving typical CSS styling issues in CF7 forms
How to place CF7 Form Fields side by side
You can use Ordered List elements to display multiple fields on single line.
HTML:
<ol class="singleline"> <li> <label for="your-name">Your Name (required) </label> [text 1="your-name" language="*"][/text] </li> <li> <label for="your-email">Your Email (required) </label> [email* your-email] </li> </ol> |
Added to Form section of CF7 interface.
CSS:
.wpcf7-form .singleline ol { list-style: none; margin: 0; } .wpcf7-form .singleline li { display: inline-block; float: left; margin-right: 10px; padding-right: 10px; } |
Added to Child Theme style.css
See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.
Above is taken from http://wordpress.org/support/topic/create-field-side-to-side – a question I answered the Contact Form 7 Support Forum.
EXAMPLE:
Error: Contact form not found.
Using Inline Styling in CF7 Forms
Using Inline Styling in the Form Section of CF7 interface.
Contact Form 7 Showcase
Please share links to great CF7 forms. Can be you own work or others. Aim is to highlight what you can achieve with CF7 (if you are skilled at HTML & CSS).
Examples
http://badwolfsyndicate.com/idea-submission/
http://buzztone.com.au/web-design-process/quote/
Submit Contact Form 7 Form
If you would like to submit a for inclusion in the , please complete the form below.
Error: Contact form not found.
Of course this form is a Contact Form 7 Form – use Firebug to see how we’ve built it!
Back to Styling Contact Form 7 Forms
CF7 CSS Classes
For CF7 forms we have several ids & classes which can be used to ensure that our CSS changes don’t inadvertantly effect other elements on your website.
class="wpcf7": <div id="wpcf7-f800-p709-o1" class="wpcf7"> div.wpcf7 { /* ../contact-form-7/includes/css/styles.css */ margin: 0; padding: 0; } class="wpcf7-form": <form class="wpcf7-form" novalidate="novalidate" method="post" action="/ONLINE/CF7/cf7skinsPoC/styles/premium/cagney/#wpcf7-f800-p709-o1"> class="wpcf7-form-control": <span class="wpcf7-form-control wpcf7-checkbox"> class="wpcf7-form-control-wrap": <span class="wpcf7-form-control-wrap checkbox-0"> span.wpcf7-form-control-wrap { /* ../contact-form-7/includes/css/styles.css */ position: relative; } class="wpcf7-text": <input id="cf7s-item1a" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required cf7s-textfield" type="text" placeholder="default" aria-required="true" maxlength="100" size="60" value="" name="cf7s-text-01"> class="wpcf7-textarea": <textarea class="wpcf7-form-control wpcf7-textarea" rows="10" cols="40" name="cf7s textarea-01"></textarea> class="wpcf7-email": <input class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" type="email" size="40" value="" name="cf7s-email-01"> class="wpcf7-url": <input class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" type="url" size="40" value="" name="cf7s-url-01"> class="wpcf7-tel": <input class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" type="tel" size="15" value="" name="cf7s-tel-01"> class="wpcf7-number": <input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" type="number" value="" name="cf7s-number-01"> class="wpcf7-range": <input class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" type="range" value="" name="cf7s-range-01"> class="wpcf7-date": <input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="cf7s-date-01"> class="wpcf7-file": <input class="wpcf7-form-control wpcf7-file" type="file" size="40" value="1" name="cf7s-file-01"> class="wpcf7-quiz": class="wpcf7-quiz-label": <span class="wpcf7-quiz-label">12+48=?</span><input class="wpcf7-form-control wpcf7-quiz" type="text" aria-required="true" size="40" name="cf7s-quiz-01"><input type="hidden" value="1c7a729e1466603f91d3595d6afcac26" name="_wpcf7_quiz_answer_cf7s-quiz-01"> class="wpcf7-acceptance": <input class="wpcf7-form-control wpcf7-acceptance" type="checkbox" value="1" name="cf7s acceptance-01"> class="wpcf7-captchac": <img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-cf7s-captcha-01" width="72" height="24" src="http://localhost/ONLINE/CF7/cf7skinsPoC/wp-content/images/wpcf7_captcha /1692768786.png" alt="captcha"> class="wpcf7-captchar": <span class="wpcf7-form-control-wrap cf7s-captcha-01"><input class="wpcf7-form-control wpcf7-captchar" type="text" size="40" value="" name="cf7s-captcha-01"></span> class="wpcf7-list-item": <span class="wpcf7-list-item"> span.wpcf7-list-item { /* ../contact-form-7/includes/css/styles.css */ margin-left: 0.5em; } class="wpcf7-list-item-label": <span class="wpcf7-list-item-label">Lieber.gleich.richtig.® Imagemappe</span> class="wpcf7-checkbox": <span class="wpcf7-form-control wpcf7-checkbox"> class="wpcf7-radio": <span class="wpcf7-form-control wpcf7-radio"> class="wpcf7-select": <select class="wpcf7-form-control wpcf7-select" multiple="multiple" name="cf7s-menu-01[]"> class="wpcf7-submit": <input class="wpcf7-form-control wpcf7-submit" type="submit" value="Senden"> |
Back to Styling Contact Form 7 Forms
Default CF7 Form in Firebug
Back to Styling Contact Form 7 Forms