Open success url from with Fancybox

Your Account / Forums / Easy FancyBox Pro / Open success url from with Fancybox

  • Author
    • Anonymous
      November 14, 2014 at 12:13 am #3973

      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="" method="post">
      <dl class="zend_form">
      <input name="successUrl" type="hidden" value="" />
      <input name="errorUrl" type="hidden" value="" />
      <input name="confirmationUrl" type="hidden" value="">
       <dt id="name-label">
       <label for="name" class="required">Nombre</label>
       <dd id="name-element">
       <input type="text" name="name" id="name" value="" /></dd>
       <dt id="email-label">
       <label for="email" class="required">Email</label>
       <dd id="email-element">
       <input type="text" name="email" id="email" value="" /></dd>
       <dt id="groups-label">
       <dd id="groups-element">
      <input type="hidden" name="groups[]" id="groups-1" value="11" />
       <dt id="submit-label">&#160;</dt>
       <dd id="submit-element">
       <input type="submit" name="submit" id="submit" value="Suscribir" /></dd>

      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
                  type: "POST",
                  cache: false,
                  url: "", // 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

    • November 14, 2014 at 12:13 am #3979

      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

      At first glance, I would change

      url: "", // success.php


      url: "", // 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.

    • Anonymous
      November 14, 2014 at 12:13 am #3992

      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 🙂

  • You must be logged in to reply to this topic.