Add “Name” and other fields to your Waitlist Google Sheet
By: Michelle Wirantono
Tags: Nocode, Authentication, Zapier

Add additional fields to your waitlist sheet and grant access to your Webflow site waitlist on a rolling basis

Prerequisites

Before we begin, make sure you have done the following:

Follow Cotter’s Basic Webflow Tutorial: How to Integrate Cotter’s Magic Link to Your Webflow Site in Less Than 7 minutes

How it works

We’ll have 3 pages in this tutorial: A Waitlist Page (/waitlist), a Login Page (/), and a Protected Page (/protected).

Users can sign up to the waitlist by entering their email on the Waitlist Page. You can manage people on the waitlist in your Google Sheets. Only people who are marked as Allowed: TRUE on the waitlist can login to your website using the Login Page and access the Protected Page.

In this tutorial, we’ll make the Waitlist Page, and then update the Login and Protected Page that you have made in the prerequisite tutorial.

Inserting Waitlist Emails to Google Sheets

Make a Waitlist Page

Step 1: Set up Google Sheets

Go to https://cotteremaillist.herokuapp.com to connect your Google Sheets that contains a list of emails and follow the instructions there. See an example Google Sheet here. (You can make this sheet private — you just need to connect your Google Account in the website above).

Step 2: Make elements to show the waitlist email form and a success message

Include a section element to load Cotter’s login form. We need to set that section id “cotter-form-container” . Make the section width and height to 300px for best results.

. Make the section and to for best results. Include a text element with id “waitlist-message”. We will show if the email is successfully added to the waitlist here.

Step 3: Add Cotter JS SDK

After finishing the page setup we can start with adding custom code to the Waitlist Page. Copy paste the code below to the custom code tab on the Waitlist Page settings.

Waitlist Page Settings

Scroll Down to “Custom Code” section

Add the code below to the head of Waitlist page:

<!--Get Cotter JS SDK-->

<script

src="https://unpkg.com/cotter@0.3.23/dist/cotter.min.js"

type="text/javascript"

></script>

Step 4: Use Zapier Webhook and add a function to insert email to your Google Sheets

Make sure you have already done Step 1 by going to https://cotteremaillist.herokuapp.com and connecting your Google Sheets that contains the waitlist (this can be empty, but make sure you follow the format specified).

Zapier Webhook Zap

Under “When this happens …” choose “Webhooks by Zapier” and choose the trigger “Catch Hook”.

Copy the custom webhook URL. We’re going to send the response from Cotter to this URL.

Add the code below to the body of Waitlist page:

Make sure that you have pasted your Zapier Webhook URL on the code block above.

Step 5: Add the code below to show the email form (“Join Waitlist” form) with Additional “Name” Field

Below the code on step 4, add this code:

Make sure that you have pasted your API Key ID on the code block above.

You can grab a Cotter API Key ID by visiting https://dev.cotter.app and creating an account. Once you have created an account, make sure to create a new project and grab the API Key ID.

Step 6: Test your Zapier Webhook

Try this Codesandbox with the code above, replace the ZAPIER_WEBHOOK_URL with the webhook URL you get from step 4.

After adding the code above, try logging in while filling in all the additional fields. Once successful, press “Test Trigger” in Zapier.

You should see something like this:

You’ll get the user’s email and the additional fields data.

Step 7: Send the data to your waitlist Google Sheets

To send the data to Google sheets, add a Google sheets zap on the next step of your Zapier

Under “Do this …”, choose Google Sheets. Choose action: “Create Spreadsheet Row”.

We want to look at existing rows to find the user and only add a new row if the user does not exist (new user).

2. Choose your account and spreadsheet

Create a Google Sheets with these headers. Then, choose that spreadsheet in the Zap. See an example Google Sheet here.

Make sure that Column A is for the Email, and Column B is for allowed = TRUE or FALSE. You can add the Name column on Column C. Make sure the sheet name is Emails.

3. Fill out the fields with the data from the Cotter’s login form

Set “FALSE” as the Allowed value if you want to use this as a waitlist.

5. Press “Continue” > “Test and Review”

You should see something like this:

You should also see the row added to your Google Sheets: