Fit a form to your own website

An embedded form takes the font and text colour of your website. Accent colour, borders, corners and single pages are styled in your website's stylesheet through fixed names. The form stays shielded, so general rules on your page do not change it by accident.

Styling belongs on your website

The colours, fonts and corners of your brand already live in your stylesheet. Store them in the form a second time and the next redesign means changing two places, and the second one gets forgotten. A form can also appear on several sites, for example with partners. With the styling on the website, the same form fits each of them without copying it.

Colours, corners and fonts through variables

Set the variables on the form's box, that is on [data-lf-form]. --lf-accent colours buttons, progress and the chosen tile, --lf-accent-text the text on them. --lf-text and --lf-muted apply to body text and help texts, --lf-border, --lf-surface and --lf-surface-selected to borders and backgrounds. Corners of tiles, inputs and buttons follow --lf-radius, --lf-radius-control and --lf-radius-button, the fonts --lf-font and --lf-heading-font, error messages --lf-error. --lf-card-image-filter is set on a tile and applies to its image, for example brightness(0) invert(1) on ::part(card):hover for a white icon on hover. Whatever you leave unset keeps its default, and font and text colour then come from your page.

Reaching single parts

What a variable cannot express you reach with ::part(). The form exposes page, progress, step, title, description, row, field, label, required, help, control, error, choices, choice, cards, card, card-image, card-label, files, nav, button, back, next, submit, consent, note, done and block, the box of the scheduling step. A state is a second name: selected on the chosen tile with its image and label, invalid on a field with an error, active on the steps of the progress bar already reached. So [data-lf-form]::part(card selected) hits only the chosen tile. Every field can also be reached by its key, for example with ::part(field-email). Other names inside are not promised and may change.

Styling a single page differently

Give the page an identifier in the builder, for example contact. While paging, the form writes it to its box as data-lf-page, and your stylesheet builds on it: [data-lf-form][data-lf-page="contact"]::part(field) applies on that page only. After submitting, the value is done, so the confirmation can be styled as well. A page without an identifier removes the marker again.

When you cannot change the website

Under Form there is a field for custom CSS that applies only inside the form. Because it sits in the shielded area, you write :host instead of [data-lf-form] and [part~="card"] instead of ::part(card). Outside addresses and @import are rejected on save, since every visitor would fetch them. Embedded graphics with data: are fine. If your website sets the same variable, the website's value applies.

Fonts come from your website

A font that the form loads by itself is not shown by the browser inside the shielded area. Load it on your page as usual and name it in --lf-font or --lf-heading-font. Without that, the form uses the font of the place where it sits.

Step by step

1. In the builder, give every page that should look different an identifier under Page, then save.
2. In your website's stylesheet, add a rule for [data-lf-form] and set the variables there, for example --lf-accent.
3. For details, add rules with ::part(), for example for the chosen tile.
4. Reload your page and go through the form up to the confirmation.

Why does my rule for button not apply in the form?

The form is shielded so general rules on your page do not change it on the side. Reach the button with [data-lf-form]::part(button).

Does the preview show my website's look?

No. The preview shows the defaults and the form's CSS field. It does not know your stylesheet, so you see its effect on your page.

What happens if one of the names changes?

The names in this article are promised. If one has to change, the old one stays in place as well for a while, and the changelog announces it.

Why is my Google font rejected in the CSS field?

The form would load it from Google for every visitor. That is a transfer to a third party you would have to answer for, and the browser does not show a font loaded that way inside the form anyway. Load it on your website.

Can I style a single field differently?

Yes, through its key, for example with [data-lf-form]::part(field-phone). You find a field's key in the settings of the entity.