Select Template (drop-down menu) Select Style (drop-down menu)
Category Archives: Transfer
CF7 Skins – Designing Forms at your Finger Tips
CF7 Skins – How to Get Started
Lists for CF7 drop-down lists
Styling checkboxes & radio buttons
Styling Checkboxes & Radiobuttons
Styling checkboxes and radio buttons using CSS
The styling of checkboxes and radio buttons became possible with the introduction of the :checked pseudo-class in CSS3.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and drop down menu select lists.
http://stackoverflow.com/questions/1125226/styling-checkboxes-radio-buttons-and-dropdowns
http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers
http://stackoverflow.com/questions/4609769/control-text-wrapping-with-inline-list-of-checkboxes
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/
http://www.456bereastreet.com/lab/form_controls/checkboxes/
Add id and class attributes to form element
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