Embedding a Form in an IFrame


ActiveForms are usually part of larger websites. The main question at the implementation stage is how to embed forms?

There are 3 standard correct answers:

  • in a new browser window or tab;
  • in the main browser window, by recreating the look of the website (headings, menus and footers) in the layout;
  • in an IFrame.

If executed properly, the last method can provide the best results.

To get the HTML code for embedding a form in an IFrame, go to the Administration Panel on the Form Details screen and click the Embed form link:

The box contains HTML code that you can copy and paste directly into your page. To make sure your embedded form looks good, you need to follow a few rules:

  • Set a frame width that is equal to or greater than the width of the form (which depends on the form layout and the page width).
  • Set the frame height so that the form is never longer than the frame. Most importantly, observe how the form changes its height as a result of validation as well as hiding and showing fields and boxes.
  • Make sure the IFrame doesn’t have borders—use frameborder=”no” (for MSIE) or style=”border: none;” (for other browsers).
  • If you include links to external pages in the form, use target=”top” in their code.

With well created IFrames, you can embed forms transparently without having to recreate large layouts. Your forms can work in the activeforms.com domain, which will remain invisible to the end user, and the server configuration prevents browsers from displaying certificate alerts.

recent posts
3rd Apr 2014
Faster than ever!
5th Dec 2013
Live validation!
2nd Dec 2013
Features distilled
12th Mar 2012
Flicking Channels
26th Jan 2012
Your Own Error Page
9th May 2011
Box Properties
15th Apr 2011
Grouping Fields
13th Apr 2011
Form Versioning
24th Feb 2011
Form Access Modes
22nd Feb 2011
Required Fields
4th Feb 2011