Load formular with ajax and display it in fancybox lightbox
Just a code snippet:
The link:
<a href="#" id="the-opener-link" data-url="/link/to/form">Open form</a>
The JavaScript:
$('#the-opener-link').click(function(event) { $.fancybox.open({ href:$(this).attr('data-url'), type: 'ajax', afterShow: function() { $(".fancybox-inner form").bind("submit", function () { $.fancybox.showLoading(); $.ajax({ type: "POST", cache: false, url: $(this).attr('action'), data: $(this).serializeArray(), success: function (data) { $.fancybox(data); } }); return false; }); } }); return false; });
I’m using a data attribute to protect the form being indexed and used by bots/search engines.