cREATE A NEWSLETTER WITH GOOGLE SHEETS
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. https://docs.google.com/spreadsheets
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 https://sheetdb.io/. 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>
<html>
<style>
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=text],
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;
}
</style>
<body> <!Change SheetDB link to yours>
<form action="https://sheetdb.io/api/v1/changethis" 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>
<label>
<input type="checkbox" style="background-color:transparent" checked="checked" name="subscribe"> Daily Newsletter </label>
</div>
<div class="container">
<input type="submit" value="Subscribe">
</div>
</form>
<script>
var form = document.getElementById('sheetdb-form');
form.addEventListener("submit", e => {
e.preventDefault();
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
window.open('ADD_REDIRECT_LINK', '_blank');
});
});
</script>
</body>
</html>
0 comments