Add A Waitlist Form Using Google Sheets And Javascript

To my dear readers. Today, I am taking a brief break from writing about AI to share something a bit different with you all.

As I am currently building a new software product called GetShipped, I just finished implementing a waitlist feature to collect emails from people interested in the product.

The waitlist form was easy and completely free to code, so I thought it was worth sharing with my followers who might find this topic helpful.

Before diving into the technical details of the implementation, I’d like to introduce the concept of GetShipped.

What is GetShipped?

My ultimate goal for GetShipped is to offer the best boilerplates for your next AI web app. It’s packed with fundamental features like a database, payment systems, a beautiful landing page, and AI capabilities (text-to-text and text-to-image).

FYI. This is still under development and some sections of the landing page are not finalized yet.

The beta will launch in a few weeks, and I hope to get your support for this project. The rest of the article will guide you on how I implemented the “Join Waitlist” form using Google Sheets and a few lines of JavaScript code.

Let’s get started.

Step #1: Create a NextJS 14 project

First, create a folder on your local machine and open a terminal. Execute the following command to generate a Next.js web application:

npx create-next-app@latest waitlist

Build and run the app with npm run dev . The default app would look something like this:

Open the page.tsx file and replace its content with the following:

"use client"

import JoinWaitlist from './components/JoinWaitlist';

export default function Home() {

 return (

   <div className='p-10'>

       <JoinWaitlist />

   </div>

 );

}

‍

The page should now look like this:

Step #2: Set Up a Google Sheets

Create an empty Google Sheet and name it something like “GetShippedWaitlist”.

Next, select the “Apps Script” option under the Extensions tab.

This will redirect you to a new page where you can add a custom script to the Google Sheet.

Replace the default JavaScript code with the custom script below:

function doPost(e) {

 var sheet = SpreadsheetApp.getActiveSheet();

 var newRow = sheet.getLastRow() + 1;

 var newEmail = e.parameter["email"];

 sheet.getRange(newRow, 1).setValue(newEmail);

 return ContentService.createTextOutput("Success");

}

Click on the Deploy dropdown and select “New Deployment”. This will open a new pop-up window where you can specify the type as a Web App.

Configure the deployment with the correct details and ensure the access type is set to “Anyone”. This will allow us to add email addresses from a remote application.

Once the deployment is successful, you will receive a Deployment ID and a Web App URL.

Copy and paste the Web App URL for use later. You can close the dialog by clicking the Done button.

Step #3: Set Up Join Waitlist form

Under the components folder, create a file named JoinWaitlist.tsx and paste the code below:

"use client"

import { useState } from 'react';

const JoinWaitlist = () => {

 const [email, setEmail] = useState('');

 const [message, setMessage] = useState('');

 const handleSubmit = async (e: { preventDefault: () => void; }) => {

   e.preventDefault();

   try {

     const response = await fetch('GOOGLE_SHEETS_URL', {

       method: 'POST',

       headers: {

         'Content-Type': 'application/x-www-form-urlencoded',

       },

       body: `email=${encodeURIComponent(email)}`,

     });

     if (response.ok) {

       setMessage('Thank you for joining the waitlist!');

       setEmail('');

     } else {

       setMessage('An error occurred. Please try again.');

     }

   } catch (error) {

     setMessage('An error occurred. Please try again.');

   }

 };

 return (

   <div>

     <form className="mt-10 max-w-md" onSubmit={handleSubmit}>

       <p className="m-4 text-md leading-6 text-gray-900">

           Join the waitlist to get notified on launch and get exclusive perks and discounts!

         </p>

         <div className="flex gap-x-4">

           <label htmlFor="email-address" className="sr-only">

             Email address

           </label>

           <input

             id="email-address"

             name="email"

             type="email"

             autoComplete="email"

             className="min-w-0 flex-auto rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"

             placeholder="Enter your email"

             value={email}

             onChange={(e) => setEmail(e.target.value)}

             required

           />

           <button

             type="submit"

             className="flex-none rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"

           >

             Join the waitlist

           </button>

         </div>

       </form>

     {message && <p>{message}</p>}

   </div>

 );

};

export default JoinWaitlist;

‍

Replace the GOOGLE_SHEETS_URL above with the Web App URL generated in Step #2.

That’s pretty much it! All that’s left is to test and confirm that the email addresses are being added to the Google Sheet.

Alternative Methods for Implementing a Waitlist Form

While integrating a waitlist form using Google Sheets is a simple and effective solution, there are other methods available for implementing such a feature in a web app.

Here are three alternative approaches:

• Using a Dedicated Database and Backend: Setting up a dedicated database, such as MySQL or MongoDB, and creating a backend with a framework like Node.js or Django to handle form submissions.
• Third-Party Form Builders: Utilizing third-party form builders such as Typeform, JotForm, or Google Forms. These services often come with advanced features like conditional logic, custom branding, and integrations with other tools.

Despite the availability of these methods, using Google Sheets remains one of the easiest and fastest ways to collect emails from users. It’s a great option for those who need a quick, cost-effective solution without sacrificing functionality.

I hope you found this guide helpful. Implementing a waitlist form using Google Sheets and JavaScript is a straightforward process that can be completed with minimal effort.

If you have any better or easier ways of implementing a waitlist form for web apps, please let me know in the comments. I’m always open to learning new techniques and improving my workflow. Thank you for reading!

‍