Embed Email Form and Name Form into Website to Google Sheets

Advanced

About this Tutorial

Add names to the Email2Sheet apps script and code.

Sheet Resources

Access Sheet

Copy Sheet

Preview Sheet

Video Transcript

<div>00:00 So in this video, we will create an embedded email form and name form into a website. Uh, we'll use Google Sites, uh, from Google Sites into a Google Sheet. 00:11 Now, what this does is it builds on email-to-sheets. This is a previous video where I showed you how to capture an email, uh, from your Google Site or website, it's an embedded HTML form, directly into Google Sheets. 00:26 You don't need to use Zapier , you don't need to use anything. I want to just prepare you for a little bit of, uh, information here. 00:37 This is super unsophisticated and unsecure.

I just want to make sure that you understand that.

Um, we're using Google Servers, uh, in a Google Sheet, so if you're, if you haven't watched the other video, it's okay, I'm going to try to go over that very quickly here. 00:56 Basically, we have this, this HTML that we embed onto the site, and we're going to create a web app deployment URL from Apps Script that's essentially going to do this doPost . 01:10 It's going to take in a URL that it gets sent, and it's going to parse it for the parameters of email. 01:17 Now, someone has asked, a member has asked, hey, how do you add more parameters ?

How do you add a name here? 01:25 And so that's what we're going to do in this video. There's a lot of moving parts to this, so I'm going to try it. 01:30 I'm try to explain it in a drawing very quickly. So, we have a website. We have a website and a Google Sheet. 01:42 Let's make the Google Sheet green and the website blue. Alright. And we want the, uh, a form here. Let's make this white. 01:56 A form here to enter your email.

And what it's doing does is, in this form, it's a JavaScript and it, when you hit submit, it sends to a URL. 02:08 Well, where that URL is, is not actually going to be on the Sheet. Actually, it is on the Sheet. But, it's on a little part of the Sheet called Apps Script . 02:18 So, we're going to create Apps Script here. We'll make that grey, let's say.

And here in Apps Script , we're going to what's called a due post, and we're going to, will deploy this, and this is going to be deployed to web, as a web app. 02:37 And what this deployed to web app, Apps Script does, is it creates on Google servers a URL that you can send data to. 02:45 So, now, this Apps Script and this form will have a connection.

Basically, extremely insecure connection, sorry to keep saying that, I just want to harp on that, just to make sure you know what, uh, you're dealing with here. 02:58 But, essentially, So it's just a URL that you send a link to a text parameter that says this, the email is equal to whatever the text is in this box. 03:05 And then it's going to send it to this Apps Script , the Apps Script is going to take it, and parse that for the parameter that it's, the text that says the email, and then it's going to enter it into a sheet. 03:15 And so we have, uh, the sheet here, which I'll show you here, emails, and it's just going to go, add the email here, and we're going to also add a date. 03:23 So, the Apps Script looks like this, it's just a do post, this is a built-in function that we can deploy as a web app, and it just takes a second what we're going to call a URL, that's just the text we use, the variable. 03:35 And now this all works, let's, let's actually make sure it works.

I created the code here, uhm, for you to enter the web app deployment URL, let's get that, let's do that first, let's get the URL. 03:48 So, I want to deploy new deployment, and this is just deploying the entire Apps Script . We're going to execute as me, but anyone has access. 03:59 We're going to hit deploy, and it's going And we're us a URL. This URL, this is what we want to enter into the, uh, form. 04:08 So, it's going to take a little bit of time. We do have to authorize it. Okay.

Again, this takes a bit of time, like moments, not hours, obviously. 04:21 I haven't paused the video yet. All right. Here's our web app URL . So in our- our form HTML, we're going to put in, uh, actually I made it really easy. 04:39 You just copy it into this C2 and then it's going to substitute it. So now we have this text here with the URL. 04:46 So let's go and embed that into our sheet. We're going to embed the code. Paste. Next. That is what it looks like. 04:57 Insert it. And let's publish it. Publish this at, uhm, email and name to sheets. Publish .

So now we have a Google site. 05:16 Let's go view that. Uh, it's going to be at, I don't know if you can see this URL up here, but it's sites.google.com slash bettersheets.co slash email and name to sheets. 05:27 Let's enter or a email address. Andy at gmail.com. Hit submit. You've successfully registered. We added that, uh, text actually right here. 05:45 You've successfully registered your email. And if we go back to our emails, we can see Andy at gmail.com and we have a timestamp , timestamp and a date here. 05:53 Great. So now let's add name.

So on our, let's do this here for you. So we want to capture the name first. 06:03 So we have this variable email. It's just params.email. So we can do vari, uh, variable names equals params.names. Uhm, and then we need to set the value, so we're going to put the value in, let's put it in three, column three. 06:31 Names. I'm saying names here because I, there might be a saved parameter called name. We can, let's, let's just try name. 06:42 If it doesn't work, we're going to rename this names, but let's just try name or, um, yeah, that's it.

That's all name. 06:51 We can also do this like first name, first name. That might be a better first name. We'll do all lowercase here. 07:01 But I have this uppercase N here. Let's do that just to make sure it works. On our code, we need to create another input. 07:14 So we see this input name equals email. See, and that's also why I wanted to, uh, put first name. So input name equals first name. 07:30 and we're putting it in the oven. An input, uhm, tag here.

The other thing we need to do is in this form action, I don't know if you can see this, we have, this con, we've concatenated this URL, question mark email equals, and then we put in the form dot email dot value. 07:53 So we're going to add to that. We're going to do another plus, and then a single quote.

And do first name equals, do a single quote, a plus, now form dot first name, with a capital N, first name dot value. 08:15 So now we should be adding this first name in text equals , and then with this form dot first name dot value, we're going to add that name. 08:24 so let's hit that and let's update our we've updated our script Let's deploy again so we can manage deployments. We don't have to redo the URL. 08:37 We just have to update the configuration.

I think we just do edit new version, add a name, first name, deploy. 08:51 If we get any errors, it might be something around the text. We might have forgotten something. Okay, we don't have to update the URL, but we do have to update this here. We're going to add that first name there, next. 09:07 Now we, uhm, this is going to be a little funky because we have two input forms . We have a label . 09:14 Let's add a label here as well.

We need to do command enter to get a new line, label , and let's put it a break so that it does it on a new line into your first name. 09:32 Okay, let's take all that text, update this. Next, let's look at it there. Enter your email, enter your first name. 09:41 There are these quotes. You know these quotes come from copying the, from the sheet. We can delete those quotes. Next, there. 09:49 Enter your email, enter your first name, save. Let's publish . We don't want to review publish and changes. We just wants you. 10:02 Hit publish . Publish . View. And now let's see if it works.

Enter your email, andy at gmail dot com. Andy, that's not my email. 10:15 Let's see if we've, you've successfully registered. And in our emails. Oh, we have done something wrong in our, um, Apps Script . 10:30 Let's look at our Apps Script . And see, we have, I think we deployed it. Params dot first name. 10:52 We have a third, right here, so, what is going on? It might be in the JavaScript. script. Oh, you know what? 11:07 I did forget one thing, here. Before this first name, I think we need an ampersand. That's what we need.

Forgot that one. 11:18 Little bit to separate the email and the first name. Okay, let's go update this code, here. Next. Save. 11:30 Oh, and let's get rid of those quotes, just so that it's cleaner. Just the double quotes, and just from copying from the Google Sheet. 11:40 Let's hit publish . This will work now. View. We are going to open yet another one. Let's enter email andyfranklin at gmail.com andy, with a capital A. 11:56 Let's If that works, submit. You have successfully registered your email. Great. Let's go check our emails. Perfect.

It's working now. 12:06 Now we have separated the email and the first name. Awesome. So that's how you add more stuff if you want to capture things. 12:14 So all of those parts in summary are update your, uh, Apps Script , this do post, create a parameter here.

This parameter name, params.firstname is going to be equal to this code in here where you need to put an input name equals, and maybe put a. 12:32 Uh, line break to break it up so you can see them all, and then also add this form dot, whatever the parameter name is, dot value, and include it in the URL that you're sending to your Apps Script . 12:47 There you go. That is it. Pretty simple. Hopefully, uh, it's simple for you, but that's how you embed a name and any number of names. 12:54 You can add first name, last name, maybe even some extra information.

there are some different types of inputs you can add like checkboxes. 13:02 And just, you just need to figure out, and you can do this very quickly through ChetGPT, but basically say, hey, I have this, uh, HTML, uh, input, which is a checkbox , so it has a value of either true or false, uhm, what is the value here that it's going to be? 13:17 Maybe probably just true or false, but you can double check those different Parameter types with Chet GPT should be pretty quick to figure out what JavaScript you have to add here form dot The name of it dot value. 13:32 What is it?

Are you going to get? All right. Hopefully that's helpful to you. If you're watching this on, uh, better sheets down below, is this app script here in the sheet? 13:41 You can get this for free. If you're not yet a member of better sheets, become one today and grab the very handy dandy into your script and get the, uh, URL here. 13:52 URL HTML. Thanks. Bye.</div>