Support » Plugin: Contact Form 7 » Do I need to enqueue scripts?

  • parakeet

    (@parakeet)


    My form does not correctly use the Ajax submission.
    Instead, the form loads to a new page with validation messages. (Since my form is in a modal, this is a bad idea).

    I note the FAQ page at https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/ about Ajax not working.

    I don’t believe two of the reasons (“Conflicts with other JavaScript”, “HTML structure is not valid”) are correct. But I do notice that my hand-coded custom theme does not include Contact Form assets in the same way that the standard Twenty Sixteen does.

    Basically, the following code, when rendered through Twenty Sixteen, is absent through my own theme..`<script type=’text/javascript’>

    `
    <script type=’text/javascript’>
    /* <![CDATA[ */
    var wpcf7 = {“apiSettings”:{“root”:”http:\/\/www.mysite.com\/wp-json\/”,”namespace”:”contact-form-7\/v1″},”recaptcha”:{“messages”:{“empty”:”Please verify that you are not a robot.”}}};
    /* ]]> */
    </script>
    <script type=’text/javascript’ src=’http://www.mysite.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.8′></script>
    <script type=’text/javascript’ src=’http://www.mysite.com/wp-includes/js/jquery/jquery.form.min.js?ver=3.37.0′></script>
    <script type=’text/javascript’ src=’http://www.mysite.com/wp-content/plugins/bootstrap-for-contact-form-7/assets/dist/js/scripts.min.js?ver=1.4.2′></script>
    `

    I’m not worried about JQuery, as I am already enqueuing a version of JQuery.

    But how do I solve this to get the rest included? Do I need to be enqueing stuff? And what about the missing CDATA stuff?

    • This topic was modified 6 months ago by  parakeet.
Viewing 2 replies - 1 through 2 (of 2 total)
  • By the way, I am inserting the form using echo do_shortcode( '[contact-form-7 id="1804" title="My contact form"]' );

    I have found the offender, in my functions-enqueue.php…

        // JQuery JS - swap WordPress' default and re-register
        wp_deregister_script('jquery'); // Disable WordPress' own version of JQuery, cf. http://wordpress.stackexchange.com/questions/189310/how-to-remove-default-jquery-and-add-js-in-footer
        wp_register_script( 'jQuery', 'https://code.jquery.com/jquery-3.1.1.slim.min.js', array(), '3.1.1', true );
        wp_enqueue_script('jQuery');

    That is, enqueuing my own preferred flavour of JQuery (which I was doing to give Bootstrap 4 a version it preferred), has the side effect of disabling Contact Form 7’s own scripts.

    When I remove the above dequeue/enqueue, CF7’s ajax submission works okay.
    However, this gives me the side effect of spoiling some formatting in my form itself.

    Next, test: How can I both retain my preferred JQuery AND ensure WordPress includes the scripts required by Contact Form 7?

    Here is the full segment where I enqueue scripts…

    // 3. Enqeue scripts JS
    function context_scripts()
    {
        // JQuery JS - swap WordPress' default and re-register
        wp_deregister_script('jquery'); // Disable WordPress' own version of JQuery, cf. http://wordpress.stackexchange.com/questions/189310/how-to-remove-default-jquery-and-add-js-in-footer
        wp_register_script( 'jQuery', 'https://code.jquery.com/jquery-3.1.1.slim.min.js', array(), '3.1.1', true );
        wp_enqueue_script('jQuery');
        // Tether
        wp_register_script( 'TetherJS', 'https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js', array(), '1.0.0', true );
        wp_enqueue_script('TetherJS');
        // Bootstrap JS
        wp_register_script( 'BootstrapJS', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js', array(), '1.0.0', true );
        wp_enqueue_script('BootstrapJS');
        // Propeller Javascript
        wp_register_script( 'PropellerJS', get_stylesheet_directory_uri() . '/js/propeller.min.js', array(), '1.0.0', true );
        wp_enqueue_script('PropellerJS');
    }
    add_action( 'wp_enqueue_scripts', 'context_scripts' );
    • This reply was modified 5 months, 4 weeks ago by  parakeet.
    • This reply was modified 5 months, 4 weeks ago by  parakeet.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.