Implement a waitlist with Netlify Forms and Flowabl

4 min readAug 8, 2022

There are many scenarios when you need to create a simple waitlist form, particularly when building Micro-Saas, and needing to get your idea out there fast and iterate.

In the following, I take you through how we created the waitlist marketing site for UserProfiles (no code user profile management with real-time events.) using Netlify Forms and Flowabl (no code workflow automation).

The Form

If you are building a simple waitlist or a marketing site, Netlify makes it super simple — one simple attribute and Netlify will take care of the rest when it deploys out the site.

The attribute: data-netlify=”true”.

<form action="/waitlist" accept-charset="UTF-8" method="post" data-netlify="true" name="userprofiles-waitlist">
  <div>
    <input required="required" placeholder="Enter your email" autocomplete="email" type="email" name="email" id="email" />
    <button type="submit">
      <p class="relative z-10">Try it</p>
    </button>
  </div>
</form>

💡 Tip: make sure to name the form, as this is what Netlify users to group the data received.

For more information, read the Netlify Forms documentation.

Automation

Alright, time for the magic! Your site is deployed, the waitlist Form is automatically integrated, and you are now ready to configure a webhook to trigger automation.

First, let's wire together your automation.

Flowabl Workflow

💡 Tip: Flowabl has a free tier — if you don’t have an account, you can create one easily.

Create a Workflow

Navigate to the ‘Parameters’ tab and create a new Parameter.
You can name the parameter anything unique — you will use the key to refer to it in the tasks you wire up next.
The important step is to enter $.email in the Event Payload, as this comes from Netlify forms (will show you later).
💡In simple terms, we are mapping the email submitted to the waitlist and making it available for use in your Workflow.

Wire up a few tasks. In our use case, we send an email with Postmark and create a Slack message notifying the team of a new sign-up to the waitlist.

Go to the ‘Configure’ tab and enable Webhook triggers. Click on ‘Build webhook URL’ and copy the Webhook URL from the modal. You will need this in a few steps.

Netlify Form Notification

Navigate to the Forms Settings in your site and scroll down to ‘Form notifications’

Select ‘Add notification’, then ‘Outgoing webhook’. This will open a modal for you to paste in the Webhook URL you copied from Flowabl.

This will send a payload to Flowabl, triggering the workflow whenever anyone submits to the waitlist. Sample payload below

{
  "number" : 5,
  "title" : null,
  "email" : "hello@userprofiles.io",
  "name" : null,
  "first_name" : null,
  "last_name" : null,
  "company" : null,
  "summary" : "hello@userprofiles.io",
  "body" : null,
  "data" : {
    "email" : "hello@userprofiles.io",
    ...
    "referrer" : "https://userprofiles.io/"
  },
  "created_at" : "2022-08-01T05:21:44.798Z",
  ...
}

Show your support

Thanks for reading! If you made it this far, show your support if this helped you:
- 💬 Follow Tyson (the author) and Flowabl on Twitter
- 🌐 Sign up to the UserProfiles waitlist for better user profile management

✨ A special thanks to Flowabl for providing a free tier.