Conditional not working in Elementor Popups

  • Resolved darioesposito

    (@darioesposito)


    4 years, 7 months ago

    Hi,

    I notice a “little” bug in CF7 – CF and Elementor, i have a button “work with us” open a popup i create in Elementor and inside i have a CF7 and it’s ok.

    Now i insert a select with 2 option and a grop required from Conditional Field but nothing work.

    I try to disable all plugin, clean the cache etc but if i copy the same CF7 in homepage it’s work!

    So i think it’s a sort of bug

    Can someone help me to resolve this? or if the developer fix this it’s great.

    Thanks

Viewing 8 replies - 16 through 23 (of 23 total)

  • Hello cmarcoofficial,
    you can try to add this snipped of js code.
    This work for me.
    You had to add it after jquery is inizialized.

    //https://github.com/elementor/elementor/issues/7798
    //https://conditional-fields-cf7.bdwm.be/docs/troubleshooting/does-not-work-with-a-third-party-theme-or-plugin/#popups
    //Re-initializa CF7 form js to work in E popup
    jQuery( document ).on( ‘elementor/popup/show’, ( event, id, instance ) => {
    jQuery( ‘.elementor-popup-modal form.wpcf7-form:not(.elementor)’ ).each( ( index, formElement ) => {
    // store from i
    $cf7From = jQuery( formElement );
    // re-init for cf7 form.
    wpcf7.initForm( $cf7From );
    wpcf7cf.initForm($cf7From);
    // add class to avoid running again
    $cf7From.addClass( ‘elementor’ );
    } );
    } );`

    Ah ok , thanks Kreas … but where should I write that code ?
    can i add it on tracking code manager (plugin)? or where?

    Sorry , I’m at the beginning ahhaha

    I do not know the tracking code manager plugin. If it let you add the code in the footer or after jquery is inialized, yes, you can use that plugin.
    See for example: Elementor custom code functionality
    Location: body end
    https://elementor.com/help/custom-code-pro/

    okk … done …but the form doesn’work

    when i go to the form i can’t click SUBMIT

    There is an errore on the code

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

    Good morning

    I open debugger after write your code and it gives me this error:

    wpcf7.initForm is not a function

    Why ?

    You have that error because the script is called before the function is available, but I can’t tell you why, sorry.

    Plugin Author Jules Colle

    (@jules-colle)

    you might need this snippet. For some context and explanation why, please read the 5th title on this page: https://conditional-fields-cf7.bdwm.be/docs/troubleshooting/does-not-work-with-a-third-party-theme-or-plugin/

    <script>
  jQuery(document).on( 'elementor/popup/show', function() {
    wpcf7.initForm(jQuery('.wpcf7-form'));
    wpcf7cf.initForm(jQuery('.wpcf7-form'));
  });
</script>
    Plugin Author Jules Colle

    (@jules-colle)

    If you are using CF7 version 5.4 or higher, the snippet should be:

    <script>
  jQuery(document).on( 'elementor/popup/show', function() {
    wpcf7.init(document.querySelector('.wpcf7-form'));
    wpcf7cf.initForm(jQuery('.wpcf7-form'));
  });
</script>
Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘Conditional not working in Elementor Popups’ is closed to new replies.