Map form fields to post taxonomy not working when form is in a modal popup

  • Resolved philipbutlerfreelance

    (@philipbutlerfreelance)


    4 years, 6 months ago

    Hi,
    First let me say that I think this plugin is AMAZING!
    I’ve got the form to post working perfectly on a WP page, the ‘Map form fields to post taxonomy’ in conjunction with using class:js-select2 is brilliant.
    The problem I now have is that when I add the CF7 form to the page inside a Modal Block (plugin By Mark Bird) the ‘Map form fields to post taxonomy’ do not get populated.
    To see the form working (no modal) visit https://www.modcad.org/knowledgebase and click the Submit new record tab. Both the keywords and Categories field values are being dynamically created by the plugin
    To see the form not working (within a modal) visit https://www.modcad.org/knowledgebase2 and click the Submit new record button.
    Please not that the 2nd URL is a development one and will be deleted at some point.

    Any ideas why it’s not working? I’ve inspected to code and can’t see anything obvious.
    Cheers,
    Philip

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    4 years, 6 months ago

    Hello Philip

    Cool business site you have!

    First let me say that I think this plugin is AMAZING!

    thanks glad you like it, would spare a minute and put that into a review?

    Any ideas why it’s not working?

    Actually it is working, but hidden below the modal.

    The problem is that the Select2 plugin stores its listing in the <body> tag and not in the actual list parent element. When you create a modal the list actually renders but is hidden below.

    There is 2 way to tackle this, you can use css to force the listing above:

    
.select2-container--open {
	z-index: 20007;
}

    or you can stop the plugin from initiating your select2 fields and instead use a custom script to force the select2 list to attach itself to the parent element.

    The 2nd method is the select2 recommended way to ensure a clean display on all screens, but I found the simple css rule above to work just fine in the past.

    Thread Starter philipbutlerfreelance

    (@philipbutlerfreelance)

    4 years, 6 months ago

    Cool business site you have!

    Thanks, that much appreciated; I had loads of fun shooting videos for each of the weather conditions (had to wait 12 months to see the snow video appear haha).

    Actually it is working, but hidden below the modal.

    Doh! why didn’t I think of that before contacting you! Thanks for the css solution, I’ve added it to my child-theme css and everything is working perfectly! I’ve had a quick look ad the ‘recommended’ way but not sure how I’d implement it so will stick with the css method for now.
    Thanks for your uber fast reply, a donation (as a token of my thanks) is on it’s way.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    4 years, 6 months ago

    (had to wait 12 months to see the snow video appear haha).

    nice, the effect is very creative!

    way but not sure how I’d implement

    ah, yes! I forgot to mention that there is filter you can hook to disable the plugin auto-initialisation of the select2 field,

    
add_filter( 'cf7_2_post_filter_cf7_delay_select2_launch', '__return_true');

    you then need to load your own script on the page, and fire the select2 initialisation once the form has been initialised by the plugin,

    
add_filter('cf7_2_post_form_append_output', 'append_my_script', 10, 4);
function append_my_script($output, $attr, $nonce, $cf7form_key){
  if(!isset($attr['id'])){
    return $output;
  }
  $cf7_id = $attr['id'];
  if(19 == $cf7_id){ //check this is your form
    $output .= '<script type="text/javascript">';
    $output .= '(function( $ ) {';
    $output .= '  //fire your script once the form nonce event is triggered';
    $output .= '  $(document).on("'.$nonce.'", $("div#'.$nonce.' form.wpcf7-form"), function() {';
    $output .= '  var cf7Form = $("div#'.$nonce.' form.wpcf7-form");';
    $output .= '  ... //your custom scripting';
    $output .= '});';
    $output .= '})( jQuery );';
    $output .= '</script>';
  }
  return $output;
}

    It may still come in handy in the future to further leverage select2 functionality.

    PS: If you use the CF7 plugin on a regular basis, you may want to explore the Smart Grid-layout Design extension which really transforms the capabilities of the plugin.

    Thread Starter philipbutlerfreelance

    (@philipbutlerfreelance)

    4 years, 6 months ago

    Awesome! Thanks for adding the information, it’s handy to know just in case.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    4 years, 6 months ago

    wc. Happy coding!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Map form fields to post taxonomy not working when form is in a modal popup’ is closed to new replies.