I recently had a request for a full page iFrame as part of a website project.

In short they wanted a URL like this:

mybusinesswebsite.com/application-form

that pulled from another third party website which hosted all their forms as part of some kind of CRM, with a URL like this:

thirdpartyformscompany.com/my-biz-form-1

Effectively they wanted thirdpartyformscompany.com/my-biz-form-1 to be inside mybusinesswebsite.com/application-form but with no other content. To appear as though thirdpartyformscompany.com/my-biz-form-1 was part of the same website, with a consistent URL.

At first I wasn’t sure if it would be possible (putting aside for one moment whether it is desirable / best practice) but it turns out not only that it is, but worked on all the major browsers I tested and worked responsively too.

The answer was from a link I found here:

http://www.dev-explorer.com/articles/full-page-iframe

However to make it easier for any content editors working on the project (and to allow for multiple pages like this potentially) I created a page template in WordPress using a custom field (via Advanced Custom Fields, though you could easily also use CMB2) to make it easier to add additional web pages with iFrames in them.

Finally, they wanted the option to still include scripts on the page, so to retain the built in Genesis functionality for content editors to easily add scripts either globally or for that individual page, I included the genesis_header_scripts() function.

[gist id=ac2f20d9821303c390e9]

This is just one way of using it of course, you can adapt the code from dev-explorer.com to suit your needs.