Dynamic fields with Contact Form 7 – WordPress plugin

1. Be sure to have jQuery script added to your theme or add it

2. Create a form with Contact Form 7

Example:

<p>Select box</p>
<div>Question1?<br />
[select question1 id:question1 include_blank "Yes!" "Nope"]
</div>
<div class="hide" id="hide1">
    Some text<br />
    [text not-awesome /50 id:not-awesome class:contactForm "Some text"]
</div>
<p>Radio btn</p>
<div>Question2<br />
    [radio radio1 id:radio1 "1" "2"]
</div>
<div class="hide" id="hide2">
    [radio radio2 "12" "13" "14"]
</div>

3. Create a script to hide fields

Add this to some js file in your template (custom.js)

/*! jQuery script to hide certain form fields */
 
$(document).ready(function() {
 
    //Hide the field initially
    $("#hide1").hide();
 
    //Show the text field only when the third option is chosen - this doesn't
    $('#awesome').change(function() {
        if ($("#awesome").val() == "Nope") {
            $("#hide1").show();
        } else {
            $("#hide1").hide();
        }
    });
    
    if ($('input:radio[name=radio1]:checked').val() != "1") {
    	$("#hide1").hide();
	}


	$('#radio1').change(function() {
		if ($('input:radio[name=radio1]:checked').val() == "1") {
			$("#hide1").show();
        } else {
		        $("#hide1").hide();
		}
	});
});