Response in a Bootstrap modal

  • Hi,
    I wondered if you would be interested in making some kind of add-on for this where the response can open up in a Bootstrap modal? I have modified my copy of CF7, which means I have to do that every time there is a new version. If you or someone else is interested in writing an addon, let me know and I can send/post the code.

    https://www.ads-software.com/plugins/contact-form-7/

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

  • Hi!

    Somewhere on the web I found this snippet which you could try pasting into the lower most formfield called “Additional settings” in WPCF7. You could probably elaborate on it and you need to have proper Bootstrap markup with a div id called something like the below #myModal. I hope it helps:

    on_sent_ok: "jQuery('#myModal').modal('This is a response.')"

    Then there are these great tutorials:
    https://code.tutsplus.com/tutorials/mini-guide-to-contact-form-7–wp-25086
    https://xaviesteve.com/3298/wordpress-contact-form-7-hook-unofficial-developer-documentation-and-examples/

    I get “undefined is not a function”.
    Valid html code – check
    Modal ID matching jquery selector # – check
    I tried jQuery and $ – no dice
    bootstrap.js (full code, min) loaded AFTER jquery – check

    Any recommendation?

    Thread Starter nmu1

    (@nmu1)

    My hack is opening up includes/js/scripts.js inside the plugin and:

    Comment these lines out at about line 137

    $responseOutput.append(data.message).slideDown('fast');
$responseOutput.attr('role', 'alert');

    Add these lines in their place (create the bootstrap modal on your page template first and change the ID in the below lines accordingly)

    $('#response .modal-body').html('<div class="alert alert-info"><p>'+data.message+'</p></div>');
$('#response').modal('show');

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Response in a Bootstrap modal’ is closed to new replies.