Sitecore 7 - Use Web Forms for Marketers Form in popup modal

I'm working on setting up a gateway form on a Sitecore 7.2 site using the Web Forms for Marketers module that installed and the fancybox plugin that the site has (the site is using fancybox version 1.3.4, and I cannot update this version or it may break other features on the site that are using this plugin).

This is how the form is supposed to work: The user clicks a link on a page and this opens a popup window with a form they must fill out before they can access a download.

So far, I have gotten things working so that, when a link is clicked on a page, the fancybox modal opens and displays the WFFM form.

Here is the jQuery that does this:

jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        // Open the gateway form into a fancybox modal

        //check to see if there is a gateway form link on the page
        if ($(".protected-item").length > 0) {

            //if so, then we want to target the click event
            $('.protected-item').click(function(event) {
                event.preventDefault();
                //Get the value of the href of the link since this url will contain the page with the gateway form
                var url = $('.protected-item').attr('href');

                //open the page with the gateway form in the fancybox modal
                $.fancybox({
                    'autoDimensions': true,
                    'height': 400,
                    'width': 400,
                    'scrolling': 'no',
                    'href': url,
                    'autoScale': true,
                });

            });
        }
    });
})(jQuery);

What I have done is created a generic page in Sitecore (I called in Gateway Form Test Page) and inserted the test gateway form onto it. Then, on the page I want to feature the gateway form on, I have linked some text ("click here") to that Gateway Form Test Page.

The problem is that, upon hitting the submit button for the WFFM form, the page sends me to the url where the form is located (i.e. domainname/OtherPages/GatewayFormTestPage.aspx) instead of just reloading the fancybox window and displaying the success message or an error message if not all fields are filled in.

I tried setting the type to 'iframe' for the fancybox modal, but all that did was render an empty popup (no content displayed in the fancybox-content block, either--I inspected the element in Chrome's dev tools).

Is there a way that I can wrap the WFFM form in an iframe so I can avoid going to another page when clicking "submit?" I want the user to stay within the popup modal at all times.

Thanks, and I know this is probably a convoluted process, and I wish I could choose a better solution but this is what I must work with.

I think that using iframe is not right approach for your task. It is better to use AJAX requests instead of iframe.

You should check "Is Ajax Mvc Form" on form item to reload only form without page postback. It will allow you get form update without full reloading page.

If you are using WebForms(not MVC) then you can wrap WFFM form into update panel.(not very good for performance and transparency)

And tip about usage WFFM: you should use it only in cases when fields/actions will be managed by marketers. You don't need to use it for all forms on site. Make sure that it is not your case.