Seamless embedding

Show user guide for
V1

Copy the Seamless embed code from your form's Publish page.

The best way to create a custom experience for your form users is to copy one of the provided embed codes and paste it directly into a page on your website. Additionally, take advantage of the ability to customize your form styles with CSS, or use the Chameleon option in the Style Editor to allow the styles of your webpage to apply to the form.

Prefilling fields

  1. Begin with your form’s Seamless embed code, which is found in the Publish Code section of the Publish page.
  2. Next, add a parameter named “entry” beside the id label, along with some curly brackets. This parameter will help send the data to populate your form in JSON format:
<div class="cognito">
  <script src="https://services.cognitoforms.com/yourforminfo"></script>
  <script>
    Cognito.load("forms", { id: "27", entry: { "Name": { "First": "Bart", "Last": "Simpson" } } });
  </script>
</div>
  1. In between the curly brackets, specify the fields you want to prefill and what exactly to prefill them with. In the above example, the Name field is filled in (“Bart Simpson”). Because a Name field has several different sections (such as First, Last, and Middle), those sections are contained in their own set of curly brackets.
  2. The embedded form will now prefill the Name field upon loading.

Prefilling a form via the Seamless embed code.

Quick Tip
When using Cognito Forms V2, new enhancements allow you to seamlessly embed multiple forms on the same webpage. Learn more about Cognito Forms V2.

Copy the Seamless embed code from your form's Publish page.

The best way to create a custom experience for your form users is to copy one of the provided embed codes and paste it directly into a page on your website. In Cognito Forms V2, you can now seamlessly embed multiple forms on the same webpage. Additionally, take advantage of the ability to customize your form styles with CSS, or use the Chameleon option in the Style Editor to allow the styles of your webpage to apply to the form.

Customizing CSS

You can customize the styling of your seamlessly embedded form using CSS. Plus, you can give each form a unique identifier to style them separately.

  1. Copy your form’s Seamless embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Use a div tag around the code to specify the form ID. Alternatively, simply place your embed code inside any container element on your webpage with a unique ID. The form ID can be any unique identifier (ex: ‘form1’).
    <div id="form1">
    <script src="https://www.cognitoforms.com/f/seamless.js" data-key="Muy2UY3MEke97JKU-QCXPA" data-form="38"> 
    </script>
    </div>
    
  4. Insert an additional style tag directly underneath the code to include your CSS. Include the form ID in front of the CSS property:
     <style> 
     #form1 .cog-button--primary{background-color:#5ACEC8;} 
     </style>
    
  5. Now, the embedded form will display your custom CSS:
    chrome_27geN3E7GV.png
  6. To adjust the styles for multiple embedded forms, give each form a unique identifier and include all the form IDs in the style tag:
    <style>
    #form1 h1{color:red;}
    #form2 h1{color:blue;}
    </style>
    

Prefilling fields

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

Prefilling one form

  1. Copy your form’s Seamless embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Underneath the Seamless embed code, add a script to include your prefill information. In between the curly brackets, 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 form will now prefill with the included Name and Phone field values upon loading.
    chrome_nwF94MdBMq.png

Prefilling multiple forms

  1. Copy your form’s Seamless embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML. Repeat these first two steps for any other forms that you want to embed on the same page.
  3. Above the Seamless embed code, use a div tag to specify the form ID. The form ID can be any unique identifier – in this example, you can specify multiple IDs to prefill two forms at once:
    <div id="form1">
      ...
    </div>
    <div id="form2">
        ...
    </div>
    
  4. Underneath the Seamless embed code, add a script to include your prefill information. Use the Cognito.mount property, followed by the ‘data-form’ number in each form’s embed code and the corresponding form IDs (ex: ‘form1’ and ‘form2’). In between the curly brackets, specify the fields you want to prefill and the values to prefill them with.
    <script>
    Cognito.mount("9","#form1").prefill({"Name":{"First":"John","Last":"Smith"},"Phone":"8034567890","Email":"jsmith@gmail.com"});
    Cognito.mount("10","#form2").prefill({"Name": {"First":"Jane","Last":"Doe"},"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_nwF94MdBMq.png

    Form 2: chrome_5rq9uoGXji.png

Text overrides

With Cognito Forms, you can easily change the default text and language used on your forms. Many text changes can be done very quickly using the visual builder. For example, you can set custom error messages, or write your own placeholder text for most field types.

Of course, you may still want to change individual words or use a language that’s not on our list. You can do that manually using this simple process.

Overriding text on one form

  1. Copy your form’s Seamless embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML.
  3. Underneath the Seamless embed code, add a script to specify the text that you want to override. Then, 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 message will display your custom text.
    chrome_H8XA2Y87Rg.png

Overriding text on multiple forms

  1. Copy your form’s Seamless embed code, located in the Publish Code section of the Publish page.
  2. Paste the code into your webpage’s HTML. Repeat these first two steps for any other forms that you want to embed on the same page.
  3. Above the Seamless embed code, use a div tag to specify the form ID. Give each form a unique identifier:
    <div id="form1">
    ...
    </div>
    <div id="form2">
    ...
    </div>
    
  4. Underneath the Seamless embed code, add a script to specify the text that you want to override. Use the Cognito.mount property, followed by the ‘data-form’ number in the Seamless embed code and the corresponding form IDs (ex: ‘form1’ and ‘form2’). Then, use the .overrideText property to specify the field type (ex: ‘required’) and your custom text:
    <script>
     Cognito.mount("9","#form1").overrideText("required-name-first-and-last","Please enter your first and last name.");
     Cognito.mount("14","#form2").overrideText("required-name-first-and-last","Please enter your first and last name.");
    </script>
    
  5. Now, the required error message will display your custom text.

    Form 1: chrome_nwF94MdBMq.png

    Form 2: chrome_tv01iziJFP.png