Last Updated on March 9, 2022 by Neil Murray

FORMS

Form Blogs

• Form Assembly Blog
• Cognito Forms Blog
• FormSite Blog

Form Design

• Web Form Design: Showcases And Solutions
• http://www.sitepoint.com/fancy-form-design-css/
• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms
• http://alistapart.com/article/flat-ui-and-forms
• http://alistapart.com/article/prettyaccessibleforms
• http://www.sitepoint.com/style-web-forms-css/
• Form design guidelines

Form Examples

• 30 Creative Web Forms Inspiration and Tutorials
• 25 Excellent Examples of Forms in Web Design

Form Articles

• 211 Best WordPress Contact Form Plugins (Reviewed and Compared)
• 3 Best Form Design Practices for your design process
• 20+ HTML Forms Best Practices for Beginners
• 12 Best Practices for Contact Form Page Design (with Examples)  
• Use these top 10 tips when you design for forms

WordPress Form Plugins

• Gravity Forms
• Ninja Forms
• Contact Form 7
• Formidable Forms
• Visual Form Builder
• Caldera Forms
• WPForms
• weForms
• Jetpack Contact Form
• Breezing Forms
• cformsII
• Form Maker
• PlanSo Forms
• CaptainForm
• Post Form Builder
• PirateForms
• FormCraft
• QuForm
• Ninja Kick

CF7 SKINS FORM ISSUES

Current Form Issues

Legend position – top of fieldset

• Fieldset Legend – Top Left – jsfiddle.net
• IE issue min margin-top Legends within a Fieldset
• Moving the legend in a fieldset lower in the form

Styling Google reCAPTCHA

• ReCaptcha API v2 Styling

Centre Legend

• Fieldset Legend – Centre – http://jsfiddle.net/8RpwG/ HTML legend align Attribute – not supported in HTML5.
• http://stackoverflow.com/questions/4006824/how-to-center-the-legend-element-what-to-use-instead-of-aligncenter-attribu
• http://stackoverflow.com/questions/5203558/html-align-legend-center

Past Form Problems

Centre multiple elements on a single line

• http://css-tricks.com/centering-css-complete-guide/
• http://codepen.io/chriscoyier/pen/ebing

Select hover not working in Chrome Quiz layout different in IE

• Fieldset Border Radius IE
• Cutting down on vendor prefixes
• Absolute, Relative, Fixed Positioning
• Box-sizing: Border-box

DEVELOPMENT

Styling CF7 Forms – CF7 Documentation

• Contact Form 7 Documentation
• Add id and class attributes to a form element
• Styling Contact Form
• Custom Layout for Checkboxes and Radio Buttons
• Locating Response Message Box Anywhere
• Customizing Validation Error Messages
• Why does my email address input field look different than other text input fields?
• Does Contact Form 7 support HTML5 input types?

Flexbox

• CSS Flexbox Tutorial
• Flexbox Cheat Sheet

Flexbox Forms

• How to Align Form Elements with Flexbox
• Flexbox Form Examples
• FlexBox Form Layout
• How to Build a Responsive Form With Flexbox

Label Position

• Position Text Labels on Forms Using CSS

Accessible Forms

• Accessible Forms
• Accessible Forms 2: Required fields and extra information

JQuery in forms

• Sexy forms with jQuery
• 12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

Grids

• Grid forms – Data entry can be beautiful – used as basis for CF7 Skins Ready Grid
• Gridforms – front-end library which handles the boilerplate necessary to build grid based forms

Placeholder Styling

• The CSS3 Placeholder Pseudo-element
• Change an input’s HTML5 placeholder color with CSS
• Style Placeholder Text

Legend Styling & Positioning

• Styling Legends (Revised)
• Legends of Style Revised — Tyssen Design

Using Fieldsets & Labels

• http://stackoverflow.com/questions/9741328/why-do-we-need-a-fieldset-tag
• http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html

Styling Forms using Unordered & Ordered Lists

• http://stackoverflow.com/questions/860745/p-vs-ol-or-ul-for-form-styling
• http://stackoverflow.com/questions/1395514/is-it-acceptable-to-use-tables-for-forms-or-is-it-still-more-correct-to-use-div
• http://stackoverflow.com/questions/109488/is-it-bad-design-to-use-table-tags-when-displaying-forms-in-html

Styling Checkboxes & Radio buttons

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.

• Easy CSS3 Checkboxes and Radio Buttons
• 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/

Styling Form Controls

• http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
• http://www.456bereastreet.com/archive/200409/styling_form_controls/
• http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

Cross Browser Compatible Forms

• http://www.zeldman.com/2010/11/25/finally-cross-browser-visual-control-over-forms/
• http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers
• http://stackoverflow.com/questions/4814014/cross-browser-compatibility-issue-with-forms
• http://stackoverflow.com/questions/2456377/cross-browser-input-field-width-stylization

Responsive Forms

• http://getbootstrap.com/2.3.2/base-css.html#forms
• The top 25 responsive design tools
• http://bradfrost.github.io/this-is-responsive/patterns.html#forms

HTML5 forms

• The Current State of HTML5 Forms
• Example HTML5 Form with Feature Testing
• HTML5 Forms Attributes
• HTML5 forms introduction and new attributes
• HTML5 forms input types
• Styling HTML5 Form Validation Errors

Other

• Should a button go inside or outside a fieldset? * Is this a required field? http://wordpress.org/plugins/wens-ie-css3-support/ Exploring The Best Contact Form Plugins For WordPress 7 Best Contact Form Plugins for WordPress

Other Form Software

Gravity Forms

• Guide to Gravity Forms 2.5 for Theme Developers
• http://www.gravityhelp.com/documentation/page/Design_and_Layout
• Visual CSS Guide (HTML Version)
• Gravity_Forms_CSS_Visual_Guide.png
• CSS Ready Classes
• Gravity Forms API – An Introductory Tutorial

TOOLS & FRAMEWORKS

CSS & Form Tools

• CSScomb – tool for sorting CSS properties in specific order
• caniuse.com – see where we are with new CSS tech specs is
• Create CSS3 – Easy CSS3 Generator
• The Current State of HTML5 Forms Browserhacks – extensive list of browser specific CSS and JavaScript hacks

Form Frameworks

• Normalize.css – A modern, HTML5-ready alternative to CSS resets – [SELECTED]
• WTF, forms
• 7 Great Tools to Help You Build Your Own HTML5 Forms
• 7 Form Frameworks To Help Manage Your Forms Easily
• http://formalize.me/
• http://www.formee.org/

CSS Frameworks – with Form section

• 18 Best CSS Frameworks for Accelerated Development
• Normalize.css
• Pure:CSS
• Foundation
• YAML CSS Framework

GENERAL

Developer Tools

• Firebug
• 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
• Chrome Dev Tools

Cross Browser Compatibility

• http://coding.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/
• http://www.vsellis.com/5-css-tips-for-cross-browser-compatibility/

Our Contact Form 7 Stuff

We have setup the following items which present the information available in the official Contact Form 7 Documentation in a more logical and easy to follow way.

• Documentation – contact-form-7-support/#cf7docs
• FAQ – contact-form-7-support/#cf7faq

SUPERCEDED

@import Rule

• Using the CSS @import Rule
• Why Use @import for External Style Sheets
• don’t use @import

Conditional Comments

• Conditional comments are no longer supported
• http://en.wikipedia.org/wiki/Conditional_comments
• http://stackoverflow.com/questions/3000465/will-ie9-support-conditional-comments