WordPress.org

Forums

Contact Form 7
Response in a Bootstrap modal (4 posts)

  1. nmu1
    Member
    Posted 1 year ago #

    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://wordpress.org/plugins/contact-form-7/

  2. Tdude
    Member
    Posted 1 year ago #

    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:
    http://code.tutsplus.com/tutorials/mini-guide-to-contact-form-7--wp-25086
    http://xaviesteve.com/3298/wordpress-contact-form-7-hook-unofficial-developer-documentation-and-examples/

  3. gallantfish
    Member
    Posted 1 year ago #

    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?

  4. nmu1
    Member
    Posted 1 year ago #

    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');

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.