Can I have conditional fields using Contact Form 7 plugin in Wordpress?

Question

What I want is simple.

User can select A or B and depending on this, they have different fields to fill.

I can't find a way on doing this, I've only found a hack for the 1.0 version (current is 2.4.6)

Answer 1

1. This question should have been posted under Stack Overflow's Wordpress page initially. You probably would have gotten a quicker answer. :)

2. Here is the answer. :D

I know this question was asked quite a while back but I have also found a solution to it as I was looking for this myself. So here is the answer for anyone else who might also be looking for a solution. The link listed below has helped me tons.

"Show / Hide Fields Conditionally with Contact Form 7"

Answer 2

I've just written a WordPress plugin that adds conditional logic to Contact Form 7.

The source code is on github: https://github.com/pwkip/contact-form-7-conditional-fields

You can download the plugin from the wordpress repository here: https://wordpress.org/plugins/cf7-conditional-fields/

Answer 3

This changed with CF7 4.1 release around 1/2015. Details on the changes can be found here - http://contactform7.com/2015/01/06/contact-form-7-41-beta/

Code should look something like this -

add_filter( 'wpcf7_validate_text', 'your_validation_filter_func', 10, 2 );
add_filter( 'wpcf7_validate_text*', 'your_validation_filter_func', 10, 2 );

function your_validation_filter_func( $result, $tag ) {
    $name = $tag['name'];

    if ( $name === 'full-address' ) {
        $value = isset( $_POST[$name] )
        ? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
        : '';

        $recipient = isset( $_POST['recipient'] ) ? $_POST['recipient'] : '' ;
        if(strlen($value) === 0 && ($recipient == 'Maintenance Inquiries' || $recipient == 'Resident Accounts') ) {
            $result->invalidate( $tag, 'Please input address for this inquiry type' );
        }
    }

    return $result;
}

Answer 4

The CF7 Conditional fields by @jules-colle is an obvious awesome solution.

However, if you want to conditionally show/hide one or two fields, adding some inline js works very well.

Here is an example copy of the CF7 form builder:

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>

<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
[text favorite-color] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    // Get the value of the selected drop down
    var dropDownText = document.getElementById("FavoriteColorDropDown").value;
    // If selected text matches 'Other', display the text field.
    if (dropDownText == "Other") {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
    } else {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
    }
  }
</script>

For further reading and more examples, check my article on this topic.