Sign-up form
You can create newsletter sign-up in a few minutes with SpreadAPI. In this tutorial we will create a simple sign-up form with only an email field.
The sign-up form that we will create in this tutorial
First, create a Google Sheet like the one below. It's just a single sheet called emails with a single column email.
Next, follow the setup instructions to configure API for your spreadsheet. While configuring authentication add the following line to the script so that everybody can add an entry to your sheet.
1
User("anonymous", UNSAFE(""), { emails: POST });
Copied!
Now you can now create HTML form on your site. The code below is a good starting point. I added a nice confirmation message shown after signing up.
1
<!-- I use Bulma CSS framework below. -->
2
<!-- Visit https://bulma.io to learn more -->
3
4
<!-- The form -->
5
<form id="newsletter-form">
6
<div class="columns is-multiline">
7
<div class="column is-6">
8
<input class="input is-medium is-fullwidth" type="email" id="email" placeholder="Enter your Email">
9
</div>
10
<div class="column is-6">
11
<button class="button is-medium is-primary is-fullwidth is-clear" id="sign-up">Sign up</button>
12
</div>
13
</div>
14
</form>
15
16
<!-- A dialog shown after successfully signing-up -->
17
<div id="subscription-success-modal" class="modal">
18
<div class="modal-background"></div>
19
<div class="modal-content">
20
<div class="box is-clearfix">
21
<div>
22
You've been added to the SpreadAPI subscription list!
23
</div>
24
<button class="button is-primary is-pulled-right" id="modal-ok-button">OK</button>
25
</div>
26
</div>
27
<button class="modal-close is-large" aria-label="close"/>
28
</div>
Copied!
You are almost done! The only piece missing is the JavaScript sending emails to Google Sheets. You can take advantage of the following snippet at your site:
1
// This code requires jQuery
2
3
var $form = $("#newsletter-form");
4
var $email = $("#email");
5
6
var $modal = $("#subscription-success-modal");
7
var $signUp = $("#sign-up");
8
9
var $modalOK = $("#modal-ok-button");
10
11
$form.submit(function(e) {
12
e.preventDefault();
13
14
// Don't do anything if email field is empty
15
var email = $email.val();
16
if (!email) {
17
return;
18
}
19
20
// Mark the "signup" button as "loading"
21
$signUp.addClass("is-loading");
22
23
// make the request
24
$.post({
25
// Replace the URL with the one specific for your script
26
url: "https://script.google.com/macros/s/AKfycbzoEi2wm45iNgmtsLf6nzMIo4hxFpZvUKKFTXxJc1jEtN4W9gRo/exec",
27
data: JSON.stringify({
28
method: "POST",
29
sheet: "emails",
30
payload: { email }
31
})
32
}).then(function() {
33
// Remove the "loading" state from the "signup" button
34
$signUp.removeClass("is-loading");
35
36
// Show the popup saying that user has been added
37
// to the subscription list
38
$modal.addClass("is-active");
39
});
40
});
41
42
// Once user clicks "OK" on the popup saying that he
43
// has been added to the subscription list we want to
44
// close the popup
45
$modalOK.click(function() {
46
$modal.removeClass("is-active");
47
});
Copied!
That's it. From now your users can sign-up to the newsletter and you will add their emails on Google Sheets!
Last modified 1yr ago
Copy link