Form Builder
Design & Layout
Customize the visual appearance of your form layout type, colors, spacing, fonts, and custom CSS.
Last updated June 15, 2026
Open the Design (palette) icon in the form builder sidebar to access all visual settings.
Layout types
| Layout | Description | Plan |
|---|---|---|
| Default | Standard inline form embedded directly on the page | All plans |
| Boxed | Form displayed inside a bordered card | All plans |
| Floating | A button fixed to a corner of the page; clicking it opens/closes the form | Basic+ |
| Popup | Form appears as a modal overlay triggered by rules you configure | Pro+ |
Default and Boxed layouts
These are the simplest layouts the form renders inline wherever it's embedded. Boxed adds a border and card container around the form.
Both layouts share the full set of design settings below.
Floating layout
The floating layout adds a persistent button to a corner of the page. Customers click the button to toggle the form open or closed.
Options:
| Setting | Description |
|---|---|
| Position | Top Left, Top Right, Center Left, Center Right, Bottom Left, Bottom Right |
| Button Text | Optional text label shown next to the icon |
| Icon Type | Built-in icon (pick from the icon library), or Custom (paste an image URL) |
| Button Background Color | Hex color picker |
Submit button behavior
The submit button is only disabled while waiting for reCAPTCHA v2 verification. In all other cases including floating layout without reCAPTCHA the button is always enabled.
Popup layout
The popup layout renders the form as an overlay triggered by rules you configure. See Display Rules & Scheduling for full trigger and frequency options.
Display mode options:
| Mode | Behavior |
|---|---|
popup | Modal overlay centered on the screen |
slide_in | Panel slides in from the edge of the page |
inline | Embedded in the page at the embed location (default behavior) |
Design settings
These settings apply to all layout types.
| Setting | Description |
|---|---|
| Form Width | Maximum width of the form container (e.g. 600px, 100%) |
| Background Color | Solid color behind the form |
| Background Image | Upload or URL for a form background image |
| Background Position | Center, top, bottom, left, right |
| Input Border Radius | Controls corner rounding on all input fields |
| Input Background Color | Fill color inside input fields |
| Input Border Color | Border color around input fields |
| Form Text Color | Color for all labels and input text |
| Horizontal Spacing | Left/right inner padding inside inputs |
| Vertical Spacing | Top/bottom inner padding inside inputs |
| Button Color | Submit button background color |
| Button Text Color | Submit button label color |
| Button Border Radius | Corner rounding on the submit button |
Custom CSS
Basic+ plans.
The Custom CSS field lets you add any CSS you need to style the form beyond what the settings panel offers. Styles are scoped to the form container.
/* Example: make labels bold */
.sk-form label {
font-weight: 700;
}
/* Example: full-width submit button */
.sk-form .sk-submit-btn {
width: 100%;
}Inspect the form
Use your browser's DevTools (right-click → Inspect) on a live form to find the class names to target in your custom CSS.
Was this page helpful?