Add beautiful waitlist form for your business landing page on Versoly

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

In this tutorial, we will be using Versoly 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 Versoly account, register here
3. A Cotter account

Step 1: Create a landing page in Versoly 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 Versoly editor, click on the button, then paste in the URL input section on the right side toolbar.

Finally, copy the following code to your External Scripts Site Settings.

<!--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 Versoly site!

You’re done 🎉

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