Based on the popular CF7 Light Beauty skin, this Plugin Pack will style your form so that it floats to the right of other content on the page – like a right aligned image floats to the right of text.
Theme Tags
cf7 right float form customise contact form 7, microthemer
Tested in Modern Browsers
Cf7 Right Floating has been tested in the following browsers:
Theme Files
config.json
license.txt
meta.txt
readme.txt
red-50.png
screenshot.png
Instructions in readme.txt
Contents
Example Contact Form 7 Markup To Adapt When Using This Plugin Style
Example Contact Form 7 Markup
When creating this skin for Contact Form 7 I used the following markup. You will probably want to change this for your particular form but pay attention to the formula it follows. Namely, a label followed by a line break followed by the form field shortcode, all contained within paragraph tags:
<p>Your Name (required)<br />
[text* your-name] </p>
1.1 (8 May, 2013)
Error messages no longer display as red overlays. Contact Form 7 changed the functionality of the error message system and so the CSS in this skin had to be updated. This is an important update. Keeping the old skin with the latest version of Contact Form 7 will result in usability problems (the user won’t be able to correct fields with an error).
Also, CSS targets inputs more general so when type="date" or type="phone" inputs are added the styling doesn’t break.
Cf7 Right Floating – Contact Form 7 Plugin Skin
Cf7 Right Floating is a Plugin Skin
for Contact Form 7 – which is free to download!
Author: Themeover
Requires: Microthemer or Microloader
Theme Description
Based on the popular CF7 Light Beauty skin, this Plugin Pack will style your form so that it floats to the right of other content on the page – like a right aligned image floats to the right of text.
Theme Tags
cf7 right float form customise contact form 7, microthemer
Tested in Modern Browsers
Cf7 Right Floating has been tested in the following browsers:
Theme Files
Instructions in readme.txt
Contents
Example Contact Form 7 Markup
When creating this skin for Contact Form 7 I used the following markup. You will probably want to change this for your particular form but pay attention to the formula it follows. Namely, a label followed by a line break followed by the form field shortcode, all contained within paragraph tags:
<p>Your Name (required)<br />
[text* your-name] </p>
<p>Your Email (required)<br />
[email* your-email] </p>
<p>Subject<br />
[text your-subject] </p>
<p>Your Message<br />
[textarea your-message] </p>
<p>Select Color<br />
[select menu-242 "Red" "Blue" "Green" "Purple"]</p>
<p>Select Size<br />
[checkbox checkbox-56 "Small" "Medium" "Large"]</p>
<p>Select Brightness<br />
[radio radio-212 "Light" "Dark"]</p>
<p>[captchac captcha-301]<br />
[captchar captcha-301]</p>
<p>[submit "Send"]</p>
Changelog
1.1 (8 May, 2013)
Error messages no longer display as red overlays. Contact Form 7 changed the functionality of the error message system and so the CSS in this skin had to be updated. This is an important update. Keeping the old skin with the latest version of Contact Form 7 will result in usability problems (the user won’t be able to correct fields with an error).
Also, CSS targets inputs more general so when type="date" or type="phone" inputs are added the styling doesn’t break.
This is version 1.0. There have been no changes.