Form Tips

Published on September 18th, 2012 | by Formstack Team

2

5 Simple Steps to Embed an iFrame Form on Your Site

• Tweet

If your favorite browser is Internet Explorer or you have an ASP.NET website, you might have noticed the elements of your form are off when using the Javascript embed.  This is due to the Javascript reacting badly to the Javascript already on the website.  With a little over 32% of people using IE to search the web, this could be a problem.

The solution to the problem is the iFrame.  And if you’ve ever tried using the Formstack iFrame embed, you are well aware that it comes with a scroll bar on the side which requires the user to have to scroll to complete the form.  For many, this is bad news from a user experience perspective.  The good news is that it is really easy to remove. With a few quick and easy changes, you can make your form appear seamless on your website.  There is one issue with using the iFrame: you will not be able to use the PayPal WPS integration. Here is the basic iFrame embed, and the following steps will show you how to alter it for your website:

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

This is what your iFrame might look like after adjusting the height, width, and removing the scrollbar.

1.  Adjust the width. The first adjustment you might want to make is to change the width of your form.  One useful feature about the 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. Unfortunately, you will have to do a little bit of trial and error to find the appropriate height of 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 400px.  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. As it turns out, the most annoying feature to the iFrame happens to be the easiest to remove.  Simply add the attribute scrolling = “no” to the embed and you’re done!

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

For version two forms, copy and paste this to your theme: .fsForm .fsFieldRow td.fsRowBody, .fsForm .fsSpacerRow td.fsRowBody { background: transparent !important; }

If you have a version three form, 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;}

5.  Remove the border. 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 the following CSS to the embed to remove the border: frameBorder = “0”

Border = Removed.

And that’s it!  The iFrame will now appear on your site just like the Javascript embed.  The user will not have to scroll to complete the form which can hinder the user experience.  The form now appears seamless and the same across all browsers!

*Percentage of IE users comes from www.statcounter.com

Related Posts

Crowdsource Your Idea with Survey Forms →

5 Simple Steps to Create and Conduct a Survey →

How do I A/B Test My Forms? →

Support How-To: Adding Logos to Your Form →

About the Author

These posts come from a collaboration of multiple team members! Everyone from marketing to development pitches in to share some insight on small business, online forms, data collection, and all things awesome.