Formstack

Customizing an iFrame

The iFrame embed code will allow you to embed more than one Formstack form on a page and can also be used to avoid any conflicts that may occur with the CSS or Javascript on a website.  You can find the iFrame embed by going to the form > Publish > Embed Form. The iFrame Embed is the bottom option listed. 



The iFrame embed code can be easily customized directly from the embed code.  Often when a form is embedded with an iFrame there is a default scrolling bar if the form is larger than the iFrame. In order to avoid this, there are two options that can be added to easily adjust the iFrame. 


One option is to change the height and width of the iFrame to match the form by changing the numbers for the height and width in the code as shown below.


<iframe src="https://jk.formstack.com/forms/new_form_name" title="Basic" width="600" height="400"></iframe>


You can also remove the border and scroll bar. You can add scrolling = "no" and frameBorder = "0" to the embed code to remove this bar.   Heads up: If you remove the scroll bar from the form, make sure to set the height so that the submit button does not get cut off.  


<iframe src="https://jk.formstack.com/forms/new_form_name" title="Basic" width="600" height="400" frameBorder="0" scrolling="no"></iframe>


Good to Note:  The iFrame embed code is not mobile responsive.