PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

FancyBox 1.3 Modal Form Not Submitting - Iframe?

  1. Followed your tutorial closely and my modal form launches, populates dynamic content but goes away on Submit without sending data or validating (displaying errors). When the same form is launched in a new window (sans fancy) it works fine.
    My understanding of this issue suggests that something in the iframe support might be preventing the modal form from functioning properly. Could it be the new version of Fancybox since your tutorial?
    Anyone successfully implement this with Fancby box 1.3?
    Thanks for a rockin plugin!

    Posted 9 years ago on Thursday February 4, 2010 | Permalink
  2. Hey Scott, received your support request on this. Kevin will be responding soon. I will ask him to include his response here as well as via email. Thanks!

    Posted 9 years ago on Thursday February 4, 2010 | Permalink
  3. Scott, I found the issue finally. It appears there are some new declarations to add in the jQuery snippet to get this to work. I'm assuming this is something new to the latest release of their script.

    You'll want to replace the jQuery snippet in the head with this..

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.0.css" media="screen" />
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    
    		$("a.iframeFancybox1").fancybox({
    			'width'		      :	800,
    			'height'		      :	600,
    			'overlayOpacity'	 :	'0.4',
    			'overlayColor'		 :	'#000',
    			'hideOnContentClick' :   false,
    			'autoScale'     	 :   false,
            		'transitionIn'		 :   'elastic',
    			'transitionOut'	 :   'elastic',
    			'type'			 :   'iframe'
    		});
    	});
    </script>

    If you're not using the "zoom" class or the "iframeFancybox2" from the previous example for anything, it's safe to just replace the whole script block.

    You'll notice that this one actually specifies the type as "iframe". It was using the ajax method before to load the content and when you submitted the form, it refreshed the parent page, not the form page in an iframe.

    I duplicated your page and tested remotely and got it working as intended. You can see a screenshot of the validation error in the iframe.

    Hope that helps out and please let us know if we can help with anything else.

    Posted 9 years ago on Friday February 5, 2010 | Permalink
  4. I updated the original post with the new scripts so anyone who's interested can refer back to that for the complete setup instructions.

    http://www.gravityhelp.com/creating-a-modal-form-with-gravity-forms-and-fancybox/

    Posted 9 years ago on Friday February 5, 2010 | Permalink

This topic has been resolved and has been closed to new replies.