Kreiere eine Seite mit Minimal Template, nenne sie z. B. AjaxForm.html.
Im Content wird die Form aufgerufen: {FormBuilder form='AjaxForm'}.
Auf der Seite, auf der der User deine Form präsentiert bekommen soll, muß Jquery und Fancybox eingebunden sein - ich verwende hier Fancybox 1.34, kann man aber auch leicht auf Fancybox 2.x übertragen.
Die Form wird über diesen Link aufgerufen:
<a href="#kontakt_form" class="kontakt">Aufrufen!</a>
Dann noch das zugehörige Java-script:
Code: Select all
<__script__ type="text/javascript">
$(document).ready(function() {
$(".kontakt").fancybox({
'href': 'AjaxForm.html?SHOWTEMPLATE=false',
'onComplete' :function(){
$("#fancybox-content form").on("submit", holen);},
//Dein Fancybox-Styling
'speedIn': 300,
'speedOut': 300
});
function holen( event ){
event.preventDefault();
event.stopPropagation();
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : 'AjaxForm.html?SHOWTEMPLATE=false',
data : $(this).serializeArray(),
success: function(data) {
$.fancybox.hideActivity();
$("#fancybox-content form").replaceWith(data);
$(".cms_form").on("submit", holen);
}
});
}
});
</__script>