Add a Waitlist Form on your Landing Page built using Webflow

Send waitlist data (or any other user data) to Google Sheets.

In this tutorial, we will be using Webflow to create a beautiful landing page for your business. In order to start this tutorial, you’ll need a few things in advance:

1. A Google Sheet to store your waitlist form submissions, here’s an example template
2. A Webflow account, register here
3. A Cotter account

Step 1: Create a landing page in Webflow with a call to action button

In this case, the call to action button is the Join Early Access Waitlist button.

Step 2: Crete a copy of Example Email List in Google Sheet

Step 3: Set up a waitlist form

In this section, we are going to set up a new form for our Otter landing page. This form will send its data to the Google Sheet we created earlier.

Step 3a: Create a new form for waitlist purposes, let’s call it Otter Waitlist.

Step 3b: Send data directly to our Google Sheets.

Step 4: Connecting the form to our landing page

All we need to do now is to connect the form to the call to action button inside our landing page. We do this by setting the landing page’s waitlist button URL to the link provided by Cotter. Here’s what you need to do:

1. Go to Cotter’s dashboard > Projects > Forms & Fields, then click on the “Login Link” button, press the copy to clipboard icon. Make sure you chose the correct form in the dropdown.
2. Go to your Webflow editor, click on the button, then paste in the URL input section.

Finally, copy the following code to your Project Settings Custom Code section.

<!--Get Cotter JS SDK-->
<script
    src="https://unpkg.com/cotter@0.3.31/dist/cotter.loader.js"
    type="text/javascript"
    data-cotter-api-key-id="<YOUR-API-KEY-ID>"
></script>

Save and publish your Webflow site!

You’re done 🎉

You should see users email listed on the Google Sheet after they completed the form and authentication.