Open success url from with Fancybox

[ines]

Hi!
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">&#160;</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

[RavanH]

Hi 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 a target="_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 a class="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.

[ines]

Hi!
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 🙂

[Author]

Posts