CF7 – Conditional Fields Pro includes repeaters, multistep forms, advanced conditions, custom functions and some new components.
Support for calculated fields coming soon.
Repeatable fields
Form
Form Code
[repeater rep-1 add "add additional address" remove "remove address"]
<strong>Address # {{rep-1_index}}</strong>
Street address: [text* street]
City: [text* city]
Country: [text* country]
[/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"
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]
[submit "Send"]Conditional Fields (Text)
show [no-hello] if [txt] not equals (regex) "hello"
show [is-no-email] if [txt] not equals (regex) "^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$"
show [is_email] if [txt] 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}"
show [hello] if [txt] equals (regex) "hello"
Toggle button:
Form
Form Code
[togglebutton toggle-1 "Show" "Hide"]
[group group-1]
Nice! Here are some <a href="http://example.com/" target="_blank">Terms and conditions</a> (not really)
[togglebutton toggle-terms "I read your stupid terms and I agree" "I do not agree"]
[group group-2]
Cool! Since you agree to our conditions, you have the privilige of clicking this submit button.
[togglebutton toggle-submit "Submit" "PSYCH!!"]
[group group-3]
Noting got submitted.
[/group]
[/group]
[/group]Conditional Fields (Text)
show [group-1] if [toggle-1] equals "Hide"
show [group-2] if [toggle-terms] equals "I do not agree"
show [group-3] if [toggle-submit] equals "PSYCH!!"
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.