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

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.

Learn more…

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* first_as_label "-- yes or no --" "yes" "no"]</label></p>
  <p>[submit "Submit form"]</p>

Conditional Fields

show group if field operator value

has-children if no-children not equals I don't have any children

More information about multistep