Configuring Embedded Online Form

Easily embed our forms into your website with just a few clicks. Whether you’re a developer or a site owner, follow these steps to get started:

Step 1 - Choose the embedding option that best fits your needs.
Step 2 - Once you've selected an option, a code snippet will be generated for you. Copy the generated code.
Step 3 - Insert the generated code into the <head> tag of your HTML.
Step 4 - Ensure the id attribute of the target <div> matches the elementId provided in the generated code. The default id is clevero-forms.

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://forms.clevero.co/clevero-forms.iife.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                CleveroForms({
                    elementId: "clevero-forms",
                    formUrl: "https://forms.clevero.co/[uniqueId]/[accessKey]",
                    embeddingConfig: {
                        embedType: "INLINE",
                    },
                });
            });
        </script>
    </head>
    <body>
        <!-- ...rest of your code -->
        <div id="clevero-forms">I want my clevero-forms to be embedded here</div>
    </body>
</html>

📘
Info:
The elementId should match the <div>'s id attribute as shown above.

Embedding Multiple Forms on the Same Page

To embed different forms within various sections of the same page, follow these additional steps:

Unique IDs for Each Div: Assign a unique id to each target <div> where you want to embed a form.
Call the Script Separately: For each form you embed, call the embedding script with the respective unique id of each target <div>. This ensures that each form operates independently without sharing state or data.

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://forms.clevero.co/clevero-forms.iife.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                CleveroForms({
                    elementId: "login-form-1",
                    formUrl: "https://forms.clevero.co/[uniqueId]/[accessKey]",
                    embeddingConfig: {
                        embedType: "INLINE",
                    },
                });
                CleveroForms({
                    elementId: "login-form-2",
                    formUrl: "https://forms.clevero.co/[uniqueId]/[accessKey]",
                    embeddingConfig: {
                        embedType: "INLINE",
                    },
                });
            });
        </script>
    </head>
    <body>
        <!-- ...rest of your code -->
        <div id="login-form-1">I want my first login form here</div>
        <!-- ...rest of your code -->
        <div id="login-form-2">I want my second login form here</div>
        <!-- ...rest of your code -->
    </body>
</html>

👍
Note
To embed the same form multiple times on the same page, call the script with different elementId for each instance.

Embedding the Same Form on Different Pages

This case is used if you need to embed the same form within various sections of the same page or on different pages. You only need to include the script in the <head> tag once.

Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://forms.clevero.co/clevero-forms.iife.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                CleveroForms({
                    elementId: "login-form",
                    formUrl: "https://forms.clevero.co/[uniqueId]/[accessKey]",
                    embeddingConfig: {
                        embedType: "INLINE",
                    },
                });
            });
        </script>
    </head>
    <body>
        <!-- PAGE 1 -->
        <!-- ...rest of your code -->
        <div id="login-form">I want my login form here</div>
        <!-- ...rest of your code -->
    </body>
</html>

To embed the same form on other pages, you only need to include the form’s div with the correct id on each page.

<!-- PAGE 2 -->
<!-- ...rest of your code -->
<div id="login-form">I want my login form here as well.</div>
<!-- ...rest of your code -->

📌 Need Help?

If you require assistance or encounter any issues, please don't hesitate to contact us for further support.