How do I publish my form through an iFrame?

An IFrame (Inline Frame) is a section of HTML that is embedded inside another HTML document of a webpage. IFrames would be their own independent elements on your site.

If you would like to publish your inline form through an IFrame rather than the Javascript Snippet or Raw HTML coding AWeber provides, this article explains how you can do so.

Step By Step Instructions

  1. Once you create your sign up form, keep note of the height and width of the form. To find the width, be sure to be under the "Form Type" section. Here, the width is provided in pixels.

    Width

    The height of the form is not directly provided, but you can retrieve the height through some developer tools on your browser. If you do not have developer tools, you can always adjust the height of your IFrame after it is created to reflect the size of your form.

    If using a Mac, an alternative would be to hold down "Command + Shift + 4" on your keyboard. You will be able to take a screenshot by selecting the starting/ending point. The pixel height is provided for you (this will be displayed as the bottom number of the two). After you take the screenshot, take note of the height and you can just delete the screenshot.

  2. Once you have the height and width of the form, you will want to go to the Publish section of your sign up form. Copy the URL provided for the form.

    form URL

  3. From here, you will want to open up your favorite text editing program. We recommend using either NotePad for Windows or TextEdit for Mac. Now, you can use the following HTML foundation for your IFrame.

    <iframe src="AWEBER HOSTED URL FOR SIGN UP FORM" style="border:0px #FFFFFF none;" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="NUMBER IN PIXELS" width="NUMBER IN PIXELS">Sign Up Form Name</iframe>


    An example of how this would look is as followed:

    <iframe src="http://forms.aweber.com/form/91/1234567891.htm" style="border:0px #FFFFFF none;" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="200px" width="210px">Sidebar Form</iframe>

Once the coding is published to the site, the form will appear in the dedicated frame you published.

Note: When using an IFrame, the thank you page will appear in the created frame you published. This will be quite small. To avoid this, check off the option to have the thank you page open in a new window.

uncheck open in new window

Have more questions? Submit a request