5 Simple Steps to Embed an iFrame Form on Your Site

Written by Formstack on September 18, 2012

Posted in Form Hacks

Post last updated on February 15, 2016.

If your favorite browser is Internet Explorer (IE) or you have an ASP.NET website, you might have noticed that the elements of your form are off when using the JavaScript embed. This is because your form JavaScript is reacting badly to the JavaScript already on your website. With nearly 50% of people worldwide using IE to search the web, this could be a problem.

The solution is the form iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar on the side that requires users to scroll to complete the form. For many, this is bad news from a user experience perspective. The good news is that the scroll bar is really easy to remove. With a few quick and easy changes, you can make your iFrame form appear seamless on your website. (Note: When using a form in iFrame, you are not able to use the standard PayPal integration.)

Here’s the basic iFrame embed code:

<iframe src=”https://www.formstack.com/forms/newname-untitled_contact_form20″ title=”MyForm” width=”600″ height=”400″ scrolling = “no” frameBorder = “0”></iframe>

And here’s how you alter this basic embed code for your site:

1. Adjust the width of your iFrame form.

The first adjustment you might want to make is to change the width of your form. One useful feature of the form iFrame is that the fields will adjust to the width that you set for the form. No need to worry about choosing a size too small to fit the fields in your form!

2. Adjust the height of your iFrame form.

Unfortunately, you will have to do a little bit of trial and error to find the appropriate height for your form. The fields will not resize for you like they do when you adjust the width of the form. The height will be preset to 400 px. Keep adding to the number of pixels until you are able to fill out all of the fields and submit the form.

3. Remove the scroll bar from your iFrame form.

As it turns out, the most annoying feature of the form iFrame happens to be the easiest to remove. Simply add the attribute scrolling = “no” to the embed, and you’re done!

This is how your iFrame form might look after adjusting its height and width and removing the scrollbar:

4. Make the background of your iFrame form transparent.

The next change to the form in iFrame is more of a matter of preference than the previous three. You can make your form background transparent by adding the below CSS to the style template for the form.

For current (version three) Formstack forms, add these CSS rules to your theme:

.fsForm .fsFieldRow div.fsRowBody, .fsForm .fsSpacerRow div.fsRowBody { background: transparent !important; }

.fsboxshadow .fsBody .fsForm {box-shadow: none;}

.fsBody .fsForm, .fsForm .fsFieldRow .fsRowBody, .fsForm .fsSpacerRow .fsRowBody {background: transparent !important;}

body {background-color: transparent; !important;}

If you’re still using version two forms, please contact Support for instructions on upgrading your account to the latest version.

5. Remove the border from your iFrame form.

The final step is to remove the border that the iFrame sets around your form. This step will complete the process of making your form look seamless on your website. Simply add frameBorder = “0” to the CSS embed code to remove the border.

Here’s what your form will look like with the border removed:

And that’s it! The form in iFrame will now appear on your site just like the JavaScript embed. The user will not have to scroll to complete the form, which will boost the user experience. And the form will appear seamless and consistent across all browsers!

For more helpful tips on using an iFrame to embed your form on your website, check out our support doc on Customizing an iFrame.

Not using Formstack yet? Click below to sign up for a free trial today!