Form tester for Contact Form 7 - Conditional Fields for CF7

Form code

<div class="promo-form">
 <h3>Hi! Ever wanted to do something like this with Contact Form 7?</h3>
 [checkbox something-like-what use_label_element "Something like what?"]
 [group this]
 Something like this! Making additional fields appear and disappear based on the user's input.
 [radio what-do-you-think use_label_element class:block "Wow! That's pretty cool!" "Meh." "I'm not convinced / Show me more."]
 [group wow]
 Pretty sweet huh? You can create forms like this yourself using the 100% Free Conditional Fields for Contact Form 7 plugin
 <a href=https://wordpress.org/plugins/cf7-conditional-fields/" target="_blank" class="btn">Get the Free plugin</a>
 <a href="https://conditional-fields-cf7.bdwm.be/conditional-fields-for-contact-form-7-tutorial/" target="_blank" class="btn">Check out the tutorial</a>
 [/group]
 [group meh]
 I get it, nobody likes filling out forms.
 [/group]
 [group more]
 Okay, what would you like to know?
 [select what-would-you-like-to-know first_as_label "-- Take your pick --" "What about a multiselect field?" "Does it work with text fields as well?" "Anything more advanced?"]
 [group multiselect]
 Sure. Fields with multiple values are supported as well. You can show and hide multiple groups of fields at the same time.
 Select your favorite fruits
 [select favorite-fruits multiple "apple" "banana" "grapes" "lemon" "orange" "pineapple" "strawberry" "watermelon"]
 [group apple inline][/group][group banana inline][/group][group grapes inline][/group][group lemon inline][/group][group orange inline][/group][group pineapple inline][/group][group strawberry inline][/group][group watermelon inline][/group]
 Check your favorite fruits
 [checkbox favorite-fruits-check use_label_element "apple" "banana" "grapes" "lemon" "orange" "pineapple" "strawberry" "watermelon"]
 [group apple-check inline][/group][group banana-check inline][/group][group grapes-check inline][/group][group lemon-check inline][/group][group orange-check inline][/group][group pineapple-check inline][/group][group strawberry-check inline][/group][group watermelon-check inline][/group]
 <a href="https://www.freepik.com/free-photos-vectors/food">Food vector created by rawpixel.com - www.freepik.com</a>
 [/group]
 [group textfields]
 Why not give it a try?
 [text text-any]
 [group text-entered-any]
 Great job!
 Conditional fields works for all text input types, including number, telephone, email, date, ...
 You can also trigger groups on specific values. Try entering the text <code>hello</code> in the field above
 [/group]
 [group text-entered-hello]
 Hello, yourself!
 You can take this further with the <a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/">PRO plugin</a>, which adds support for regular expressions, relational operators and even custom functions
 [text text-advanced]
 <ul>
 <li>Try entering a number greater than 10</li>
 <li>Try entering a power of 2 (2, 4, 8, 16, 32, ...)</li>
 <li>Try entering a valid e-mail address</li>
 </ul>
 [group greater-than-10]The number you entered is greater than 10![/group]
 [group power-of-2]The number you entered is a power of 2![/group]
 [group valid-email]The email address you enter seems valid![/group]
 [/group]
 [/group]
 [group more-advanced]
 There's a lot more you can do with Conditional Fields PRO
 <ul>
 <li><a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/#repeater">Repeatable fields</a></li>
 <li><a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/#multistep">Multistep forms</a></li>
 <li><a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/#custom-functions">Custom functions</a></li>
 <li><a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/#relational-operators">Relational operators</a></li>
 <li><a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/#regex">Regular expressions</a></li>
 <li><a href="https://conditional-fields-cf7.bdwm.be/contact-form-7-conditional-fields-pro/#togglebutton">Togglebutton</a></li>
 </ul>
 [/group]
 [/group]
 [/group]
</div>
<script>
 function isPowerOfTwo($field) {
 var n = parseInt($field.val());
 if (isNaN(n)) return false;
 return n && (n & (n - 1)) === 0;
 }
</script>

Conditions (Text View)

show [this] if [something-like-what] equals "Something like what?"
show [wow] if [what-do-you-think] equals "Wow! That's pretty cool!"
show [meh] if [what-do-you-think] equals "Meh."
show [more] if [what-do-you-think] equals "I'm not convinced / Show me more."
show [multiselect] if [what-would-you-like-to-know] equals "What about a multiselect field?"
show [textfields] if [what-would-you-like-to-know] equals "Does it work with text fields as well?"
show [more-advanced] if [what-would-you-like-to-know] equals "Anything more advanced?"
show [apple] if [favorite-fruits] equals "apple"
show [banana] if [favorite-fruits] equals "banana"
show [grapes] if [favorite-fruits] equals "grapes"
show [lemon] if [favorite-fruits] equals "lemon"
show [orange] if [favorite-fruits] equals "orange"
show [pineapple] if [favorite-fruits] equals "pineapple"
show [strawberry] if [favorite-fruits] equals "strawberry"
show [watermelon] if [favorite-fruits] equals "watermelon"
show [apple-check] if [favorite-fruits-check] equals "apple"
show [banana-check] if [favorite-fruits-check] equals "banana"
show [grapes-check] if [favorite-fruits-check] equals "grapes"
show [lemon-check] if [favorite-fruits-check] equals "lemon"
show [orange-check] if [favorite-fruits-check] equals "orange"
show [pineapple-check] if [favorite-fruits-check] equals "pineapple"
show [strawberry-check] if [favorite-fruits-check] equals "strawberry"
show [watermelon-check] if [favorite-fruits-check] equals "watermelon"
show [text-entered-any] if [text-any] not empty ""
                    and if [text-any] not equals "hello"
show [text-entered-hello] if [text-any] equals "hello"
show [greater-than-10] if [text-advanced] greater than "10"
show [power-of-2] if [text-advanced] function "isPowerOfTwo"
show [valid-email] if [text-advanced] equals (regex) "^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$"

Email / Summary code

Attachments

Additional settings

Hi! Ever wanted to do something like this with Contact Form 7?

Form Tester for Contact Form 7powered by Conditional Fields for Contact Form 7

Form Tester for Contact Form 7
powered by Conditional Fields for Contact Form 7