Pre-launch web page using a Google Sheet

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:

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

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

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

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.

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

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.

Add your web page files to this repository.

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

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.

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

• Github source code for the pre-launch web page
• Configuring a custom domain for your GitHub Pages site