Disclaimer: Conditional Fields for Contact Form 7 and Conditional Fields PRO are independent plugins and are not affiliated with or endorsed by Rock Lobster, LLC, the developers of Contact Form 7.
Conditional Fields Pro is a WordPress plugin that extends the popular Contact Form 7 plugin with some extra functionality.
Apart from the ability to define groups of fields and reveal them based on your conditions, Conditional Fields Pro includes repeaters, multistep forms, advanced conditions, calculated fields, custom functions and two new input types: toggle-button and a multi-file upload field.
Form submissions manager will be added soon.
Repeatable fields
Form
Form Code
[repeater rep-1 add "add additional address" remove "remove address"]
<fieldset><legend>Address {{rep-1_index}}</legend>
Street address: [text* street]
City: [text* city]
Country: [text* country]
</fieldset>
[/repeater]
<p> </p>
[submit]Email Body
Thank you for filling out these addresses:
[rep-1][rep-1:index] : [street], [city], [country]<br />[/rep-1]More information about repeaters
Multistep forms
Form
Form Code
[step title "About you"]
<p><label>Your name: [text* your-name]</label></p>
<p><label>Your favorite color: [text* your-address]</label></p>
[step title "About your family"]
<h4>Information about your children</h4>
<label>[checkbox no-children "I don't have any children"]</label>
[group has-children]
[repeater children add "add child" remove "remove child"]
<fieldset><p><label>Name of child: [text* name-of-child]</label></p>
<p><label>Favorite color of child: [text* fav-color-of-child]</label></p></fieldset>
[/repeater]
[/group]
[step title "About your car"]
<p><label>What color is your car? * [text* your-car-color]</label></p>
[step title "Finish up"]
<p>Thank you for filling out this silly multistep form. One last question.</p>
<p><label>Do you like filling out forms? * [select* like-forms first_as_label "-- yes or no --" "yes" "no"]</label></p>
[step title "Summary"]
<p>Please check the information below. If everything looks correct, press submit.</p>
[summary]
<p>[submit "Submit form"]</p>Email Body
<table>
<tr><td>your-name</td><td>[your-name]</td></tr>
<tr><td>your-address</td><td>[your-address]</td></tr>
<tr><td>no-children</td><td>[no-children]</td></tr>
[has-children]
[children]
<tr><td>name-of-child [children:index]</td><td>[name-of-child]</td></tr>
<tr><td>fav-color-of-child [children:index]</td><td>[fav-color-of-child]</td></tr>
[/children]
[/has-children]
<tr><td>your-car-color</td><td>[your-car-color]</td></tr>
<tr><td>like-forms</td><td>[like-forms]</td></tr>
</table>Conditional Fields (Text)
show [has-children] if [no-children] not equals "I don't have any children"
Calculated fields
New in version 2.7. Perform calculations based on other form fields and display the result in real time. Use calc_select, calc_radio, and calc_checkbox to assign numeric values to options, then combine them in a [calculated] formula.
Form
Form Code
<h2>Simple Order Form</h2>
<label>Choose a product</label>
[calc_select* product include_blank "T-shirt ($12.00)=>12" "Pants ($31.00)=>31" "Hoody ($22.00)=>22" "Shoes ($55.00)=>55"]
<label>Quantity</label>
[number* quantity min:1 "1"]
<label>Subtotal</label>
<p>$[calculated subtotal formula:"[product] * [quantity]" display:span decimals:2]</p>
<label>Shipping</label>
[calc_radio shipping use_label_element default:1 "Standard ($5.00)=>5" "Express ($15.00)=>15" "Overnight ($30.00)=>30"]
<label>Add-ons</label>
[calc_checkbox addons use_label_element "Gift wrapping ($3.00)=>3" "Extended warranty ($10.00)=>10" "Priority support ($7.50)=>7.5"]
<hr />
<p><strong>Order Total: $[calculated order-total formula:"([product] * [quantity]) + [shipping] + [addons]" display:span decimals:2]</strong></p>
[submit "Place Order"]Email Body
<h2>Order Confirmation</h2>
<table>
<tr><td>Product</td><td>[product]</td></tr>
<tr><td>Quantity</td><td>[quantity]</td></tr>
<tr><td>Subtotal</td><td>$[subtotal]</td></tr>
<tr><td>Shipping</td><td>[shipping]</td></tr>
<tr><td>Add-ons</td><td>[addons]</td></tr>
<tr><td><strong>Total</strong></td><td><strong>$[order-total]</strong></td></tr>
</table>Relational operators
greater than (>), less than (<), greater than or equal to (>=), less than or equal to (<=).
is empty, is not empty.
Form
Form Code
[checkbox number "4" "5" "6"]
[group group-greater-5]
at least one of the checked fields is > 5
[/group]
[group group-less-5]
at least one of the checked fields is < 5
[/group]
[group group-less-eq-5]
at least one of the checked fields is ≤ 5
[/group]
[group group-greater-eq-5]
at least one of the checked fields is ≥ 5
[/group]
[group group-eq-5]
at least one of the checked fields is = 5
[/group]
[group group-not-eq-5]
at least one of the checked fields is ≠ 5
[/group]
[group group-empty]
all fields are unchecked
[/group]
[group group-not-empty]
at least one of the checked fields is not empty
[/group]Conditional Fields (Text)
show [group-not-empty] if [number] not empty ""
show [group-empty] if [number] is empty ""
show [group-less-eq-5] if [number] less than or equals "5"
show [group-greater-eq-5] if [number] greater than or equals "5"
show [group-less-5] if [number] less than "5"
show [group-greater-5] if [number] greater than "5"
show [group-not-eq-5] if [number] not equals "5"
show [group-eq-5] if [number] equals "5"
Regular expressions
equals (regex), not equals (regex)
Form
Form Code
[text txt]
Try entering texts containing hello, and one that contains an email address
[group hello]
the text contains the word hello
[/group]
[group no-hello]
the text doesnt contain the word hello
[/group]
[group is-no-email]
the text IS NOT a valid email address.
[/group]
[group email]
the text contains an email address
[/group]
[group is_email]
the text IS an actual email address
[/group]Conditional Fields (Text)
show [hello] if [txt] equals (regex) "hello"
show [no-hello] if [txt] not equals (regex) "hello"
show [is_email] if [txt] equals (regex) "^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$"
show [is-no-email] if [txt] not equals (regex) "^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$"
show [email] if [txt] equals (regex) "[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}"
More information about regular expressions
More information about the togglebutton
Multifile upload:
Form
Form Code
[multifile my-files]Custom javascript functions
CF7 Conditional Fields PRO 1.6.2 introduces the possibility to write your own JavaScript functions to determine whether or not a group should be shown.