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/

Using the Contact Form DB plugin with your CF7 forms

Posted on by

My experience is that the submission storage plugins are very robust and rarely fail to save a CF7 form submit.

They are not however always a good indication of CF7 sending emails. The green “Your message was sent successfully” message is a much clearer indicator that CF7 is sending the email.

The submission storage plugins appear to save a CF7 form submit even if the email is not sent due to a Javascript Conflict or unallowed From: email address.

This is partly why I think they are so often used by experienced WP users – they provide a robust record of all form submissions even when things go a little wrong.

Using the Contact Form 7 Dynamic Text Extension plugin

Posted on by

http://wordpress.org/plugins/contact-form-7-dynamic-text-extension/

Contact Form 7 is an excellent WordPress plugin, and the CF7 DTX Plugin makes it even more awesome by adding dynamic content capabilities. While default values in Contact Form 7 are static. CF7 DTX lets you create pre-populated fields based on other values. Some examples might include:

Auto-filling a URL
Auto-filling a Post ID, title, or slug
Pre-populating a Product Number
Referencing other content on the site
Populating with post info
Populating with user info
Populating with custom fields
Any value you can write a shortcode for

There are many more case-specific examples. I searched for a solution, and there are some decent hacks out there. Many of them are explored in this forum topic: Contact Form 7 Input Fields Values as PHP Get-Viarables. However, they all involved hacking the current Contact Form 7 code, which means next time the plugin is updated their edits will be overwritten. That’s bad.

This Dynamic Text Extension plugin provides a more elegant solution that leaves the Contact Form 7 Plugin intact.

See also http://sevenspark.com/wordpress-plugins/how-to-dynamically-set-the-recipient-to-email-address-in-contact-form-7

See also http://sevenspark.com/tutorials/how-to-create-a-counter-for-contact-form-7

See also http://sevenspark.com/code/how-to-create-a-dynamic-wordpress-contact-form

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

Styling checkboxes & radio buttons

Posted on by

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/

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/