Embedding an ONFORM

Any ONFORM you create can be easily embedded on your website as an iFrame. Plus you can also set it up so that the iFrame changes height dynamically as your ONFORM changes height, offering respondents the very best experience.

To embed your ONFORM as an iFrame, copy this code and paste it on the webpage where you want your ONFORM to display – just simply replace https://example.onform.net/form/example-onform/ with your ONFORM URL:

<style>#of-iframe{width: 1px;min-width: 100%;border:0;}</style>
<div id="of-iframe-wrapper"><iframe id="of-iframe" src="https://example.onform.net/form/example-onform/?is_iframe=yes" onload="iFrameResize()"></iframe></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.6/iframeResizer.min.js" integrity="sha512-j/HsLBw52e0YfNwF+kgUxxmMIhwtNqSMgK35/joE7yjtGeMW0MZEnd3B/PFINXk4vIrRDb0jJg+xRySvEAjskQ==" crossorigin="anonymous"></script>
<script>iFrameResize({minSize:100,scrollCallback: function(pos){if(pos.y<jQuery(window).scrollTop()){jQuery('html,body').animate({scrollTop:pos.y},400);}return false;}},'#of-iframe');</script>

By copying the 4 lines of code above and pasting them on your webpage you will get this:

Remember, to display your ONFORM instead of the example shown above, all you have to do is change https://example.onform.net/form/example-onform/ (on line 2) to your ONFORM URL. For example, if your ONFORM URL is https://mycompany.onform.net/form/this-is-a-test/ then your code will look like this:

<style>#of-iframe{width: 1px;min-width: 100%;border:0;}</style>
<div id="of-iframe-wrapper"><iframe id="of-iframe" src="https://mycompany.onform.net/form/this-is-a-test/?is_iframe=yes" onload="iFrameResize()"></iframe></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.6/iframeResizer.min.js" integrity="sha512-j/HsLBw52e0YfNwF+kgUxxmMIhwtNqSMgK35/joE7yjtGeMW0MZEnd3B/PFINXk4vIrRDb0jJg+xRySvEAjskQ==" crossorigin="anonymous"></script>
<script>iFrameResize({minSize:100,scrollCallback: function(pos){if(pos.y<jQuery(window).scrollTop()){jQuery('html,body').animate({scrollTop:pos.y},400);}return false;}},'#of-iframe');</script>

You'll notice in the above example that the ONFORM scrolls smoothly to the top when the next question displays. This functionality requires something call jQuery, if your site does not use jQuery then use this code instead:

<style>#of-iframe{width: 1px;min-width: 100%;border:0;}</style>
<div id="of-iframe-wrapper"><iframe id="of-iframe" src="https://mycompany.onform.net/form/this-is-a-test/?is_iframe=yes"></iframe></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.6/iframeResizer.min.js" integrity="sha512-j/HsLBw52e0YfNwF+kgUxxmMIhwtNqSMgK35/joE7yjtGeMW0MZEnd3B/PFINXk4vIrRDb0jJg+xRySvEAjskQ==" crossorigin="anonymous"></script>
<script>iFrameResize({minSize:100},"#of-iframe");</script>

If you don't want the iFrame to resize with your ONFORM, then you can simplify the code to just this:

<style>#of-iframe{width: 1px;min-width: 100%;border:0;}</style>
<div id="of-iframe-wrapper"><iframe id="of-iframe" src="https://mycompany.onform.net/form/this-is-a-test/?is_iframe=yes"></iframe></div>

Or, if your site already has CSS set up for the iFrame, and you don't want the iFrame to resize with your ONFORM then you can simplify it even further to this:

<iframe id="of-iframe" src="https://mycompany.onform.net/form/this-is-a-test/?is_iframe=yes"></iframe>

FAQ