# Webflow

## Add a waitlist to your Webflow site in seconds

Two ways to integrate Waitlister with Webflow: Official Webflow App (easiest) or custom form actions. Both work with any Webflow template, CMS, and custom domains.

[Get started free](/content/sign-up/index.html) [View integration guide](/content/integrations/webflow#integration-guide/index.html)

## Use Cases

### What you can build

Popular ways Webflow users implement waitlists

### SaaS Product Launches

Build anticipation for your SaaS product with a sleek Webflow landing page and integrated waitlist form. Capture leads before you ship.

Example: Pre-launch page with animated hero, feature showcase, and one-click waitlist form

### Agency Client Projects

Create coming soon pages for client projects with Webflow's design flexibility and Waitlister's waitlist functionality. Deliver fast, look great.

Example: Branded pre-launch page with custom styling matching client guidelines

### E-commerce Pre-orders

Launch products with pre-order waitlists using Webflow's e-commerce capabilities. Notify customers the moment products are available.

Example: Product page with "Notify me when available" form for upcoming items

### Beta Access & Early Adopters

Manage limited beta spots with overflow waitlists. Collect interest for exclusive access to tools, platforms, or communities.

Example: Beta landing page with tiered access and referral-powered growth

### Event Registrations

Capture registrations for workshops, webinars, or conferences with beautiful Webflow event pages and waitlist overflow management.

Example: Conference landing page with early bird waitlist and countdown timer

### Portfolio & Personal Launches

Collect early interest for your design services, courses, templates, or digital products with an elegant waitlist page.

Example: Personal brand site with email capture converting to waitlist subscribers

## Benefits

### Why Waitlister for Webflow?

Built to work seamlessly with Webflow's capabilities

### Official Webflow App

Approved by Webflow and listed in the Webflow Marketplace. One-click form insertion directly from the Webflow Designer — no code required.

### Two Layout Options

Choose between Inline (email + button) for compact placements or Full (name + email + button) for detailed signups. Both are pre-styled and responsive.

### Pre-Styled & Customizable

Forms come with professional design out of the box. Customize every detail — colors, fonts, spacing, borders — using Webflow's native style panel.

### Zero Code Required

Perfect for designers who want powerful waitlist functionality without touching code. Paste your key, choose a layout, click insert — done.

### Works with Webflow CMS

Integrate waitlists into CMS-driven pages and collection templates. Perfect for product catalogs, blog posts, or dynamic content.

### Custom Domain Support

Works seamlessly with Webflow's custom domains. Whitelist your domain in Waitlister and your forms work on both staging and production URLs.

### Built-in Referral Tracking

Grow your waitlist virally with the built-in referral program. Subscribers get unique referral links. Track growth from your Waitlister dashboard.

### Lightning Fast Performance

Forms are native Webflow elements — no external scripts or iframes. Zero performance impact on your site's loading speed.

## Choose Your Method

### Which integration is right for you?

Compare both methods to find the best fit for your Webflow project

| Feature | Form Action | Webflow App |
| --- | --- | --- |
| Setup Time | ~10 minutes | ~2 minutes |
| Design Control | Full Webflow control | Full Webflow control |
| Technical Skill | Basic form knowledge | None required |
| Custom Fields | Any HTML field | Email + Name |
| Layout Options | Fully custom | Inline or Full |
| CMS Support | Manual integration | Works with CMS |
| Form Validation | Webflow native | Built-in |
| Maintenance | Manual updates | Automatic |
| Custom Domains | Supported | Supported |

### Choose Form Action if...

- You need complete design control over every form element
- You want to collect custom fields beyond name and email
- You're comfortable building Webflow forms from scratch
- You need advanced form validation or conditional visibility
- You want full control over form structure and attributes
- You're integrating waitlists into complex Webflow layouts

### Choose Webflow App if...

- You want the fastest setup (under 2 minutes)
- You prefer one-click insertion from the Webflow Designer
- You want pre-styled forms that look great immediately
- You're new to Webflow or building quickly for a client
- You want official support from both Webflow and Waitlister
- You need a no-code solution with zero configuration

## Step-by-Step Guide

### How to integrate

#### Form action Webflow App

1. **Get your Waitlister waitlist key**
   Sign into your [Waitlister dashboard](/content/waitlists/index.html) → navigate to **Overview** → copy your waitlist key. Your form action URL will be:
   ```
   https://waitlister.me/s/YOUR_WAITLIST_KEY
   ```

2. **Add a Form Block in Webflow**
   In the Webflow Designer, open the **Add Elements** panel (press `A`) → drag a **Form Block** onto your canvas where you want the waitlist form to appear.
   Delete any default fields you don't need (keep the form wrapper).

3. **Configure the form action**
   Select the **Form Block** → open the **Settings** panel (right sidebar) → set the **Action** field to your Waitlister endpoint URL:
   ```
   https://waitlister.me/s/YOUR_WAITLIST_KEY
   ```

4. **Add your form fields**
   Inside the form, add input fields with the correct **Name** attributes. At minimum you need an email field. Add name and phone fields as needed:
   ```
   Required field:
     Email input → Name: "email"

Optional fields:
     Text input → Name: "name"
     Tel input → Name: "phone"

Custom metadata (any field name):
     Text input → Name: "company"
     Text input → Name: "role"
   ```

5. **Style your form in Webflow**
   Select each form element and style it using Webflow's native **Style** panel. Customize typography, colors, spacing, borders, hover states, and focus states to match your site's design system.

6. **Whitelist your domain**
   In your Waitlister dashboard → **Configure** → **Whitelisted domains** → add your Webflow domains:
   ```
   For staging: your-project.webflow.io
   For production: yourdomain.com
   ```

7. **Add a success message or redirect**
   In Webflow's form settings, you can configure the success state. Alternatively, set up a redirect URL in your Waitlister dashboard under **Configure** → [Thank You Page](/content/docs/thank-you-page/index.html) to send subscribers to a custom page after signup.

8. **Publish and test**
   Click **Publish** in Webflow → test the form on your live site → submit a test signup → verify it appears in your [Waitlister dashboard](/content/waitlists/index.html) under **Subscribers**.
   Test on both desktop and mobile to ensure responsiveness.

### Need more details?

Check out our complete form action endpoint documentation.

[View full documentation](/content/docs/form-action-endpoint/index.html)

### Troubleshooting

## Common issues & solutions

### Waitlister app not showing in Webflow
   Open the **Apps** panel in the Webflow Designer (left sidebar) and search for **"Waitlister"**. If it doesn't appear, try refreshing the Designer or visit the [Webflow Marketplace listing](https://webflow.com/apps/detail/waitlister) to install it directly.

### Common questions

### About Webflow integration

#### Which integration method should I choose?
Use the **Webflow App** (recommended) for the fastest setup with one-click form insertion and pre-styled design. Choose **Form Action** if you need custom fields beyond name and email or want full control over the form HTML structure. The app is ideal for 90% of users.

### Is the Webflow App really free?
Yes! The app itself is completely free to install and use from the Webflow Marketplace. You'll need a Waitlister account (free plan available) to collect and manage submissions.