Easy FancyBox – Submit Form Data and Close iFrame

Hi, it should be possible but how depends on your form setup…

It may be the easiest to add a so called ‘break-out script’ on that success page. See below for instructions.

If that is not possible, you might be able to use the function parent.$.fancybox.close();return true; on onsubmit/onclick to close the FancyBox iframe. But it will also make the the form break out if the box on submit fail. Note: this will only work if the iframe content (form) and the parent page are hosted on the same domain. Read more on http://fancybox.net/api

Break-out script instructions

Use this inside the success page:

<script type="text/javascript">
this.top.location !== this.location && (this.top.location = this.location);
</script>

(credits: http://css-tricks.com/snippets/javascript/break-out-of-iframe/)

If it’s an external page that you have access to, it’s easy. Simply add the snippet anywhere in the head section. But if the success page an external page you do not have modifying access to, it’s not possible.

If it’s a WordPress page, it might be difficult because you do not want the script to be in every other page on your site, preventing you from displaying the initial form in the iframe. To do this, you might use a plugin like Widget Logic and put the script into a text widget and add a rule that says something like

is_single('thankyou-page-example')

(note: ‘thankyou-page-example’ should correspond with the actual success page slug) into the Widget Logic field.