› Forums › Easy FancyBox Pro › Open success url from with Fancybox
Tagged: ajax, form, iframe, success ur, url
- This topic has 2 replies, 2 voices, and was last updated 9 years ago by
ines.
-
AuthorPosts
-
-
14 November 2014 at 00:13 #3973
ines
ParticipantHi!
I have a newsletters subscription form in my site. I’d like to open success/error page with Fancybox but the problem is that the action is inside “form” tag and I can’t change that because it’s given by Mail Relay like that.
The code:<form id="myform" class="fancybox.ajax" enctype="application/x-www-form-urlencoded" action="http://velodrombiketours.ip-zone.com/ccm/subscribe/index/form/" method="post"> <dl class="zend_form"> <input name="successUrl" type="hidden" value="http://www.velodrombiketours.com/newsletter/activar.html" /> <input name="errorUrl" type="hidden" value="http://www.velodrombiketours.com/newsletter/error.html" /> <input name="confirmationUrl" type="hidden" value="http://www.velodrombiketours.com/newsletter/activacion-confirmada.html"> <dt id="name-label"> <label for="name" class="required">Nombre</label> </dt> <dd id="name-element"> <input type="text" name="name" id="name" value="" /></dd> <dt id="email-label"> <label for="email" class="required">Email</label> </dt> <dd id="email-element"> <input type="text" name="email" id="email" value="" /></dd> <dt id="groups-label"> </dt> <dd id="groups-element"> <input type="hidden" name="groups[]" id="groups-1" value="11" /> </dd> <dt id="submit-label"> </dt> <dd id="submit-element"> <input type="submit" name="submit" id="submit" value="Suscribir" /></dd> </dl> </form>
Succes url is in the action of the form.
There are also links that I can use as success or error url, but they are inside an “input” tag…
Is there any way to open these urls with Fancybox and they work?I already wrote a code and the window actually opens… but mail is not sent!
jQuery(document).ready(function() { $('#myform #submit').on("click", function (e) { e.preventDefault(); // avoids calling success.php from the link $.ajax({ type: "POST", cache: false, url: "http://www.velodrombiketours.com/newsletter/activar.html", // success.php data: $("#myform").serializeArray(), // all form fields success: function (data) { // on success, post returned data in fancybox $.fancybox(data, { // fancybox API options fitToView: false, openEffect: 'none', closeEffect: 'none' }); // fancybox }, // success error: function(data) { alert("Ha habido un error"); } }); // ajax }); // on }); //ready
Any ideas?
Hope I explain myself well enough, apoligizes for my english -
14 November 2014 at 18:27 #3979
RavanH
KeymasterHi Ines, it looks like the code snippet you use is from fancyBox2 not FancyBox. Although a bit similar, these two lightboxes are not the same. You can see an example of how this ajax snippet would need to look like on http://fancybox.net/blog.
At first glance, I would change
url: "http://www.velodrombiketours.com/newsletter/activar.html", // success.php
to
url: "http://velodrombiketours.ip-zone.com/ccm/subscribe/index/form/", // submit.php
because that parameter is supposed to hold the submission URL, not the thank you message page.
But even then, FancyBox will expect an ajax response which is not what that submit URL will give… When using FancyBox in conjunction with an ajax form submission, you NEED to have control over both the form and the submission response to be able to make them work together nicely. I do not think that you have that since this is an external mailing list provider. Or am I mistaken?
My guess is that you’ll need to approach this differently.
Since you are not allowed to change the submission form AND you cannot change the response to fit your case, BUT you still want all of this to happen within a lightbox, you will need to start the whole proces inside a lightboxed iframe.
1. Create a stand-alone HTML file (complete with basic html/head/body tags and style rules) and place your registration form inside it.
2. Upload it to an accessible place on your webserver/hosting space.
3. Create a link on your WordPress site to that stand-alone html page.
4. Give that link atarget="_blank"
attribute and style it as a button (for example) to fit your sites design.
5. Test your button and form. It should (at this point) open in a new tab, the form needs to look good and form submission should work.
6. Finally, if all works well, give that link aclass="fancybox-iframe"
attribute and make sure you activate the iFrame option on your Settings > Media admin page.From then on, the form will open in a lightbox and both submission and response will (should) happen within that same lightbox iframe.
-
17 November 2014 at 10:34 #3992
ines
ParticipantHi!
I finally solved it with an easy and simple solution:
No fancybox!
I just show an iframe below the form when it’s submitted. This iframe loads success url or error url and… that’s all!Thanks anyway for your answers 🙂
-
-
AuthorPosts
- You must be logged in to reply to this topic.