Category Archives: Knowledge Base

Using Fieldsets in your forms

Posted on by

Explain to users why they should use Fieldsets in their forms and how to do that using CF7 Skins.

https://www.google.com.au/search?q=why+use+fieldsets

The grouping and labelling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully.

The HTML 4.1 specification introduced a method for grouping and labeling related form controls.

The fieldset element allows authors to group thematically related controls and labels. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible.

The legend element allows authors to assign a caption to a fieldset. The legend improves accessibility when the fieldset is rendered non-visually.

See Fieldsets, Legends and Screen Readers
http://stackoverflow.com/questions/9741328/why-do-we-need-a-fieldset-tag
http://www.456bereastreet.com/archive/200904/use_the_fieldset_and_legend_elements_to_group_html_form_controls/

Why we use Fieldset, Legend & Lists in CF7 Skins

Posted on by

Using Fieldsets & Labels

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

Better Contact Form 7 Checkboxes & Radio Buttons

Posted on by

Article explains use of important options available for Checkboxes & Radio Buttons in Contact Form 7.

Include example of completed CF7 tag with option.

See http://contactform7.com/checkboxes-radio-buttons-and-menus/

Checkbox & Radio Button Tag Syntax

See http://contactform7.com/tag-syntax/#form_tag

Setting Default Options

default:(num) default:2
default:1_2_3 Pre-checked options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3.

Make checkboxes exclusive

exclusive Make checkboxes exclusive. I mean, when you check a checkbox in a group, others are unchecked, so it accepts zero checked or one checked. This is a JavaScript gimmick, so requires JavaScript. Radio button doesn’t support this option.

Add other field to checkboxes & radio buttons

free_text Append a free input text field to last item.

Layout Options for Checkboxes and Radio Buttons

label_first By default, a checkbox or a radio button are put first, and a label last. By adding label_first option, you can reverse them.

See also http://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/

How to place CF7 Form Fields side by side

Posted on by

CF7_Singleline

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)&nbsp</label> [text 1="your-name" language="*"][/text] </li>
<li> <label for="your-email">Your Email (required)&nbsp</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.