Contact Form 7 – Conditional Fields Pro

CF7 – Conditional Fields Pro includes repeaters, multistep forms, advanced conditions, custom functions and some new input types like toggle-buttons and a multi-file upload field.
Support for calculated fields coming soon.

Repeatable fields

Form

    Address {{rep-1_index}}

    Street address:
    City:
    Country:

     

    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>&nbsp;</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

      About you

      About your family

      Information about your children

      About your car

      Finish up

      Thank you for filling out this silly multistep form. One last question.

      Summary

      Please check the information below. If everything looks correct, press submit.

      Summary


      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"

      More information about multistep

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

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

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

            Multifile upload:

            Form

              Form Code

              [multifile my-files]

              Learn more…

              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…