I’m trying to hide the contact form after it passes validation and is submitted. I want to do this with a simple custom JavaScript function.

The thing is, the console keeps informing me that my JS function is undefined. At first I had thought that this might be happening because I’m not enqueing the *.js correctly, but that’s not the case – my custom.js is clearly visible in the page’s source code, and its contents match what I’d put inside.

Here’s my code so far.

functions.php (child theme)

add_action( 'wp_enqueue_scripts', 'for_contact' );
function for_contact() {
    wp_enqueue_script(
        'contactFormHide',
        get_stylesheet_directory_uri() . '/custom.js',
        array('jquery')
    );
}

custom.js

var $j = jQuery.noConflict();

$j(document).ready(function() {
    "use strict";

    function contactFormHide (){
        $('.section_inner_margin').css('display','none');
        $('.section_inner').html('<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Your message has been sent.</div>');
    }

});

Contact Form 7 settings (Additional Settings tab)

on_sent_ok: "contactFormHide()"

What am I doing wrong, and how can I correct it?

Read more here: Custom JavaScript in WordPress Contact Form 7 not working


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: