Last Updated on August 28, 2013 by Neil Murray
Listing of standard HTML form elements supported by CF7
CF7 Form Section
<!-- Text Fields -->
<fieldset>
<legend>Text Fields</legend>
<ol>
<li> <label for="cf7s-text-01">text <em>(required)</em></label>[text 1="cf7s-text-01" 2="60/100" 3="id:item1a" 4="class:textfield" 5="akismet:author_url" 6="watermark" 7="default" language="*"][/text]</li>
<li> <label for="cf7s-item2a">email</label>[email item2a]</li>
<li> <label for="cf7s-item3a">url</label>[url item3a]</li>
<ol class="singleline">
<li> <label for="cf7s-tel-01">tel</label>[tel cf7s-tel-01 15/]</li>
<li> <label for="cf7s-tel-02">mobile</label>[tel cf7s-tel-02 15/]</li>
</ol>
<li> <label for="cf7s-item5a">textarea</label>[textarea item5a]</li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
[submit "Submit - Text Fields"]
<!-- Checkboxes, Radio Buttons, Dropdown Menu -->
<fieldset>
<legend>Checkboxes, Radio Buttons, Dropdown Menu</legend>
<ol>
<li> <label for=cf7s-checkbox-01">Checkboxes</label>[checkbox cf7s-checkbox-01 id:item1b class:checkbox "Item1" "Item2" "Item3" "Item4"]</li>
<li> <label for=cf7s-radio-01">Radio Buttons</label>[radio cf7s-radio-01 label_first use_label_element "Item1" "Item2" "Item3"]</li>
<li> <label for=cf7s-menu-01">Dropdown Menu</label>[select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"]</li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
[submit "Submit - Checkboxes, Radio Buttons, Dropdown Menu"]
<!-- Other Fields -->
<fieldset>
<legend>Other Fields</legend>
<ol>
<li> <label for="cf7s-number-01">Number (spinbox)</label>[number cf7s-number-01]</li>
<li> <label for="cf7s-range-01">Number (slider)</label>[range cf7s-range-01]</li>
<li> <label for="cf7s-date-01">Date</label>[date cf7s-date-01]</li>
<li> <label for="cf7s-file-01">File upload</label>[file cf7s-file-01]</li>
<li> <label for="cf7s-quiz-01">Quiz</label>[quiz cf7s-quiz-01 "Item1" "Item2" "Item3"]</li>
<li> <label for="cf7s-acceptance-01">Acceptance</label>[acceptance cf7s-acceptance-01]</li>
<li> <label for="cf7s-captcha-01">Captcha Image</label>[captchac cf7s-captcha-01]</li>
<li> <label for="cf7s-captcha-01">Captcha Input</label>[captchar cf7s-captcha-01]</li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
[submit "Submit - Other Fields"] |
<!-- Text Fields -->
<fieldset>
<legend>Text Fields</legend>
<ol>
<li> <label for="cf7s-text-01">text <em>(required)</em></label>[text 1="cf7s-text-01" 2="60/100" 3="id:item1a" 4="class:textfield" 5="akismet:author_url" 6="watermark" 7="default" language="*"][/text]</li>
<li> <label for="cf7s-item2a">email</label>[email item2a]</li>
<li> <label for="cf7s-item3a">url</label>[url item3a]</li>
<ol class="singleline">
<li> <label for="cf7s-tel-01">tel</label>[tel cf7s-tel-01 15/]</li>
<li> <label for="cf7s-tel-02">mobile</label>[tel cf7s-tel-02 15/]</li>
</ol>
<li> <label for="cf7s-item5a">textarea</label>[textarea item5a]</li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
[submit "Submit - Text Fields"]
<!-- Checkboxes, Radio Buttons, Dropdown Menu -->
<fieldset>
<legend>Checkboxes, Radio Buttons, Dropdown Menu</legend>
<ol>
<li> <label for=cf7s-checkbox-01">Checkboxes</label>[checkbox cf7s-checkbox-01 id:item1b class:checkbox "Item1" "Item2" "Item3" "Item4"]</li>
<li> <label for=cf7s-radio-01">Radio Buttons</label>[radio cf7s-radio-01 label_first use_label_element "Item1" "Item2" "Item3"]</li>
<li> <label for=cf7s-menu-01">Dropdown Menu</label>[select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"]</li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
[submit "Submit - Checkboxes, Radio Buttons, Dropdown Menu"]
<!-- Other Fields -->
<fieldset>
<legend>Other Fields</legend>
<ol>
<li> <label for="cf7s-number-01">Number (spinbox)</label>[number cf7s-number-01]</li>
<li> <label for="cf7s-range-01">Number (slider)</label>[range cf7s-range-01]</li>
<li> <label for="cf7s-date-01">Date</label>[date cf7s-date-01]</li>
<li> <label for="cf7s-file-01">File upload</label>[file cf7s-file-01]</li>
<li> <label for="cf7s-quiz-01">Quiz</label>[quiz cf7s-quiz-01 "Item1" "Item2" "Item3"]</li>
<li> <label for="cf7s-acceptance-01">Acceptance</label>[acceptance cf7s-acceptance-01]</li>
<li> <label for="cf7s-captcha-01">Captcha Image</label>[captchac cf7s-captcha-01]</li>
<li> <label for="cf7s-captcha-01">Captcha Input</label>[captchar cf7s-captcha-01]</li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
[submit "Submit - Other Fields"]
HTML Output
<p><!-- Text Fields --></p>
<fieldset>
<legend>Text Fields</legend>
<ol>
<li> <label for="cf7s-text-01">text <em>(required)</em></label><span class="wpcf7-form-control-wrap cf7s-text-01"><input type="text" name="cf7s-text-01" value="" size="60" maxlength="100" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required textfield" id="item1a" aria-required="true" placeholder="default" /></span></li>
<li> <label for="cf7s-item2a">email</label><span class="wpcf7-form-control-wrap item2a"><input type="email" name="item2a" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" /></span></li>
<li> <label for="cf7s-item3a">url</label><span class="wpcf7-form-control-wrap item3a"><input type="url" name="item3a" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" /></span></li>
<ol class="singleline">
<li> <label for="cf7s-tel-01">tel</label><span class="wpcf7-form-control-wrap cf7s-tel-01"><input type="tel" name="cf7s-tel-01" value="" size="15" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" /></span></li>
<li> <label for="cf7s-tel-02">mobile</label><span class="wpcf7-form-control-wrap cf7s-tel-02"><input type="tel" name="cf7s-tel-02" value="" size="15" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" /></span></li>
</ol>
<li> <label for="cf7s-item5a">textarea</label><span class="wpcf7-form-control-wrap item5a"><textarea name="item5a" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"></textarea></span></li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
<p><input type="submit" value="Submit - Text Fields" class="wpcf7-form-control wpcf7-submit" /></p>
<p><!-- Checkboxes, Radio Buttons, Dropdown Menu --></p>
<fieldset>
<legend>Checkboxes, Radio Buttons, Dropdown Menu</legend>
<ol>
<li> <label for=cf7s-checkbox-01">Checkboxes</label><span class="wpcf7-form-control-wrap cf7s-checkbox-01"><span class="wpcf7-form-control wpcf7-checkbox checkbox" id="item1b"><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item1" /> <span class="wpcf7-list-item-label">Item1</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item2" /> <span class="wpcf7-list-item-label">Item2</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item3" /> <span class="wpcf7-list-item-label">Item3</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item4" /> <span class="wpcf7-list-item-label">Item4</span></span></span></span></li>
<li> <label for=cf7s-radio-01">Radio Buttons</label><span class="wpcf7-form-control-wrap cf7s-radio-01"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item1</span> <input type="radio" name="cf7s-radio-01" value="Item1" /></label></span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item2</span> <input type="radio" name="cf7s-radio-01" value="Item2" /></label></span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item3</span> <input type="radio" name="cf7s-radio-01" value="Item3" /></label></span></span></span></li>
<li> <label for=cf7s-menu-01">Dropdown Menu</label><span class="wpcf7-form-control-wrap cf7s-menu-01"><select name="cf7s-menu-01[]" class="wpcf7-form-control wpcf7-select" multiple="multiple"><option value="">---</option><option value="Item1">Item1</option><option value="Item2">Item2</option><option value="Item3">Item3</option></select></span></li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
<p><input type="submit" value="Submit - Checkboxes, Radio Buttons, Dropdown Menu" class="wpcf7-form-control wpcf7-submit" /></p>
<p><!-- Other Fields --></p>
<fieldset>
<legend>Other Fields</legend>
<ol>
<li> <label for="cf7s-number-01">Number (spinbox)</label><span class="wpcf7-form-control-wrap cf7s-number-01"><input type="number" name="cf7s-number-01" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" /></span></li>
<li> <label for="cf7s-range-01">Number (slider)</label><span class="wpcf7-form-control-wrap cf7s-range-01"><input type="range" name="cf7s-range-01" value="" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" /></span></li>
<li> <label for="cf7s-date-01">Date</label><span class="wpcf7-form-control-wrap cf7s-date-01"><input type="date" name="cf7s-date-01" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" /></span></li>
<li> <label for="cf7s-file-01">File upload</label><span class="wpcf7-form-control-wrap cf7s-file-01"><input type="file" name="cf7s-file-01" value="1" size="40" class="wpcf7-form-control wpcf7-file" /></span></li>
<li> <label for="cf7s-quiz-01">Quiz</label><span class="wpcf7-form-control-wrap cf7s-quiz-01"><span class="wpcf7-quiz-label">Item2</span> <input type="text" name="cf7s-quiz-01" size="40" class="wpcf7-form-control wpcf7-quiz" aria-required="true" /><input type="hidden" name="_wpcf7_quiz_answer_cf7s-quiz-01" value="6e856af7e865a7dd4a5a517954272d45" /></span></li>
<li> <label for="cf7s-acceptance-01">Acceptance</label><span class="wpcf7-form-control-wrap cf7s-acceptance-01"><input type="checkbox" name="cf7s-acceptance-01" value="1" class="wpcf7-form-control wpcf7-acceptance" /></span></li>
<li> <label for="cf7s-captcha-01">Captcha Image</label><input type="hidden" name="_wpcf7_captcha_challenge_cf7s-captcha-01" value="663905828" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-cf7s-captcha-01" width="72" height="24" alt="captcha" src="http://localhost/ONLINE/CF7/cf7skinsPoC/wp-content/images/wpcf7_captcha/663905828.png" /></li>
<li> <label for="cf7s-captcha-01">Captcha Input</label><span class="wpcf7-form-control-wrap cf7s-captcha-01"><input type="text" name="cf7s-captcha-01" value="" size="40" class="wpcf7-form-control wpcf7-captchar" /></span></li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
<p><input type="submit" value="Submit - Other Fields" class="wpcf7-form-control wpcf7-submit" /></p> |
<p><!-- Text Fields --></p>
<fieldset>
<legend>Text Fields</legend>
<ol>
<li> <label for="cf7s-text-01">text <em>(required)</em></label><span class="wpcf7-form-control-wrap cf7s-text-01"><input type="text" name="cf7s-text-01" value="" size="60" maxlength="100" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required textfield" id="item1a" aria-required="true" placeholder="default" /></span></li>
<li> <label for="cf7s-item2a">email</label><span class="wpcf7-form-control-wrap item2a"><input type="email" name="item2a" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" /></span></li>
<li> <label for="cf7s-item3a">url</label><span class="wpcf7-form-control-wrap item3a"><input type="url" name="item3a" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" /></span></li>
<ol class="singleline">
<li> <label for="cf7s-tel-01">tel</label><span class="wpcf7-form-control-wrap cf7s-tel-01"><input type="tel" name="cf7s-tel-01" value="" size="15" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" /></span></li>
<li> <label for="cf7s-tel-02">mobile</label><span class="wpcf7-form-control-wrap cf7s-tel-02"><input type="tel" name="cf7s-tel-02" value="" size="15" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" /></span></li>
</ol>
<li> <label for="cf7s-item5a">textarea</label><span class="wpcf7-form-control-wrap item5a"><textarea name="item5a" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"></textarea></span></li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
<p><input type="submit" value="Submit - Text Fields" class="wpcf7-form-control wpcf7-submit" /></p>
<p><!-- Checkboxes, Radio Buttons, Dropdown Menu --></p>
<fieldset>
<legend>Checkboxes, Radio Buttons, Dropdown Menu</legend>
<ol>
<li> <label for=cf7s-checkbox-01">Checkboxes</label><span class="wpcf7-form-control-wrap cf7s-checkbox-01"><span class="wpcf7-form-control wpcf7-checkbox checkbox" id="item1b"><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item1" /> <span class="wpcf7-list-item-label">Item1</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item2" /> <span class="wpcf7-list-item-label">Item2</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item3" /> <span class="wpcf7-list-item-label">Item3</span></span><span class="wpcf7-list-item"><input type="checkbox" name="cf7s-checkbox-01[]" value="Item4" /> <span class="wpcf7-list-item-label">Item4</span></span></span></span></li>
<li> <label for=cf7s-radio-01">Radio Buttons</label><span class="wpcf7-form-control-wrap cf7s-radio-01"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item1</span> <input type="radio" name="cf7s-radio-01" value="Item1" /></label></span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item2</span> <input type="radio" name="cf7s-radio-01" value="Item2" /></label></span><span class="wpcf7-list-item"><label><span class="wpcf7-list-item-label">Item3</span> <input type="radio" name="cf7s-radio-01" value="Item3" /></label></span></span></span></li>
<li> <label for=cf7s-menu-01">Dropdown Menu</label><span class="wpcf7-form-control-wrap cf7s-menu-01"><select name="cf7s-menu-01[]" class="wpcf7-form-control wpcf7-select" multiple="multiple"><option value="">---</option><option value="Item1">Item1</option><option value="Item2">Item2</option><option value="Item3">Item3</option></select></span></li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
<p><input type="submit" value="Submit - Checkboxes, Radio Buttons, Dropdown Menu" class="wpcf7-form-control wpcf7-submit" /></p>
<p><!-- Other Fields --></p>
<fieldset>
<legend>Other Fields</legend>
<ol>
<li> <label for="cf7s-number-01">Number (spinbox)</label><span class="wpcf7-form-control-wrap cf7s-number-01"><input type="number" name="cf7s-number-01" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" /></span></li>
<li> <label for="cf7s-range-01">Number (slider)</label><span class="wpcf7-form-control-wrap cf7s-range-01"><input type="range" name="cf7s-range-01" value="" class="wpcf7-form-control wpcf7-range wpcf7-validates-as-number" /></span></li>
<li> <label for="cf7s-date-01">Date</label><span class="wpcf7-form-control-wrap cf7s-date-01"><input type="date" name="cf7s-date-01" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" /></span></li>
<li> <label for="cf7s-file-01">File upload</label><span class="wpcf7-form-control-wrap cf7s-file-01"><input type="file" name="cf7s-file-01" value="1" size="40" class="wpcf7-form-control wpcf7-file" /></span></li>
<li> <label for="cf7s-quiz-01">Quiz</label><span class="wpcf7-form-control-wrap cf7s-quiz-01"><span class="wpcf7-quiz-label">Item2</span> <input type="text" name="cf7s-quiz-01" size="40" class="wpcf7-form-control wpcf7-quiz" aria-required="true" /><input type="hidden" name="_wpcf7_quiz_answer_cf7s-quiz-01" value="6e856af7e865a7dd4a5a517954272d45" /></span></li>
<li> <label for="cf7s-acceptance-01">Acceptance</label><span class="wpcf7-form-control-wrap cf7s-acceptance-01"><input type="checkbox" name="cf7s-acceptance-01" value="1" class="wpcf7-form-control wpcf7-acceptance" /></span></li>
<li> <label for="cf7s-captcha-01">Captcha Image</label><input type="hidden" name="_wpcf7_captcha_challenge_cf7s-captcha-01" value="663905828" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-cf7s-captcha-01" width="72" height="24" alt="captcha" src="http://localhost/ONLINE/CF7/cf7skinsPoC/wp-content/images/wpcf7_captcha/663905828.png" /></li>
<li> <label for="cf7s-captcha-01">Captcha Input</label><span class="wpcf7-form-control-wrap cf7s-captcha-01"><input type="text" name="cf7s-captcha-01" value="" size="40" class="wpcf7-form-control wpcf7-captchar" /></span></li>
</ol>
</fieldset>
<p>Use paragraphs for text that is not a form field.</p>
<p><input type="submit" value="Submit - Other Fields" class="wpcf7-form-control wpcf7-submit" /></p>
A lot of themes forget to handle the standard HTML form elements.
Does WordPress test theme have all CF7 form elements?
Check if Fieldset, Legend, Label items are styled in Default WordPress themes
