Webflow Waitlist: Complete Setup Guide with Referral Program (2026)

TL;DR: Webflow's native form collects emails but has no referral links, queue position or leaderboard. To add a referral waitlist to Webflow, paste LaunchList's two-line snippet into an Embed element, or keep your Webflow form and add one data-launchlist-enhance custom attribute. Both work on Webflow's free Starter plan in about ten minutes. You can also open the form as a popup (including on exit intent, a timer or scroll), add live counter and leaderboard widgets, and track signups in GA4. The embed keeps the page and its SEO on your Webflow domain; LaunchList's free hosted pages on launchlist.page are never indexed.

Webflow is one of the most popular website builders for product launches: designers love the visual control and developers appreciate the clean output. But when it comes to a real pre-launch waitlist, Webflow's native features fall short.

Here's why, and how to fix it.

Why Webflow's native form isn't enough for a waitlist

Webflow's form builder is excellent for contact forms and newsletter signups. For a pre-launch waitlist, it's missing the mechanics that drive growth:

Without referral mechanics, your Webflow waitlist is just an email list, and you're leaving the strongest pre-launch growth channel on the table. Dropbox famously used referrals to grow from 100,000 users to 4 million in 15 months; that only works if your waitlist has the mechanics for it.

Every way to put a LaunchList waitlist on Webflow

There are several ways to get a signup from a Webflow page into LaunchList. They all run the same pipeline once the signup lands: deduplication, referral credit, Contact Trust scoring, the verification email, webhooks and automations happen whichever one you pick. Choose by what you already have.

The loader is the same for every method that uses it, and it goes on the page once, however many forms, popups and widgets you add:

<script src="https://embed.getlaunchlist.com/v1/embed.js" async></script>

All of this works on every LaunchList plan, the Free plan included.

Step-by-step: add a waitlist to Webflow

This takes about ten minutes on any Webflow site. You have two options: embed our form (fastest) or keep your Webflow form and let LaunchList run it (best when the form is part of a designed section).

Step 1: Create your project and form

1. Sign up for LaunchList. The Free plan covers 100 contacts, with no card.
2. Create a project named after your product. It comes with a waitlist form (a single email field by default) and a hosted launch page you can use alongside your Webflow site.
3. Open Forms if you want to add fields or change what people see after they submit. The default sends every signup to their own status page, with their position and referral link.
4. Open Embed & API → Your website, choose Webflow under What is your site built with?, pick your form if you have more than one, and copy the Inline snippet.

Step 2 (option A): Embed the form with an Embed element

1. In the Webflow Designer, open the page where the waitlist should go.
2. Drag an Embed element onto the canvas where the form should appear.
3. Paste the snippet you copied:

<!-- frm_8Kd2Qm4Rp9 is an example ID; use your own from Embed & API → Your website -->
<div data-launchlist-form="frm_8Kd2Qm4Rp9"></div>
<script src="https://embed.getlaunchlist.com/v1/embed.js" async></script>

4. Click Save & Close, then Publish.

The Designer shows a placeholder; the published site shows the form. The script loads asynchronously, so it doesn't block rendering. If you plan to put forms, popups or widgets on several pages, move the <script> line once into Site Settings → Custom Code → Head Code and keep only the <div> in each Embed. A loader in both places is harmless.

Step 2 (option B): Keep your Webflow form

Better when the form is part of a designed section and an embedded form would look transplanted.

1. Design the form in Webflow as normal.
2. Select the Form Block, open its settings, and add a custom attribute:
   • Name: data-launchlist-enhance
   • Value: your form's public ID, for example frm_8Kd2Qm4Rp9
3. Make sure each input's Name matches the field key shown in LaunchList. For a simple waitlist that's usually just email. The identity field's name must match, or the signup can't be attributed. Extra inputs your LaunchList form doesn't define are kept as Input data columns rather than dropped.
4. Add the loader once, under Site Settings → Custom Code → Head Code (or in an Embed element on the same page):

<script src="https://embed.getlaunchlist.com/v1/embed.js" async></script>

5. Publish.

Your Webflow design stays untouched. LaunchList takes over submission, live format validation, a one-tap fix for email domain typos, inline errors, referral attribution and what happens after submit. Delete or ignore Webflow's own success message: LaunchList's renders in its place.

Watch out: without the data-launchlist-enhance attribute, a Webflow form posts to Webflow, and the signups land in Webflow's form submissions instead of your waitlist.

Step 3: Match it to your Webflow design

The embedded form (option A) renders inside a shadow root, so Webflow's CSS can't reach it and your class styles won't apply. That's deliberate: a Webflow style change can never break the form. Style it in LaunchList instead, under Project settings → Branding: colors, font, corner radius and button style. Set it once and every form, widget and page in the project follows. Forms also follow light and dark automatically, taking the scheme from the page they sit on.

If you need pixel-level control from Webflow's own styles, use option B: your markup and your CSS stay yours.

Step 4: Test the flow

1. Open your published Webflow page in a private window.
2. Sign up with an address you can check. (To keep practice signups out of your real list and your contact count, use LaunchList's test mode.)
3. Confirm the verification email. Double opt-in is on by default for waitlist forms, and you can switch it off per form.
4. On your status page, copy your referral link, open it in another private window and sign up a second address. Once that friend confirms, your referral count and position move.

Referral credit lands when the friend verifies, not the moment they submit. That gap is deliberate: it's what stops people farming positions with made-up addresses.

Building a dedicated Webflow waitlist landing page

For the highest conversion rates, build a single-purpose waitlist landing page rather than just a form on your homepage. A proven Webflow structure:

Section 1: Hero

• Specific outcome-driven headline (under 10 words)
• One-sentence subhead explaining who it's for
• The LaunchList form (Embed element, or your own enhanced Form Block)
• Optional: a live signup counter (one more <div>, see below)

Section 2: How it works

• 3 icons + short text
• Inline secondary CTA

Section 3: Referral incentive

• "Invite friends, move up the queue"
• A live leaderboard widget of your top referrers

Section 4: FAQ

• Use Webflow's native accordion component

Section 5: Final CTA

• A second form <div>, or a button that opens the form in a popup with data-launchlist-popup="frm_8Kd2Qm4Rp9"

Social proof that updates itself is one element. Drop it into an Embed element next to the form:

<div
    data-launchlist-widget="counter"
    data-project="acme"
    data-label="founders already in"
></div>

Use your own project handle in place of acme; copy the exact snippet from the Widgets section of Embed & API → Your website. Counter, leaderboard, milestone and countdown widgets are on every plan, Free included, and show aggregate numbers only. Until the total helps you, leave the counter off: "7 people have joined" sells against you.

If you'd rather not build the page in Webflow at all, every LaunchList project already has a hosted launch page with a block editor, and AI can draft it from a sentence about your product. For template inspiration either way, see 15 Waitlist Landing Page Examples That Convert.

Webflow + Ecommerce, Memberships or CMS

Webflow users often combine a waitlist with other Webflow features:

• Webflow Ecommerce: Use a waitlist to gauge demand for pre-orders or limited drops. Capture signups with LaunchList before your products go live.
• Webflow Memberships: Segment waitlist signups before converting them into members. Export the segment from LaunchList as CSV and import it into Webflow.
• Webflow CMS: Embed a form in a CMS template to collect signups on every item page. To tell items apart, give the form a hidden field: its key doubles as a query parameter, so a link such as ?drop=spring lands in that column. Or create a separate form per collection; they all feed the same deduplicated audience.

Add a popup signup form, and open it on exit intent, a timer or scroll

Any element can open your LaunchList form in an overlay. Put this in an Embed element, or add the attribute to a Webflow button you already have:

<button type="button" data-launchlist-popup="frm_8Kd2Qm4Rp9">
    Join the waitlist
</button>

It's your own button, so style it however you like. Add data-variant="slideover" with data-position="right" for a side panel instead of a centered modal. From your own script you can also open it with LaunchList.popup('frm_8Kd2Qm4Rp9').open();.

The runtime can open the popup on its own, too. Add a hidden element carrying a data-trigger:

<!-- Exit intent: opens when the pointer leaves through the top of the window (desktop only) -->
<div hidden data-launchlist-popup="frm_8Kd2Qm4Rp9" data-trigger="exit"></div>

<!-- Timer: opens 10 seconds after the page loads (default 5) -->
<div hidden data-launchlist-popup="frm_8Kd2Qm4Rp9" data-trigger="time" data-delay="10"></div>

<!-- Scroll: opens once 60% of the page has been scrolled (default 50), at most every 14 days -->
<div hidden data-launchlist-popup="frm_8Kd2Qm4Rp9" data-trigger="scroll" data-scroll="60" data-cap="14"></div>

• Frequency cap. data-cap sets how many days must pass before the same visitor sees an auto-opened popup again. The default is 7.
• Never after a signup. Once a visitor has joined through the popup, it doesn't auto-open for them again.
• Exit intent is desktop only. Phones have no pointer leaving the window, so pair it with a timer or scroll trigger if mobile traffic matters.
• These are hand-written attributes. The snippet generator in Embed & API → Your website gives you click-to-open popup buttons; the data-trigger, data-delay, data-scroll and data-cap attributes are typed by you, exactly as above. The loader still has to be on the page.

Use one auto-trigger per page. A popup that fights the visitor for attention costs more signups than it wins.

Add live social proof: counter, leaderboard, milestone, countdown

Widgets put live numbers from your waitlist on your Webflow page. Each is one <div> in an Embed element; copy the exact snippet from the Widgets section of Embed & API → Your website, with your own project handle in place of acme.

<!-- Live signup total -->
<div data-launchlist-widget="counter" data-project="acme" data-label="founders already in"></div>

<!-- Top referrers -->
<div data-launchlist-widget="leaderboard" data-project="acme" data-title="Top referrers"></div>

<!-- Progress toward a community goal -->
<div data-launchlist-widget="milestone" data-project="acme" data-goal="1000" data-reward="Early access for everyone"></div>

<!-- Time until launch (needs a launch date in Project settings, General) -->
<div data-launchlist-widget="countdown" data-project="acme" data-heading="We open in"></div>

<!-- Your published updates, as a "What's new" feed -->
<div data-launchlist-updates="acme" data-heading="What's new" data-count="5"></div>

Widgets are on every plan, Free included. They're aggregate only: no widget ever shows an email address or phone number, a leaderboard row shows the name your form collected or a masked identifier, and a slice of fewer than ten people shows no number at all. Like the form, they render in a shadow root and take their look from Project settings → Branding.

One rule: a counter reading "7 people have joined" sells against you. Leave it off until the total helps, or use the milestone widget, which frames a small number as progress toward a goal.

The no-JavaScript form

If something on your Webflow setup strips <script> tags, a plain HTML form still works. It posts straight to LaunchList and our server redirects the visitor afterwards:

<form
    action="https://embed.getlaunchlist.com/f/frm_8Kd2Qm4Rp9/submit"
    method="POST"
>
    <input type="email" name="email" required />
    <input type="hidden" name="_channel" value="html" />
    <button type="submit">Join</button>
</form>

Copy the action from Embed & API → Your website rather than typing it. Two things to know:

• It needs somewhere to land. The server answers with a redirect to the signup's status page or your own URL. A form whose success behavior is inline message has neither, so set it to the status page or a custom URL for this method.
• Referrals need the loader somewhere on the page. A native form can't read ?ref= from the URL. If the loader is on the page, it finds the form by its action and adds the referral code and UTM parameters as hidden fields without taking the submission over. It only claims forms whose action is on its own host, so keep the action exactly as copied.

Embed on Webflow, or use the hosted page? The SEO answer

Every LaunchList project also comes with a hosted launch page, built in a visual editor with 19 block types, 8 style presets and 6 starting templates, and AI can write the first draft from one sentence about your product. So which should carry your waitlist?

• Embed on Webflow when the waitlist belongs on a page you already rank or plan to rank. The page is yours and on your domain, so it's indexed exactly as your Webflow site is, and the signups it earns build your domain, not ours.
• Use the hosted page when you don't want to build a page at all, or need a dedicated page for an ad campaign. It's server-rendered, so search engines get real HTML on the first request.

The honest indexing rule: a hosted page on its your-slug.launchlist.page address is never indexed by search engines, on any plan. It's live and shareable, but it asks search engines not to index it. To have a hosted page indexed, connect your own domain: one custom domain on the Collect plan, three on the Launch plan, unlimited on the Grow plan. You add one DNS record under Embed & API → Hosted page → Custom domain, and HTTPS is issued and renewed automatically. The launchlist.page address keeps working alongside it. The "Powered by LaunchList" badge comes off on the Launch and Grow plans.

You can use both: a hosted page for a campaign and the embed on your Webflow site. Deduplication is per project, so the same person arriving through both is one contact.

Tracking waitlist signups in GA4, Meta Pixel and your other analytics

On your Webflow site, your own analytics already sees the page, because the form sits on your page. To count signups as conversions:

• Send signups to your own thank-you page. In the form's settings, set what happens after submit to Your own URL, point it at a Webflow page, and fire your conversion event there. UTM parameters pass through, so the conversion is still attributed to the right campaign.
• Record them server-side with webhooks. LaunchList sends signed webhooks for 27 event types, including signup.created, contact.verified and referral.made, signed with HMAC-SHA256 and retried 7 times over about two and a half days, with a delivery log under Embed & API → Developers → Webhooks. There's no native Zapier or Make app; point a webhook at "Webhooks by Zapier", Make or n8n and route signups anywhere from there.

On the hosted page, add your own tags under Project settings → Privacy & spam: Google Analytics 4, Google Tag Manager, Google Ads, Meta Pixel, TikTok Pixel, LinkedIn Insight, X Pixel, Plausible and PostHog. They load on the hosted page and the status page, with an optional consent banner that links to your privacy policy. Custom tracking tags are on every plan.

Inside LaunchList, Analytics shows signups over time, organic versus referred, the hosted page's visit-to-signup rate and the share that confirmed, each compared with the period before. The breakdown of where signups come from (channels, landing pages and referring sites) is on the Grow plan. LaunchList doesn't track email opens or clicks; it reports delivered, bounced, unsubscribed and spam complaints.

What happens after someone signs up

The form is the start. Here's what LaunchList does with each signup, with no extra setup:

• A status page of their own with their position, their referral link, one-tap share buttons and their referral count. Every email you send links back to it, so "where's my link?" never reaches your inbox.
• Double opt-in, per form. It's on by default for Waitlist and Marketing forms and off for Survey forms; switch it under the form's Settings → Verification.
• A Contact Trust verdict on every signup: Verified, Valid, Unknown, Risky or Fake. A contact is only marked Fake when two independent signals agree, and suspicious signups are held for review rather than deleted, outside your list and your bill until you approve or block them.
• Referral credit only after the friend verifies. By default a referrer can earn at most 3 credited referrals from one IP address and 20 in an hour, and credit is taken back if a referred contact later turns out to be fake.
• Rewards and points unlock automatically by referral count on the Collect plan and up, each with its own announcement email.
• Email from the same place. Broadcasts on the Collect plan and up; branching automations, a custom sending domain and saved segments on the Launch and Grow plans; beta invites with personal codes on every plan (the Free plan covers your first 100).

Spam protection is on every plan. If a bot finds your form, raise the strictness or turn on CAPTCHA under Project settings → Privacy & spam, with your own Turnstile, reCAPTCHA or hCaptcha keys. Add your site's domain to the allowed hostnames in your CAPTCHA provider's account, or the challenge won't load.

For developers: the REST API, webhooks and MCP

If signups happen on your server rather than in a browser, skip the embed and post them directly:

curl https://api.getlaunchlist.com/v1/contacts \
  -H "Authorization: Bearer llk_live_..." \
  -H "Content-Type: application/json" \
  -d '{ "project": "prj_7Qk2mN4pR8", "email": "[email protected]" }'

One call returns the referral code, the live queue position and the trust verdict. The REST API has 53 operations, described by a public OpenAPI 3.1 spec at api.getlaunchlist.com/v1/openapi.json, and keys are created under Embed & API → Developers → API keys with 13 scopes.

The same workspace is open to AI agents through LaunchList's MCP server: 35 tools that Claude, ChatGPT, Cursor and other MCP clients can use to read your audience, draft broadcasts or edit your page draft. You connect over OAuth, approving one workspace on a consent screen, or with a scoped API key, under Embed & API → AI assistants. Agents can't delete contacts or publish pages, and a broadcast needs a separate confirmation step. The API, webhooks and MCP are on every plan, the Free plan included.

Troubleshooting

The form doesn't appear

• Make sure you published the site. The Designer shows a placeholder, not the form.
• Check that the Embed element saved, and that the loader script is on the page (in the Embed or in Head Code).
• Check the browser console for errors, and that the form ID matches the one in LaunchList.

Signups appear in Webflow, not LaunchList

• You're using option B and the data-launchlist-enhance attribute is missing or misspelled on the Form Block.

The form shows twice

• The form's Embed element is on the page twice; each renders its own form. Remove the duplicate. A loader in both the head and an Embed is harmless.

A field lands in the wrong place

• To fill a specific field, the input's Name must match that field's key in LaunchList, not its label.

A test signup is missing from your audience

• Check the Held for review filter on Audience → Signups. Repeated test signups from one device can look like a bot and get held. Use test mode for practice runs.

Webflow vs Webflow + LaunchList: cost breakdown

LaunchList is billed monthly or yearly (yearly is 2 months free), and these are beta prices that may change after the beta. Contacts past your size are held, never deleted. Full prices: LaunchList pricing. Verify Webflow's current pricing on their pricing page.

Frequently asked questions

How do I add a waitlist to Webflow?

Drag an Embed element onto the page and paste two lines from LaunchList: a <div data-launchlist-form> and the loader script. Or keep the form you designed in Webflow and add the data-launchlist-enhance custom attribute to its Form Block so LaunchList handles submission and referrals.

Can I run a waitlist on Webflow's free Starter plan?

Yes. The Embed element and custom attributes are both available on Webflow's free Starter plan, and LaunchList's Free plan holds up to 100 contacts with no card, so a referral waitlist can cost $0.

Can I keep my Webflow form design and still get referrals?

Yes. Add data-launchlist-enhance with your form ID as a custom attribute on the Form Block and load the LaunchList script once in Head Code. Your Webflow markup and classes stay as designed, and LaunchList takes over submission, validation, referral attribution and the success state.

Can I add an exit-intent waitlist popup to Webflow?

Yes. Put a hidden element with data-launchlist-popup and data-trigger="exit" in an Embed element; time and scroll triggers work the same way. These attributes are written by hand, they show at most once every 7 days by default, and they never reopen for someone who already signed up.

Will my Webflow waitlist page be indexed by Google?

A waitlist embedded on your Webflow page is indexed like the rest of your Webflow site. A LaunchList hosted page on a launchlist.page address is never indexed on any plan; to index a hosted page, connect your own domain on the Collect plan or higher.

How do I track Webflow waitlist signups in GA4?

Set the form's after-submit behavior to your own Webflow thank-you URL and fire the conversion there; UTM parameters pass through. For a server-side record, use LaunchList's signed webhooks.

Can I send Webflow waitlist signups to Zapier or a CRM?

Yes, through webhooks: point a LaunchList webhook at Webhooks by Zapier, Make or n8n, or call the REST API from your own code. There is no native Zapier app, and CSV export is available on every plan.

How much does a Webflow waitlist with LaunchList cost?

LaunchList is free for up to 100 contacts. The Collect plan starts at $9 a month for 500 contacts and adds rewards, broadcasts and a custom domain; the Launch plan starts at $19 a month and adds automations and your own sending domain. These are beta prices, billed monthly or yearly.

Launch your Webflow waitlist today

You can have a referral waitlist live on your Webflow site in about ten minutes. The Free plan covers 100 contacts with referral links, a live leaderboard, status pages, spam protection and a hosted launch page, with no card.

Start your waitlist free →

Related reading

• Add a waitlist form to any website: the no-code embed hub.
• Add a waitlist to WordPress: cousin setup guide for WordPress sites.
• Add a waitlist to Squarespace: cousin setup guide for Squarespace.
• 15 waitlist landing page examples that convert, with templates to copy.
• Best free waitlist software compared (2026)
• How to launch on Product Hunt (2026 guide)
• LaunchList features: embeds, the hosted page, referrals, email and the API.