Styling Guide
Customize the WaitList signup form to match your site. No build step needed.
Quick start
The default embed code works out of the box. WaitList automatically fetches your site's brand colors and applies them to the button and accent.
<!-- Basic embed — brand colors applied automatically -->
<script src="https://waitlist.pl/v1/drop.js"></script>
<div data-waitlist="emb_yourKey"></div>
Data attributes
Configure the form directly via HTML attributes. No CSS needed.
<div data-waitlist="emb_yourKey"
data-layout="stacked" <!-- stacked | inline (default) -->
data-size="lg" <!-- sm | md (default) | lg -->
data-theme="dark" <!-- auto (default) | light | dark -->
data-placeholder="Enter email"
data-button-text="Join"></div>
| Attribute | Values | Description |
|---|
| data-layout | inline | stacked | Inline: input + button side by side. Stacked: button below input (full width). |
| data-size | sm | md | lg | Controls padding and font size. Default: md. |
| data-theme | auto | light | dark | Auto detects your page's background color. Force light/dark if needed. |
| data-placeholder | any text | Custom input placeholder. Default: "Enter your email". |
| data-button-text | any text | Custom button label. Default: "Subscribe". |
CSS custom properties (inline style)
Override colors and sizing directly on the container element. These take priority over the auto-detected brand palette.
<!-- Inline CSS custom properties -->
<div data-waitlist="emb_yourKey"
style="
--waitlist-button-bg: #e74c3c;
--waitlist-button-text: #ffffff;
--waitlist-accent: #e74c3c;
--waitlist-radius: 0;
--waitlist-max-width: 500px;
"></div>
| Custom Property | Default | Description |
|---|
| --waitlist-button-bg | brand color | Button background color |
| --waitlist-button-text | #ffffff | Button text color |
| --waitlist-accent | brand color | Focus ring and success message color |
| --waitlist-border | #ddd / #333 | Form border color (auto light/dark) |
| --waitlist-radius | 8px | Border radius for form and buttons |
| --waitlist-font | inherit | Font family for the form |
| --waitlist-max-width | 420px | Maximum width of the form |
| --waitlist-input-bg | #fff / #1a1a2e | Input background (auto light/dark) |
| --waitlist-input-text | #333 / #eee | Input text color (auto light/dark) |
CSS custom properties (stylesheet)
For more control, target the embed container from your own stylesheet. This keeps styling separate from HTML.
/* Target all WaitList forms on the page */
[data-waitlist] {
--waitlist-button-bg: #8b5cf6;
--waitlist-button-text: #fff;
--waitlist-accent: #8b5cf6;
--waitlist-border: #e5e7eb;
--waitlist-radius: 24px;
--waitlist-font: 'Inter', sans-serif;
}
/* Target a specific form by embed key */
[data-waitlist="emb_yourKey"] {
--waitlist-button-bg: #dc2626;
--waitlist-max-width: 600px;
}
Tip: CSS custom properties set in your stylesheet always win over the auto-detected brand palette. Inline style="" attributes win over everything.
Override internal classes
WaitList injects a scoped stylesheet with BEM-like classes. You can override them in your own CSS for full control.
/* Override the form row (contains input + button) */
.waitlist-form__row {
border: 2px solid #333;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Override the input */
.waitlist-form__input {
font-size: 16px;
}
.waitlist-form__input::placeholder {
color: #999;
}
/* Override the button */
.waitlist-form__button {
text-transform: uppercase;
letter-spacing: 1px;
}
/* Override the success/error message */
.waitlist-form__message {
font-size: 14px;
}
| Class | Element |
|---|
| .waitlist-form | Outer wrapper |
| .waitlist-form__row | Form element (flex row with input + button) |
| .waitlist-form__row--stacked | Stacked variant (flex-direction: column) |
| .waitlist-form__input | Email input |
| .waitlist-form__button | Submit button |
| .waitlist-form__message | Success/error message below form |
Examples
Pill-shaped with purple accent
<div data-waitlist="emb_yourKey"
data-button-text="Join waitlist"
style="
--waitlist-button-bg: #7c3aed;
--waitlist-button-text: #fff;
--waitlist-accent: #7c3aed;
--waitlist-radius: 99px;
"></div>
Stacked on dark background
<div data-waitlist="emb_yourKey"
data-layout="stacked"
data-theme="dark"
data-size="lg"
style="
--waitlist-button-bg: #00dfa2;
--waitlist-button-text: #000;
--waitlist-border: #333;
--waitlist-input-bg: #111;
--waitlist-input-text: #eee;
"></div>
Minimal, no border
[data-waitlist] {
--waitlist-border: transparent;
--waitlist-radius: 4px;
--waitlist-max-width: 360px;
}
.waitlist-form__row {
background: #f3f4f6;
}