Pre-launch web page using a Google Sheet

Google Sheet spreadsheet as a database.

In this tutorial we'll create a simple pre-launch/coming soon page which will allow users to submit their email address, this will be stored in a Google Sheet spreadsheet.

For this example we're going to start with Bootstrap example template.

Here's the base HTML which we'll start with https://github.com/odwyersoftware/sheet2api-use-cases/blob/master/examples/pre-launch-website/base-template.html

It looks something like this:

Inital static Webinars page template

Now, let's get started adding the sign up functionality.

Here's our Google Sheet spreadsheet we're going to connect to our page: https://docs.google.com/spreadsheets/d/1NtWA9pEFffcSG-VCBY32gV0ym4Jm4JQ5L5nr_e3002g/edit?usp=sharing

Create your own spreadsheet with this exact format, as show below.

A B C D
1 email
2
3
3
Sheet1

Now, Create your Spreadsheet API using the link to that spreadsheet.

Create REST API from a Google or Excel Sheet

Next, we're going to secure your Spreadsheet API.
Click "Configure API".

Configure API link

Then under API Permissions, disable everything except Create. This will ensure members of the public may only submit data to our API, not read it.

Click "Save" to apply this change.

Configure API to allow Create requests only

Go back to your Spreadsheets page and copy the link to your Spreadsheet API.

Configure API to allow Create requests only

We'll use this to make our page dynamic. Here's the area of the template we're now going to edit to make our page dynamic:

<!-- Signup Form -->
<form id="signup-form" method="post">
    <input type="email" name="email" id="email" placeholder="Email Address" />
    <input type="submit" value="Sign Up" />
</form>

Add data-spreadsheet-api to the 'form' tag and an 'onClick' event to the submit button, like so:

<!-- Signup Form -->
<form id="signup-form" method="post" data-spreadsheet-api="https://sheet2api.com/v1/FgI6zV8qT121/use-case-pre-launch-page">
    <input type="email" name="email" id="email" placeholder="Email Address" />
    <input type="submit" value="Sign Up" onClick="alert('We will be in touch')"/>
</form>

Next, import the sheet2api script into your template just before the end of the "</body>" tag, like so:

<script src="https://sheet2api.com/v1/template.js"></script>
</body>

Save your file and reload your web page to see the result:

You now have a working web page to collect email addresses, great!

In the next (optional) steps we'll go through how to host this web page for free using Github Pages.

Hosting the web page

Head over to Github and create a new repository.

Create a Github Repository

Add your web page files to this repository.

Files added to the repository

On your repository Settings page, under "Github Pages", select Source branch master and click "Save".

Setup Github Pages for your repository

When the page reloads you will see link to your Github Pages hosted web page. If the link doesn't work right away, try again in 5 minutes. Github may take that long to publish your web page.

Github Pages hosted link for your repository

That's it! You've created a fully dynamic web page to collect email addresses before your site launches, and hosted it for free using Github Pages.

Useful Links


It's as easy as that 🎉.

If you need help, please feel free to send a message via the contact page.

Start using sheet2api now

Be up & running in seconds.