Contact Form 7 - Conditional Fields Pro - Contact Form 7 Conditional Fields

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

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 &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

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

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

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

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*