Iframe embedding

Show user guide for
Quick Tip

When using Cognito Forms V2, new options may require you to adjust the prefill syntax for Iframe embedding.

Iframe embed option.

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 provide better compatibility and shorten load times.

Passing CSS into an Iframe

When customizing your Iframe with CSS, keep all the code (including style tags and CSS) on one line rather than spacing it out.

CSS may be passed down into the Iframe as follows:

Begin with your form’s Iframe embed code, located in the Publish Code section of the Publish page.
Paste the code into your webpage’s HTML. Then, insert some additional script directly underneath the code to include your CSS:

<script>Cognito.setCss('body { background-color: #ff0000; }');</script>

You can also pass-in a Url for a stylesheet by inserting the address of your CSS file:


By default, the embedded form is centered on the page. However, you can use the Float property to align the form to the left or right:

<script>Cognito.setCss('.cognito {float: left;}')</script>

Prefilling values in 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.