Form in Fancybox öffnen

Dieses Board ist für Anleitungen gedacht, wie man bestimmte (komplexe) Dinge mit CMSms erledigen kann - User-Beiträge herzlich willkommen!
Post Reply
Kumquats
Forum Members
Forum Members
Posts: 11
Joined: Tue Feb 04, 2014 10:34 am

Form in Fancybox öffnen

Post by Kumquats »

Meine erfolgreiche Art, eine Form dem User mit Fancybox anzuzeigen (bei der zum Beispiel auch Captcha beim ersten Mal validiert, ist nach folgende:

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>
Viel Spass damit!
Post Reply

Return to “HowTo's”