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

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:

<script>Cognito.setCss('https://mysite.com/site.css');</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.