Cognito Forms logo

Iframe embedding

When embedding a form onto your website, some type of coding interaction or conflict between your form and your site may prevent the form from loading properly on the page. When you encounter a problem trying to embed your form, try using the responsive Iframe option on the Publish page to shorten load times.

Passing CSS into an Iframe

CSS may be passed down into the Iframe as follows:

  • Begin with your form's Iframe embed code, which is found in the Publish Code section of the Publish page:

  • Paste the code into your webpage's HTML. Then, insert some additional script to include your CSS elements (make sure to replace the sample Iframe code in this example with your own form's Iframe embed code):
<iframe src="http://services.cognitoforms.com/f/ZsjGPA_aHk-4tz-_tlEvpw?id=4" style="position:relative;width:100%;" frameborder="0" scrolling="no" seamless="seamless" height="1610" width="100%"></iframe><br />
<script src="https://services.cognitoforms.com/scripts/embed.js"></script><br />
<script>
      Cognito.setCss('body { background-color: #ff0000; }');
</script>
  • You may also pass-in a Url for a stylesheet by inserting the address of your CSS file:
<iframe src="http://services.cognitoforms.com/f/ZsjGPA_aHk-4tz-_tlEvpw?id=4" style="position:relative;width:100%;" 
frameborder="0" scrolling="no" seamless="seamless" height="1610" width="100%"></iframe><br />
<script src="https://services.cognitoforms.com/scripts/embed.js"></script><br />
<script>
      Cognito.setCss('https://mysite.com/site.css');
</script>

Prefilling values into an Iframe

With both the Seamless and the Iframe embed options, Cognito Forms can use properly formatted JSON to support prefilling form data. Learn more about prefilling fields.

Printable View