Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Download PDFDownload PDF
Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Formstack
/
November 18, 2018
Blog

5 Simple Steps to Embed an iFrame Form on Your Site

MIN
/
November 18, 2018
About the Episode
Episode Highlights
Meet our Guest
Episode Transcript

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.
Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Get the Report

Great, thank ya!

You can now access the content.
Oops! Something went wrong while submitting the form.
Blog

5 Simple Steps to Embed an iFrame Form on Your Site

Panelists
No items found.
Introduction
Introduction

Great, thank ya!

You can now access the content.
Download NowDownload Now
Oops! Something went wrong while submitting the form.

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.
Panelists
No items found.
Infographic

5 Simple Steps to Embed an iFrame Form on Your Site

Learn how to embed an iframe form on your website with these five easy-to-follow steps. Update backgrounds, remove scroll bars and more.
Download InfographicDownload Infographic

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.

Collecting payments with online forms is easy, but first, you have to choose the right payment gateway. Browse the providers in our gateway credit card processing comparison chart to find the best option for your business. Then sign up for Formstack Forms, customize your payment forms, and start collecting profits in minutes.

Online Payment Gateway Comparison Chart

NOTE: These amounts reflect the monthly subscription for the payment provider. Formstack does not charge a fee to integrate with any of our payment partners.

FEATURES
Authorize.Net
Bambora
Chargify
First Data
PayPal
PayPal Pro
PayPal Payflow
Stripe
WePay
ProPay
Monthly Fees
$25
$25
$149+
Contact First Data
$0
$25
$0-$25
$0
$0
$4
Transaction Fees
$2.9% + 30¢
$2.9% + 30¢
N/A
Contact First Data
$2.9% + 30¢
$2.9% + 30¢
10¢
$2.9% + 30¢
$2.9% + 30¢
$2.6% + 30¢
Countries
5
8
Based on payment gateway
50+
203
3
4
25
USA
USA
Currencies
11
2
23
140
25
23
25
135+
1
1
Card Types
6
13
Based on payment gateway
5
9
9
5
6
4
4
Limits
None
None
Based on payment gateway
None
$10,000
None
None
None
None
$500 per transaction
Form Payments
Recurring Billing
Mobile Payments
PSD2 Compliant

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.

Post last updated on September 3, 2019.

Are you focused on creating the ultimate customer experience? Providing your customers with smooth, simple, and stress-free ways to interact with your business is key to retaining customers long-term. If you're using forms as a way to engage with customers and collect crucial information, you probably want them embedded on your site to provide the best experience possible.

If Internet Explorer (IE) is a required browser for your organization or you have an ASP.NET website, you might have noticed that the elements of your form are off when embedding with JavaScript. This is because your form JavaScript is reacting to the existing JavaScript on the website.

One solution to this is to embed using an iFrame. But if you’ve ever tried using the Formstack iFrame embed, you know it comes with a scroll bar that requires users to scroll to complete the form. For many, this can be challenging from a user experience perspective. The good news is that the scroll bar is 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 PayPal Standard integration due to the redirect requirements needed with PayPal.

[Tweet "With a few quick changes, you can make your iFrame form appear seamless on your website. @formstack"]

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!

Related: How to Embed a Form on Wordpress.org

2. Adjust the height of your iFrame form.

As a best practice, you will have to adjust your form height which may require some trial and error to find an appropriate form height to compliment the host site. 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 challenging 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:

how to embed an iFrame with a Formstack form
Learn More: How to embed your Formstack form into a Shopify page.

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;}

As a best practice, we recommend updating all older versions of forms to the latest version, V3.  Forms created on or after June 7th, 2012, will be automatically set to V3. To check or update your form version, please see our Version 3 updater guide.  

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.

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 Help Guide on Customizing an iFrame.

If you're in need of a flexible form builder that makes it easy to build beautiful, branded forms, you've found it! Start your Formstack free trial now to see how simple it can be to launch forms that improve the overall customer experience.
Formstack
Formstack is a SaaS company with a mission to help organizations digitize what matters, automate workflows, and fix processes—all without code. A variety of team members come together to compile posts under Formstack's authorship.
More Articles
Meet The Host
CEO of
Connect
Chris is on a mission to turn people into great leaders. He's passionate about helping problem solvers see more value in the work they do every day.