Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Problems with using Contact Form 7 in an Elementor Pro Popup

I use Contact Form 7 on my WordPress website.

When I use the form shortcode in an Elementor Pro Popup,
popup dissapears after hitting the submit button and the user is unable to see any form messages.

To remedy this problem, I use the following code and it seems to work fine. Popup is still visible displaying form messages after hitting the submit button:

<script>
jQuery( document ).on( 'elementor/popup/show', () => {
    wpcf7.init(jQuery(".wpcf7-form")[0]);
});
</script>

Because I’m a JS novice, above code throws out 2 syntax errors. How can I please eliminate these errors?

Error 1: On line #1

‘arrow function syntax (=>)’ is only available in ES6 (use ‘esversion: 6’).

Error 2: On line #2

Strings must use singlequote.

‘wpcf7’ is not defined.

Thank you.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Please note:

    If you use the same form on the page AND in Elementor Popup, the above code will need tweeking:

    You must use a different form for the in page and the popup. And you must add an extra class to the popup form shortcode:

    E.g. [contact-form-7 id="3296" title="Form Popup" html_class="popup-form"]

    so the script above will be:

    <script>
  jQuery( document ).on( 'elementor/popup/show', function() {
     wpcf7.init(jQuery('.popup-form')[0]);
  });
</script>

  2. 0

    jQuery does not use ES6 arrow functions and the double-quoted string needs to be single quotes:

    <script>
  jQuery( document ).on( 'elementor/popup/show', function() {
     wpcf7.initForm( jQuery('.wpcf7-form') );
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search