I've followed a tutorial regarding how to hide/show Contact Form 7 fields using jQuery.

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.

The fields hide okay but don't show when a field conditioned to show is clicked! Can anyone please help me to resolve this issue? Here's the code:

HTML Code:

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

<div class="hide" id="hide1">
    <p>Name of organisation (required):<br />
        [text* org-name placeholder "Enter organisation name here"]


$( 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" ) {
        else {
            $( "#hide1" ).hide();
    } );
} );

1 Answer 1


The issue very well may be noConflict. By default whenever WordPress enqueues jquery it runs in a noConflict mode which means that it doesn't provide an alias for jQuery where the default is $ as you have in your question.

See this Dev Resource comment:

When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.
- bcworkz

Which means you need to replace your $( document ).ready() with:

jQuery( document ).ready( function( $ ) {

In addition, according to your comment it looks like that ( by viewing the page source ) that you are adding in your script before JQuery is defined. If you're using the normal wp_enqueu_script() ( which you should be using / learning to use ) you need to define jquery into the $deps array:

    'my-irrelevant-handle',                                  // Script handle to identify your script
    get_stylesheet_directory_uri() . /my-script-path.js,     // Path to your script relative to style.css
    array( 'jquery' ),                                       // Tells WordPress to add this script after JQuery has been added
    '',                                                      // Optional version number
    true                                                     // Load this into the footer for speed purposes

This looks like a good enqueuing tutorial.

  • Thanks for your advice Howdy_McGee, however, this hasn't resolved the issue. I used the code on my wedding website, here: [charlesandporsche.wedding/#rsvp] for the 'Are you a day or evening guest' field and it works without any issues. Any idea on what might be stopping it from working? Jun 3, 2016 at 21:23
  • @charlieg007 you're adding your script before JQuery has been added - see my edit.
    – Howdy_McGee
    Jun 3, 2016 at 21:29
  • I take it that the enqueuing code provided should be added in functions.php, but how would the code look using my example? Also, should I then remove the header reference to the jQuery? Thanks. Jun 3, 2016 at 21:37
  • @charlieg007 Follow the tutorial in my link at the bottom of the answer - that will walk you through adding the enqueue. Whenever you reference the jquery dependency in the function above, WordPress will automagically move it to where it needs to go ( above your script ).
    – Howdy_McGee
    Jun 3, 2016 at 21:40
  • I think I've now implemented this, however, it does not appear to have fixed the issue. Can you help? Jun 3, 2016 at 21:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.