Styles Overriding

You can customise the appearance of your online forms using two methods:

Method 1: stylesOverridesUrl

Link a hosted CSS file to your forms using a URL.

Example Usage

<!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",
                        stylesOverridesUrl: "//url to your own custom css file"
                    }
                });
            });
        </script>
    </head>
    <body>
        <!-- ...rest of your code -->
        <div id="clevero-forms">I want my clevero-forms to be embedded here</div>
    </body>
</html>

📘
Note
Since the URL is added as a stylesheet in the <head>, changes will affect all clevero-forms embedded on your website.

Method 2: stylesOverrides

Apply custom styles directly to specific parts of the Clevero forms using predefined classNames.

Example Usage

<!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",
                        stylesOverrides: {
                            "clevero-forms-root": {},
                            "clevero-forms-buttons": {},
                            "clevero-forms-body": {},
                            "clevero-forms-field-label": {},
                            "clevero-forms-field-input": {},
                            "clevero-forms-fieldtype-not-supported": {},
                            "clevero-forms-field-error": {},
                            "clevero-forms-modal": {},
                            "clevero-forms-stepper": {},
                            "clevero-forms-page-title": {},
                            "clevero-forms-section": {},
                            "clevero-forms-footer": {},
                            "clevero-forms-scrollbar": {}
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <!-- ...rest of your code -->
        <div id="clevero-forms">I want my clevero-forms to be embedded here</div>
    </body>
</html>

stylesOverrides Configuration

Here’s a guide to the class names you can target with stylesOverrides:

1. clevero-forms-root

Targets the base element.

Key	Type	Values	Description
`fontSize`	string	1rem \| 16px	Supports units (rem, px).
`fontFamily`	string	monospace	Font family for the form.

🚧
Info
Ensure the font family is loaded correctly on the website where the clevero-forms are embedded.

2. clevero-forms-buttons

Targets the buttons.

Key	Type	Values	Description
`fontSize`	string	1rem \| 16px	Supports units (rem, px).
`border`	string	`#ff0000`	Supports hex values.
`borderFocus`	string	`#ff0000`	The border colour on focus.
`borderRadius`	string	1rem \| 16px	Targets border’s radius
`borderWidth`	number	1 \| 2 \| 3	Defaults as px values internally, e.g. 1px \| 2px \| 3px
`boxShadow`	boolean \| string	“4px 4px #00000033” \| true	Default value is "1px 1px 4px 1px rgba(0, 0, 0, 0.1)"

3. clevero-forms-body

Targets the base of the form’s body.

Key	Type	Values	Description
`background`	string	`#ff0000`	Supports hex values.

4. clevero-forms-field-label

Targets the labels of the fields.

Key	Type	Values	Description
`color`	string	`#ff0000`	Target text color.
`border`	string	"bold" \| "normal" \| "bolder" \| "lighter" \| "initial" \| "inherit"	Target font-weight.
`borderFocus`	string	"info" \| "circle-info" \| "square-info" \| "question" \| "circle-question" \| "square-question" \| "exclamation" \| "circle-exclamation" \| "square-exclamation"	Description icon style (for icon thumbnails, see FontAwesome)
`borderRadius`	string	`#ff0000`	Colour of Description Icon
`borderWidth`	string	“2xs” \| “xs” \| “sm” \| “lg” \| “xl” \| “2xl”	Target size of Description Icon. For more icon sizes, refer to this page.
`boxShadow`	string	“right-start” \| “top-start”	Target size of Description Icon. For more icon sizes, refer to this page.

5. clevero-forms-field-input

Targets the input elements of the fields.

Key	Type	Values	Description
`fontSize`	string	1rem \| 16px	Supports units (rem, px).
`padding`	string	"sm" \| "md"	Padding of the input field.
`background`	string	`#ff0000`	The base colour of the field input. It supports hex values.
`backgroundFocus`	string	`#ff0000`	The background color on focus. It supports hex values.
`backgroundError`	string	`#ff0000`	The background color on error. It supports hex values.
`border`	string	`#ff0000`	Supports hex values.
`borderFocus`	string	`#ff0000`	The border colour is on focus. It supports hex values.
`borderError`	string	`#ff0000`	The border color on error.
`borderRadius`	string	1rem \| 16px	The border radius.
`borderWidth`	number	1 \| 2 \| 3	Defaults as px values internally, e.g. 1px \| 2px \| 3px.
`boxShadow`	boolean \| string	“4px 4px #00000033” \| true	Default value is "1px 1px 4px 1px rgba(0, 0, 0, 0.1)".

6. clevero-forms-field-fieldtype-not-supported

Targets unsupported field types.

Key	Type	Values	Description
`color`	string	`#ff0000`	Base color of unsupported input fields
`background`	string	`#ff0000`	Base color of unsupported input fields
`border`	string	`#ff0000`	Border colour.
`borderRadius`	string	1rem \| 16px	Border radius.
`borderWidth`	number	1 \| 2 \| 3	Defaults as px values internally, e.g. 1px \| 2px \| 3px.
`boxShadow`	boolean \| string	“4px 4px #00000033” \| true	Default value is "1px 1px 4px 1px rgba(0, 0, 0, 0.1)".

7. clevero-forms-field-error

Targets validation error messages.

Key	Type	Values	Description
`color`	string	`#ff0000`	Error message color. It supports hex values.
`fontSize`	string	1rem \| 16px	Supports units (rem, px).

8. clevero-forms-modal

Targets modals within Clevero forms, such as the Add Availability modal.

Key	Type	Values	Description
`color`	string	`#ff0000`	Modal color. It supports hex values.
`background`	string	`#ff0000`	Modal background colour.
`borderRadius`	string	1rem \| 16px	Modal border radius.
`boxShadow`	boolean \| string	“4px 4px #00000033” \| true	Default value is "1px 1px 4px 1px rgba(0, 0, 0, 0.1)".

9. clevero-forms-stepper

Targets the stepper.

Key	Type	Values	Description
`fontSize`	string	1rem \| 16px	Supports units (rem, px).
`color`	string	`#ff0000`	Supports hex values.
`colorCurrentStep`	string	`#ff0000`	Target text colour for the current step
`background`	string	`#ff0000`	It supports hex values and targets the base of field input.
`backgroundError`	string	`#ff0000`	Supports hex values and targets background colour on error.
`backgroundCompleted`	string	`#ff0000`	Targets background color on step completion.
`backgroundCurrentStep`	string	`#ff0000`	Targets background of the current step.
`stepperButtonStyle`	string	`#ff0000`	Targets stepper button.
`stepperButtonSize`	string	“circle” \| “square”	Targets the stepper button’s height and width.
`borderRadius`	string	1rem \| 16px	Targets border’s radius.
`boxShadow`	boolean \| string	“4px 4px #00000033” \| true	Default value is "1px 1px 4px 1px rgba(0, 0, 0, 0.1)".
`indicatorBackground`	string	`#ff0000`	Target the background colour of the indicator.
`indicatorProgressBackground`	string	`#ff0000`	Targets background colour of indicator progress.
`iconError`	string	"xmark" \| "exclamation" \| "ban" \| "flag" \| "star-exclamation" \| "shield-exclamation"	Targets the stepper icon for errors. Refer to FontAwesome for icons.
`iconErrorColor`	string	ff0000	Targets color of `iconError`.
`iconCompleted`	string	"check" \| "badge-check" \| "shield-check" \| "award" \| "trophy" \| "star" \| "trophy-star"	Targets the stepper icon when the step is completed. For icon thumbnails, refer to FontAwesome.
`iconCompletedColor`	string	`#ff0000`	Targets color of `iconCompleted`.

10. clevero-forms-page-title

Targets the page titles

Key	Type	Values	Description
`color`	string	`#ff0000`	Supports hex values.
`fontSize`	string	1rem \| 16px	Supports units (rem, px).
`padding`	string	“2rem”	Padding.

11. clevero-forms-section

Targets the section title.

Key	Type	Values	Description
`color`	string	`#ff0000`	Supports hex values.
`fontSize`	string	1rem \| 16px	Supports units (rem, px).
`padding`	string	“2rem”	Padding.

12. clevero-forms-footer

Targets the footerclevero-forms.

Key	Type	Values	Description
`color`	string	`#ff0000`	Supports hex values.
`background`	string	`#ff0000`	Supports hex values.
`padding`	boolean	true \| false	Supports hex values.

13. clevero-forms-scrollbar

Targets the scrollbar styles.

Key	Type	Values	Description
`width`	string	1rem \| 16px	Supports units (rem, px).
`background`	string	`#ff0000`	Supports hex values.
`trackerBackground`	string	`#ff0000`	Supports hex values.
`trackerBorder`	string	`#ff0000`	Supports hex values.
`trackerBorderWidth`	string	1rem \| 16px	Supports units (rem, px).
`trackerBorderRadius`	string	1rem \| 16px	Target border’s radius.
`thumbBackground`	string	`#ff0000`	Supports hex values.
`thumbBackgroundHover`	string	`#ff0000`	Supports hex values.
`thumbBorder`	string	`#ff0000`	Supports hex values.
`thumbBorderWidth`	string	1rem \| 16px	Supports units (rem, px).
`thumbBorderRadius`	string	1rem \| 16px	Supports units (rem, px).

📌 Need Help?

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

Method 1: stylesOverridesUrl

Note

Method 2: stylesOverrides

stylesOverrides Configuration

Info

ff0000

📌 Need Help?