Customize your Formlis with additional styles

How it works

You can go beyond our Formli features and customize even more elements by adding CSS code to your forms. With custom CSS you can change appearence of payment forms, progress bar, buttons and labels to create visually appealing, on-brand, and user-friendly forms to match your unique needs and goals.

Setup Guide

How to add custom CSS

1. Open your Formli.
2. Open More menu and click on Edit settings

3. Scroll the page down and find Custom CSS

4. Enter your CSS code into the field. It should be in the format:

[data-css-selector="cta button"] {
color: green;
}

5. Click Save changes button.

6. Open your Formli to check your results

List of supported CSS selectors

Here some selectors that you can use to customize your block design:

data-css-selector="payment field" data-css-selector="custom branding anchor" data-css-selector="custom branding logo" data-css-selector="custom branding name" data-css-selector="custom branding container" data-css-selector="data field" data-css-selector="amount buttons container" data-css-selector="connect account card" data-css-selector="connected bank info" data-css-selector="payment type button" data-css-selector="ach disclaimer" data-css-selector="progress bar current step" data-css-selector="progress bar step" data-css-selector="progress bar container" data-css-selector="branded label anchor" data-css-selector="cta button"

But this list shouldn't limit you; you can also use any other selectors that you can find. Feel free to explore and experiment with different selectors to customize your block appearance even further.

How to use it:

1. Change colors of progress bar and its steps

2. Change CTA button appearance

3. Change the colors of elements when hovered over.