Iframe embedding

Show user guide for
V1
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:

<script>Cognito.setCss('https://mysite.com/site.css');</script>

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.

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 seamlessly embed your form, try using the responsive Iframe option on the Publish page to provide better compatibility.

Customizing CSS

Quick Tip

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:

  1. Copy your form’s Iframe embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Include a unique iframe ID number within the embed code. The iframe ID can be any unique identifier (ex: ‘form1’):
    <iframe id="form1" src="https://www.cognitoforms.com/f/XahKK9dVBE6JTM2z_XX_RA/9" 
    style="border:0;width:100%;" height="1035"></iframe>
    <script src="https://www.cognitoforms.com/f/iframe.js"></script>
    
  4. Insert an additional script directly underneath the code to include your CSS:
    <script>
    Cognito.setCss("#cognito .cog-button--primary{background-color:#5ACEC8;}");
    </script>
    
    chrome_5RzQ8NzPLM.png
  5. To adjust the styles for multiple embedded forms, include all the iframe IDs before the .setCSS property:
    <script>
    Cognito("#form1").setCss("#cognito .cog-button--primary{background-color:#5ACEC8;}");
    Cognito("#form2").setCss("#cognito .cog-button--primary{background-color:#5ACEC8;}");
    </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

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.

Prefilling one form

  1. Copy your form’s Iframe embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Underneath the Iframe embed code, add a script to include your prefill information. Use the prefill property to specify the fields you want to prefill and the values to prefill them with.
    <script>
    Cognito.prefill({"Name": 
    {"First":"John","Last":"Smith"},"Phone":"8034567890","Email":"jsmith@gmail.com"});
    </script>
    
  4. The embedded forms will now prefill with the included Name and Phone field values upon loading.
    chrome_T1kNZ09YKQ.png

Prefilling multiple forms

  1. Copy your form’s Iframe embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Include a unique iframe id number within the embed code. The form ID can be any unique identifier (ex: ‘form1’ and ‘form 2’):
    <iframe id="form1" src="https://www.cognitoforms.com/f/XahKK9dVBE6JTM2z_XX_RA/9" 
    style="border:0;width:100%;" height="1035"></iframe>
    <iframe id="form2" src="https://www.cognitoforms.com/f/XahKK9hydE6JTM2z_UI_RA65" 
    style="border:0;width:100%;" height="1035"></iframe>
    <script src="https://www.cognitoforms.com/f/iframe.js"></script>
    
  4. Underneath the Iframe embed code, add a script to include your prefill information. Include the iframe ids and use the prefill property. In between the curly brackets, specify the fields you want to prefill and the values to prefill them with.
    <script>
    Cognito("#form1").prefill({"Name": 
    {"First":"John","Last":"Smith"},"Phone":"8034567890","Email":"jsmith@gmail.com"});
    Cognito("#form2").prefill({"Name": 
    {"First":"Jane","Last":"Murphy","Phone":"8030987654","Email":"jsmurphy@gmail.com"});
    </script>
    
  5. The embedded forms will now prefill with the included Name and Phone field values upon loading.

    Form 1: chrome_T1kNZ09YKQ.png

    Form 2: chrome_5rq9uoGXji.png

Text overrides

Quick Tip

Refer to our text overrides help guide to see a full list of of possible field types and text that you can override.

You can easily change the default text and language used on your forms by setting custom error messages or writing your own placeholder text. But you also have the option to manually override the text on your form using this simple process. Refer to our text overrides help guide to see a full list of of possible field types and text that you can override.

Overriding text on one form

  1. Copy your form’s Iframe embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Underneath the Iframe embed code, add a script to specify the text that you want to override. Use the .overrideText property to specify the field type (ex: ‘required’) and your custom text:
    <script>
    Cognito.overrideText("required-name-first-and-last","Please enter your first and last name.");
    </script>
    
  4. Now, the required error messages on each form will display your custom text.
    chrome_H8XA2Y87Rg.png

Overriding text on multiple forms

  1. Copy your form’s Iframe embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Include a unique iframe id number within the embed code. The form ID can be any unique identifier (ex: ‘form1’ and ‘form 2’):
    <iframe id="form1" src="https://www.cognitoforms.com/f/XahKK9dVBE6JTM2z_XX_RA/9" 
    style="border:0;width:100%;" height="1035"></iframe>
    <iframe id="form2" src="https://www.cognitoforms.com/f/XahKK9hydE6JTM2z_UI_RA65" 
    style="border:0;width:100%;" height="1035"></iframe>
    <script src="https://www.cognitoforms.com/f/iframe.js"></script>
    
  4. Underneath the Iframe embed code, add a script to specify the text that you want to override. Include the iframe ids and use the .overrideText property to specify the field type (ex: ‘required’) and your custom text:
    <script>
    Cognito("#form1").overrideText("required-name-first-and-last","Please enter your first and last name.");
    Cognito("#form2").overrideText("required-name-first-and-last","Please enter your first and last name.");
    </script>
    
  5. Now, the required error messages on each form will display your custom text.

    Form 1: chrome_H8XA2Y87Rg.png

    Form 2: chrome_Dd0PwgF24D.png