Skip to main content

Nexl Form Custom CSS Styling

You can fully tailor the visual layout, typography, colors, and behavior of your forms to match your brand identity by injecting custom CSS.

Written by Jenn Gopez

Want to change how your form looks — colours, fonts, buttons, spacing? This guide gives you ready-made code snippets you can copy, paste, and tweak. Each one comes with a short note on what it does and a table of options so you can match it to your design.

Cover photo

Adding a cover photo to your forms can help convey a stronger brand image and create a more impactful impression on your audience.

Follow these simple steps to add a cover photo to your forms.

  1. Click on Add Cover Photo.

  2. Upload your image. You can either drag and drop your image into the uploader or click it to select a file from its location.

    Your cover photo will now be displayed at the header section of your form. Below is the preview of the form.

Image Requirements:

  • Accepted Formats: JPEG or PNG

  • Maximum Size: 50MB

  • Aspect Ratio: 5:1 (For example, 3000 x 600 pixels)

NOTE: When forms are cloned, cover photos will be cloned as well.

Form Preview on Messaging Apps

We’ve enhanced how Nexl forms appear when shared on messaging platforms like WhatsApp, Messenger, LinkedIn, Teams, and others.

  • If your form has a cover photo:
    A preview of the cover photo will now be displayed when the form link is shared on supported messaging apps. Along with the image, the form title and description will also appear in the preview — giving your shared links a more professional and branded look.

  • If your form does not have a cover photo:
    Nexl will automatically display a preview featuring the Nexl logo, along with the form title and description, ensuring that all form links have a clean and consistent appearance when shared.

Nexl Form CSS Editor

It allows you to write, edit, and manage Cascading Style Sheets (CSS) code. CSS is a stylesheet language used to control the presentation and layout of HTML elements on a web page. The Nexl Form CSS editor provides a dedicated space for you to work with CSS, often offering features that enhance productivity and appearance.

Our form editor offers two types of styling options:

Global Form Styling

This option is recommended for establishing a consistent brand style across all forms. It allows you to set universal elements such as fonts, background colors, and general design aesthetics that apply to every form.

Custom Styling Per Form

This feature enables you to customize individual forms, allowing for specific CSS styling tailored to each form's purpose. This is useful for creating unique designs without impacting the styling of other forms.

Default Form Style

Default Form Confirmation Style

Importing Fonts

Importing fonts is necessary when you want to use specific typefaces in your forms instead of the default system fonts. While default fonts are functional, they might not align with your brand’s identity or the desired aesthetic of your website.

  1. Go to fonts.google.com

  2. Search for your preferred font. In this example, we will use “Inter”.

  3. Select the preferred font (i.e., “Inter”)

  4. Click on “Get Font”

  5. Click on “<> Get embed code”

  6. Copy the URL

  7. Paste the URL on a web address bar then hit enter. The woff2 codes will be generated.

  8. Copy the import code (woff2) and paste it into the Nexl Form CSS editor.

  9. Access the Nexl Form CSS editor:

    1. Click "Admin”

    2. Click "Forms"

    3. Click “General Settings”

    4. Navigate to the “Styles” section

    5. Paste the import code in the styles section:

The Starter Block

Paste this first —

Before any background or layout change will show, paste this short reset at the top of your CSS.

/* ---- STARTER RESET (paste once, at the top) ---- */

.nexl-form-wrapper,

.nexl-form-wrapper div {

min-height: auto !important;

overflow: unset !important;

}

Form Background

Now set the background behind the whole form:

Form main page background

.nexl-form-wrapper {

background: #FFFFFF !important;

}

Confirmation page background

.css-1ktnhvr {

background-color: #FFFFFF !important;

}

Want this?

Use this

Solid colour

background: #FFFFFF !important;

See-through

background: transparent !important;

Background image

background: url('https://yoursite.com/bg.jpg') center/cover no-repeat !important;

Still seeing white inside?

The inner panels sit on top of the wrapper and have their own background. To recolour the whole visible area, colour them too:

.css-11vqqem,

.css-1ym5yg,

.css-kmhjie {

background-color: #FFFFFF !important; /* match your wrapper colour */

}

Note

Those css-… names are the inner panels. They can change after a platform update — if the inside colour stops matching, right-click → Inspect the inner area to find the current name.

Hide the platform logo

Removes the small “Supported by” logo at the bottom.

.css-mkcoy { display: none !important; } /* on the form */

.css-1439hib { display: none !important; } /* on the thank-you page */

Typography & Fonts

Use a custom font (e.g. Montserrat, IBM Plex Sans)

Paste the import line at the very top of your CSS (above everything), then apply the font. Swap the name for any Google Font.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

.nexl-form-wrapper, .nexl-form-wrapper * {

font-family: 'Montserrat', Arial, sans-serif !important;

}

Want this?

Use this

IBM Plex Sans

family=IBM+Plex+Sans:wght@400;600;700

Montserrat

family=Montserrat:wght@400;600;700

Lato

family=Lato:wght@400;700

The font-family name must match what you imported

Wherever you set font-family, the name in quotes has to match the font you imported above — here 'Montserrat'. If you import IBM Plex Sans, write font-family: 'IBM Plex Sans', Arial, sans-serif !important;. Always keep a fallback like Arial, sans-serif at the end in case the font fails to load.

The rule above applies your font to the whole form at once. The snippets below also include a font-family line so each one carries your font even if you paste it on its own — change that name to match your import.

Important: the form and thank-you page share one CSS box

Your Custom CSS applies to both the form and the thank-you page, and they share some names — most notably the title, which is an h4 on both. So a plain h4 { … } rule changes both headings at once. To change only one, put its page in front:

.nexl-form-wrapper h4 → the form title only

.css-1ue5w0u h4 → the thank-you heading only

Style each kind of text

Use the right name for the text you want to change:

Text you want to change

Name to use

Form title (main page)

.nexl-form-wrapper h4

Thank-you heading

.css-1ue5w0u h4

Intro / description

div.css-1ebprri p.MuiTypography-body1

Heading text block (H1)

span.css-8mbvcu h1

Plain text block

span.css-8mbvcu div

Field labels

label.MuiTypography-subtitle2

Helper / caption text

span.css-8mbvcu

Checkbox / consent text

.MuiFormControlLabel-label

.nexl-form-wrapper h4 { /* form title only */

color: #CD8B5D !important;

font-size: 36px !important;

font-family: 'Montserrat', Arial, sans-serif !important; /* your imported font */

}

label.MuiTypography-subtitle2 { /* field labels */

color: #00223c !important;

font-size: 16px !important;

font-family: 'Montserrat', Arial, sans-serif !important;

}

span.css-8mbvcu h1 { /* H1 text blocks */

font-size: 24px !important; color: #00223c !important;

font-family: 'Montserrat', Arial, sans-serif !important;

}

Bold, italic, uppercase, underline

Add any of these inside a text name (such as h4 or label.MuiTypography-subtitle2):

Want this?

Use this

Bold

font-weight: 700 !important;

Normal weight

font-weight: 400 !important;

Italic

font-style: italic !important;

ALL CAPS

text-transform: uppercase !important;

Underline

text-decoration: underline !important;

Align text — left, centre, right

.nexl-form-wrapper h4 { text-align: center !important; } /* the form title only */

Want this?

Use this

Align left

text-align: left !important;

Centre

text-align: center !important;

Align right

text-align: right !important;

Use it on any text

div.css-1ebprri p.MuiTypography-body1 { text-align: center !important; } — intro text

label.MuiTypography-subtitle2 { text-align: right !important; } — field labels

Hide the form title

Want this?

Use this

Hide completely

.nexl-form-wrapper h4 { display: none !important; }

Change the words

.nexl-form-wrapper h4 { font-size: 0 !important; }.nexl-form-wrapper h4::after { content: "New title"; font-size: 36px !important; }

Reminder

Keep the .nexl-form-wrapper prefix so this only affects the form. Without it, the thank-you heading changes too. Style that one separately with .css-1ue5w0u h4 (see the Confirmation Page section).

Bold, italic, uppercase, underline

Add any of these inside a text name (such as h4 or label.MuiTypography-subtitle2):

Want this?

Use this

Bold

font-weight: 700 !important;

Normal weight

font-weight: 400 !important;

Italic

font-style: italic !important;

ALL CAPS

text-transform: uppercase !important;

Underline

text-decoration: underline !important;

Align text — left, centre, right

h4 { text-align: center !important; } /* the title */

Want this?

Use this

Align left

text-align: left !important;

Centre

text-align: center !important;

Align right

text-align: right !important;

Use it on any text

div.css-1ebprri p.MuiTypography-body1 {

text-align: center !important;

}

description after form title

Hide the form title

Want this?

Use this

Hide completely

h4 {

display: none !important;

}

Change the copy

.nexl-form-wrapper h4 {

font-size: 0 !important;

font-family: 'Inter';

}

.nexl-form-wrapper h4::after {

content: "Your new title";

font-size: 36px !important;

}

Field Layout System

One, two, or three columns (option groups)

Lay a list of checkbox/radio options into columns. Swap Multi-select for your own field's label.

.MuiBox-root.css-kmhjie:has(label[id="preview-form-Multi-select"]) .MuiFormGroup-root {

display: grid !important;

grid-template-columns: repeat(2, 1fr) !important;

gap: 4px 32px !important;

}

Want this?

Use this

One column

grid-template-columns: repeat(1, 1fr) !important;

Two columns

grid-template-columns: repeat(2, 1fr) !important;

Three columns

grid-template-columns: repeat(3, 1fr) !important;

Label beside the input (instead of on top)

Puts the label to the left of the box. Use :nth-of-type to choose how many fields — here the number really is the field count, because text blocks and headings above the fields are a different kind of element and aren't counted. (Change 4 to however many you want, or remove that part to apply to every field.)

form > div.css-kmhjie:nth-of-type(-n+4) .MuiBox-root.css-1qm1lh {

display: flex !important; align-items: center !important;

}

form > div.css-kmhjie:nth-of-type(-n+4) .MuiBox-root.css-70qvj9 {

width: 160px !important; /* space reserved for the label */

}

Want this?

Use this

First 2 fields

form > div.css-kmhjie:nth-of-type(-n+2)

First 4 fields

form > div.css-kmhjie:nth-of-type(-n+4)

A specific field

form > .css-kmhjie:has(label[id="preview-form-email"])

Every field

(remove the :nth-of-type / :has part)

Label back on top

flex-direction: column !important; align-items: flex-start !important;

Why counting can mislead

Avoid :nth-child(-n+4) for this. :nth-child counts every item in the form — including text blocks and headings — so a couple of text blocks above your fields will throw the number off (you'll style fewer fields than expected). :nth-of-type counts only the field boxes, because the text blocks are a different element type (span vs div). If you ever place a non-field box among the first fields, target the fields you want by name with :has(label[id="preview-form-…"]) instead — that never miscounts.

Space between fields

Want this?

Use this

Tighter

.MuiBox-root.css-kmhjie { margin-bottom: 8px !important; }

Comfortable

.MuiBox-root.css-kmhjie { margin-bottom: 16px !important; }

Roomy

.MuiBox-root.css-kmhjie { margin-bottom: 28px !important; }

Input Field Styling

The boxes people type into — name, email, country, date, dropdowns.

Height & corner radius

.MuiOutlinedInput-root {

height: 44px !important;

border-radius: 30px !important;

}

Want this?

Use this

Square corners

border-radius: 0 !important;

Slightly rounded

border-radius: 8px !important;

Very rounded

border-radius: 24px !important;

Taller / shorter

height: 52px !important;

Border, hover, focus & filled states

The visible outline is a separate element. You can colour it at rest, on hover, when clicked into (focus), and when filled in.

.MuiOutlinedInput-notchedOutline {

border-color: #C9C9C9 !important;

}

/* normal */

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {

border-color: #00223c !important;

}

/* hover */

MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { /* clicked */

border-color: #CD8B5D !important; border-width: 2px !important;

}

.MuiOutlinedInput-root.Mui-focused {

background-color: #FFFDF9 !important;

}

/* filled/active */

Borderless (flat) inputs

.MuiOutlinedInput-notchedOutline {

border: none !important;

}

.MuiOutlinedInput-root {

background-color: #F4F4F2 !important;

border-radius: 6px !important;

}

Text typed inside the box

.MuiInputBase-input {

font-size: 20px !important;

color: #00223c !important;

}

Hide or recolour placeholder text

The faint “Type here…” text inside empty boxes.

Want this?

Use this

Hide it

.MuiInputBase-input::placeholder { color: transparent !important; }

Recolour it

.MuiInputBase-input::placeholder { color: #CD8B5D !important; opacity: 1 !important; }

Rich Text Editor

Some forms include a rich-text field with a small formatting toolbar. You can hide that toolbar or restyle the typing area.

Hide the toolbar

Left Image: Visible toolbar | Right Image: Hidden toolbar

trix-toolbar { display: none !important; }

Style & recolour the editor area

trix-editor {

background-color: #F4F4F2 !important;

border: 1px solid #C9C9C9 !important;

border-radius: 8px !important;

min-height: 120px !important;

font-size: 15px !important; color: #00223c !important;

}

Checkbox & Radio Groups

Colour of the tick / dot when selected

Left Image: Default styling | Right Image: Custom styling

.Mui-checked,

.Mui-checked .MuiSvgIcon-root {

color: #0078d4 !important;

}

Size of the box / circle

Left Image: Default checkbox size | Right Image: Custom checkbox size

.MuiCheckbox-root .MuiSvgIcon-root,

.MuiRadio-root .MuiSvgIcon-root {

width: 22px !important;

height: 22px !important;

}

The Submit Button

Probably the part you'll style most. Start with size, shape and colour:

Left Image: Default button | Right Image: Custom Button

button.MuiButton-containedPrimary {

width: 240px !important;

height: 48px !important;

background-color: #00223c !important;

border-radius: 24px !important;

font-size: 16px !important;

font-weight: 700 !important;

text-transform: none !important; /* keep your capitalisation */

}

Button width

Want this?

Use this

Full width

width: 100% !important;

Fixed width

width: 240px !important; (any number)

Fit the text

width: auto !important;

Button shape

Want this?

Use this

Square corners

border-radius: 0 !important;

Rounded corners

border-radius: 8px !important;

Pill / capsule

border-radius: 999px !important;

Button alignment — left, centre, or right

First make sure the button is not full width (give it a fixed width), then pick one alignment line below.

button.MuiButton-containedPrimary {

display: block !important;

width: 240px !important; /* must be less than full width to see alignment */

}

Want this?

Use this

Align left

margin-right: auto !important; margin-left: 0 !important;

Centre

margin-left: auto !important; margin-right: auto !important;

Align right

margin-left: auto !important; margin-right: 0 !important;

How this works

“Auto” margin pushes the button away from that side. Auto on the right pushes it left; auto on both sides centres it; auto on the left pushes it right.

Button colours & hover

button.MuiButton-containedPrimary {

background-color: #00223c !important;

color: #fff !important;

}

button.MuiButton-containedPrimary:hover {

background-color: #003a66 !important;

}

Change the button text

Use the hide-and-replace trick from Start Here:

button.MuiButton-containedPrimary {

color: transparent !important;

position: relative;

}

button.MuiButton-containedPrimary::after {

content: "Send my details";

position: absolute; top: 50%; left: 50%;

transform: translate(-50%, -50%);

color: #fff;

}

Confirmation (Thank-You) Page

The page people see after submitting. It has its own names, but the same Custom CSS box controls it.

Part of the page

Name to use

Whole page area

.css-1ue5w0u

Heading (“Thank you”)

.css-1ue5w0u h4

Message

p.css-1vo9t1

Platform logo

.css-1439hib

Supported by footer

.css-qtnrli

Background & text

Left image: Default styling | Right image: Custom styling

.css-1ue5w0u {

background-color: #00223c !important;

padding: 40px !important;

border-radius: 12px !important;

}

.css-1ue5w0u h4 {

color: #FFFFFF !important;

font-size: 32px !important;

}

.css-1vo9t1 {

color: #E8D5C2 !important;

font-size: 16px !important;

}

.css-qtnrli {

color: #FFFFFF !important;

font-size: 12px !important;

}

Hide the confirmation heading or logo

Want this?

Use this

Hide the heading

.css-1ue5w0u h4 { display: none !important; }

Hide the logo

.css-1439hib { display: none !important; }

Did this answer your question?