Contact Form 7 – Conditional Fields Pro

CF7 – Conditional Fields Pro includes repeaters, advanced conditions and some new components.

Buy CF7 Conditional Fields Pro

Relational operators

greater than (>), less than (<), greater than or equal to (>=), less than or equal to (<=).
is empty, is not empty.

Form

456

at least one of the checked fields is > 5
at least one of the checked fields is < 5
at least one of the checked fields is ≤ 5
at least one of the checked fields is ≥ 5
at least one of the checked fields is = 5
at least one of the checked fields is ≠ 5
all fields are unchecked
at least one of the checked fields is not empty

Form Code

[checkbox number "4" "5" "6"]
[group group-greater-5]
at least one of the checked fields is &gt; 5
[/group]
[group group-less-5]
at least one of the checked fields is &lt; 5
[/group]
[group group-less-eq-5]
at least one of the checked fields is &le; 5
[/group]
[group group-greater-eq-5]
at least one of the checked fields is &ge; 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 &ne; 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

show [group-not-empty] if [number] not empty ""
show [group-empty] if [number] is empty ""
show [group-less-eq-5] if [number] ≤ "5"
show [group-greater-eq-5] if [number] ≥ "5"
show [group-less-5] if [number] < "5"
show [group-greater-5] if [number] > "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

Try entering texts containing hello, and one that contains an email address

the text contains the word hello
the text doesnt contain the word hello
the text IS NOT a valid email address.
the text contains an email address
the text IS an actual email address

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

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

Nice! Here are some Terms and conditions (not really)

Cool! Since you agree to our conditions, you have the privilige of clicking this submit button.

Noting got submitted.

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

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!!"

Repeater:

Form

address:

Street address:
City:
Country:

This is my: homebusiness

VAT number:

 

Form Code

[repeater rep-1 min:1 max:4 add "Add address" remove "Remove address" ]
  <fieldset>
    <legend>address:</legend>
    Street address: [text* street]
    City: [text* city]
    Country: [text* country]

    This is my: [radio radio-type default:1 "home" "business"]
    [group group-vat]VAT number: [text* vat][/group]
  </fieldset>
[/repeater]
&nbsp;
[submit]

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.

Form

Sorry, you are too young to watch dirty pictures. Try decreasing your date of birth.

Hooray! You are older than 18. Here's some explicit content:

    o
   /__o
 _// <
'

Form Code

<label>Date of birth:
[date date-of-birth "2010-04-03"]</label>

[group minus-18]
Sorry, you are too young to watch dirty pictures. Try decreasing your date of birth.

[/group][group plus-18]
Hooray! You are older than 18. Here's some explicit content:
<pre style="font-family:monospace">
    o   
   /__o 
 _// < 
'   
</pre>
[/group]

Conditional Fields

show group if field operator value

plus-18 if date-of-birth function isOlderThan18 
minus-18 if date-of-birth function isYoungerThan18 

Learn more…

Multistep forms

*Coming soon*