Newsletter Sign Up Using Google Sheets and HTML


— Chelsea ♥

In my YouTube video I cover 3 ways to add a Sign Up subscription form / Newsletter to your Google Site using Google Sheets, Mailchimp or Flodesk. I won't cover all three ways - just the first way because it is the only option that is for all of you DIYer's out there.

First Create a sheet in Google Sheets. Be sure to create an account with the same email as Sheetdb to make the connection easier. You can also create a sheet in Sheetdb.

Make sure to create labels. For this I used Name and Email, but you can change it to whatever you want. Just be sure to change the data tags in the HTML.

For the code to work you will need to connect your Google sheet to On there website they claim: 

"SheetDB will turn your sheets into a JSON API, easy to integrate with other tools and all programming languages. We have prepared many libraries working with common tools, other APIs and programming languages.If you want to use a different API, e.g. in your CRM, you can use our API to turn the spreadsheet into JSON API."

Once your sheet is created and you connect to SheetDB add the link to the HTML code. I have included a sample code below.

<!DOCTYPE html>



body {

font-family: Arial, Helvetica, sans-serif;

color: blue


form {

font-family: Arial;

Color: black; // Change Daily News text color


.container {

padding: 15px;

background-color: transparent;



input[type=submit] {

width: 100%;

padding: 12px;

margin: 8px 0;

display: inline-block;

border: 1px solid;

color: black; // Change text box color and button text color


input[type=checkbox] {

margin-top: 16px;

color: red;


input[type=submit] {

background-color: #FD6D2F; // Change button color

color: black;

border: none;


input[type=submit]:hover {

opacity: 0.8;



<body> <!Change SheetDB link to yours>

<form action="" method="post" id='sheetdb-form'>

<div class="container">

<div class="container" style="background-color:transparent">

<!Change the data tags if you are not using name or email>

<input type="text" placeholder="Full Name" name="data[name]" required>

<input type="text" placeholder="Email address" name="data[email]" required>


<input type="checkbox" style="background-color:transparent" checked="checked" name="subscribe"> Daily Newsletter </label>


<div class="container">

<input type="submit" value="Subscribe">




var form = document.getElementById('sheetdb-form');

form.addEventListener("submit", e => {


fetch(form.action, {

method: "POST",

body: new FormData(document.getElementById("sheetdb-form")),

}).then(response => response.json()).then((html) => {

// Add your redirect link or javascript here'ADD_REDIRECT_LINK', '_blank');






Once you have added all of the required information to the HTML you can add the embed to your Google site by using the embed code feature located on the insert pane. B3e sure to test your connection to make sure your code is working correctly.