0

I'm trying to get a Contact Form 7 form to work in a Featherlight.js lightbox. I've created a page at mydomain.com/contact and set the link to open mydomain.com/contact #main article.

Featherlight does open the form, but when I submit the form, the lightbox closes and the url resolves to mydomain.com/contact/#wpcf7-f262-p11-o1. It doesn't matter if it's successfully submitted or there are validation errors, the lightbox still closes (to be clear, the form does actually work—I receive the email).

If I open the entire page (mydomain.com/contact/), the lightbox doesn't close on submission, which leads me to believe that perhaps there's an AJAX conflict.

That said, I don't receive any errors in the console.

Any help in resolving the issue would be appreciated!

Thanks.

notGettingStabbed
  • 43
  • 6

1 Answers1

1

I've got it working, thanks to the second part of the accepted answer here (the Documentation example from the jQuery website).

jQuery's submit() function didn't work for me—I'm guessing it's a version issue? In any case, this is my final code:

   /* attach a submit handler to the form */
   $( "body" ).on( "submit", ".wpcf7-form", function(event) {

        /* stop form from submitting normally */
        event.preventDefault();

        /* get some values from elements on the page: */
        var $form = $( this ),
          url = $form.attr( 'action' );

        /* Send the data using post */
        var posting = $.post( url, $form.serialize() );

        /* Put the results in a div */
        posting.done(function(data) {
            var content = $(data).find('.wpcf7-form');
            $('.featherlight .wpcf7').empty().append(content);
        });
    });
Community
  • 1
  • 1
notGettingStabbed
  • 43
  • 6