Contact form 7 issue with jquery hiding/showing fields

I followed a tutorial regarding how to hide/show Contact Form 7 fields using jQuery (in WordPress):

https://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery

Read More

I have used this before and it worked wonders. However, on a new site, for some reason, it isn’t working. The page in question is here:

http://saintsfoundation.co.uk/application-form-for-charitable-support/

The fields hide okay (as you will see), but don’t show when a field conditioned to show is clicked! Can anyone please help me to resolve this issue?

Thanks in advance!

Here’s the code:

HTML

<p>You are an employee or official representative of a charity or community group (i.e. you are not a third party raising funds on their behalf (required):<br />

[select* criteria-question-1 label_first include_blank "Yes" "No"]   </p>

 <p>The fundraising will benefit people in the Southampton and/or Hampshire area (required):<br />
 [select* criteria-question-2 label_first id:form include_blank "Yes" "No"] </p>

 <div class="hide" id="hide1">

 <p>Name of organisation (required):<br />
 [text* org-name placeholder "Enter organisation name here"] </p>

 </div>

jQuery

$(document).ready(function() {

//Hide the field initially
$("#hide1").hide();

//Show the text field only when the third option is chosen - this doesn't
$('#form').change(function() {
    if ($("#form").val() == "Yes") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});
});

Related posts

Leave a Reply