Create an Embedded Email and Name Form on Google Sites to Google Sheets
In this video, learn how to create an embedded email and name form on Google Sites that captures data directly into Google Sheets using Apps Script, without the need for third-party tools like Zapier. The tutorial covers the setup process, including HTML embedding and parameter handling.
We will create an embedded email form and name form into a website. We'll use Google Sites from Google Sites into a Google Sheet. 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 from your Google site or website. It's an embedded HTML form directly into Google Sheets. You don't need to use Zapier , you don't need to use anything. Unfortunately, I want to just Prepare you for a little bit of information here. This is super on sophisticated and unsecure. I just want to make sure that you understand that. We're using Google servers in a Google sheet. So if you're, if you haven't watched the other video, it's okay. Embed Email Form and Name Form into Website to Google Sheets When did you learn the secrets of Google Sheets? | Sheet Talking Episode 8 Esa Capture Emails from Website Form to a Google Sheet (Without Zapier) OnlySheets
I'm going to try to go over that very quickly here. Basically we have 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 do post. It's going to take in a URL that it gets sent and it's going to parse it for the parameters of email. Now, someone has emailed me. Asked, a member has asked, Hey, how do you add more parameters ? How do you add a name here? And so that's what we're gonna do in this video. There's a lot of moving parts to this, so I'm gonna try to explain it in a drawing very quickly. So we have a website. We have a website and a Google sheet. Embed Email Form and Name Form into Website to Google Sheets When did you learn the secrets of Google Sheets? | Sheet Talking Episode 8 Esa Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
Let's make the Google sheet green and the website blue. And we want the form here. Let's make this white. A form here to enter your email. And what it does is in this form, it's a JavaScript. And it, when you hit submit, it sends to a URL. Where that URL 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 . So we're going to create Apps Script here. We'll make that gray, let's say. And here in Apps Script , we're going to do what's called a doPost . Embed Email Form and Name Form into Website to Google Sheets How to Send Google Forms Entries Automatically with Apps Script Embed Email Form and Name Form into Website to Google Sheets Gmail Declutter Engine
And we will deploy this, and this is going to be deployed to web, as a web app. And what this deployed to web app, Apps Script does, is it creates on Google servers a URL that you can send data to. 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 you're dealing with here, but essentially just a URL that you send a little text parameter that says this, the email is equal to whatever the text is in this box. And then it's going to send it to this app script . The app 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. And so we have the sheet here. Embed Email Form and Name Form into Website to Google Sheets When did you learn the secrets of Google Sheets? | Sheet Talking Episode 8 Esa Embed Email Form and Name Form into Website to Google Sheets OnlySheets
I'll show you here. Emails. It's just going to go, add the email here. And we're going to also add a date. So the Apps Script looks like this. It's just a doPost . This is a built in function that we can deploy as a web app. And it just takes in what we're going to call a URL. That's just the text we use. The variable. And now this all works. Let's actually make sure it works. I created the code here for you to enter the web app deployment URL. Let's get that. Let's do that first. Let's get the URL. 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. I'm going to hit deploy, and it's going to give us a URL. This URL, this is what we want to enter into the form. Embed Email Form and Name Form into Website to Google Sheets Email Yourself a Cell from a Google Sheet, Every Day I Created an Automatic Emailer 43 Minutes of Google Sites and Google Sheets working together
So it's going to take a little bit of time. We do have to authorize it. Again, this takes a bit of time. Like moments, not hours, obviously. I haven't paused the video yet. Alright, here's our web app URL . So in our form HTML, we're going to put in Actually, I made it really easy, 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. So let's go and embed that into our sheet. We're going to embed the code, paste, next. That Embed Email Form and Name Form into Website to Google Sheets When did you learn the secrets of Google Sheets? | Sheet Talking Episode 8 Esa Embed a Number in a Website from a Google Sheet 43 Minutes of Google Sites and Google Sheets working together
is what it looks like, insert it. And let's publish this at email and name to sheets, publish . So now we have a Google site. Let's go view that. Bye. 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. Let's enter a email address. Andy at gmail dot com. Hit submit. You've successfully registered. So we added that text actually right here. Embed Email Form and Name Form into Website to Google Sheets Build A Business: PR Agency in a Google Sheet Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
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 and a date here. Great. So now let's add name. So on our, let's do this here first. So we want to capture the name first. So we have this variable email. It's just params dot email. So we can do, Variable names equals params. names 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 names. I'm saying names here because I, there might be a saved parameter called name. Embed Email Form and Name Form into Website to Google Sheets Simply Email Yourself From a Google Sheet 43 Minutes of Google Sites and Google Sheets working together
We can let's just try name. If it doesn't work, we're going to rename this names, but let's just try name or yeah, that's it. That's all name. We can also do this like first name. That might be a better first name. We'll do all lowercase here, but have this uppercase. And here, let's do that just to make sure it works. On our code, we need to create another input. So we see this input name equals email. And that's also why I wanted to put first name. So input name equals first name, and we're putting it in an input tag here. Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
The other thing we need to do is in this form action, I don't know if you can see this, we have, this, we've concatenated this URL, question mark, email equals, and then we put in the form dot email dot value. So we're going to add to that, we're going to do another plus, and then a single quote, and do. FirstName equals, do a single quote, a plus, now form. firstName, with a capital N, firstName. value. So now we should be adding this firstName in text equals , and then with this form. firstName. Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
value, we're going to add that name. 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. We just have to update the configuration. I think we just do edit new version. Added name. First name. Deploy. 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. Now we, this is going to be a little funky because we have two input forms . Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
We have a label . 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 and to your first name. Okay, let's take all that text, update this. Next, let's look at it, there. Enter your email, enter your first name. There are these quotes, you know these quotes come from copying the, from the sheet. We can delete those quotes. Next, there. Enter your email, enter your first name. Save. Let's publish . We don't want to review publish and changes. Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
We just want to hit publish , publish view. And now let's see if it works. Enter your email. Andy at gmail. com Andy. That's not my email. Let's see if we've succeeded, successfully registered and in our emails. Oh, we have done something wrong in our upscript. Let's look at our Apps Script and see we have, I think we deployed it. Params dot first name. Embed Email Form and Name Form into Website to Google Sheets Build A Business: PR Agency in a Google Sheet I Created an Automatic Emailer 43 Minutes of Google Sites and Google Sheets working together
We have a third right here, so what is going on? It might be in the JavaScript. Let's look at the script. Code. Oh, you know what? I did forget one thing here. Before this first name, I think we need an ampersand. That's what we need. Forgot that one. Little bit to separate the email and the first name. Okay, let's go update this code here. Next. Save. 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. Embed Email Form and Name Form into Website to Google Sheets How to Validate Email Addresses for FREE in 17 Minutes Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
Let's hit publish . Okay. This will work now. View we are going to open yet another one. Let's enter email Andy Franklin at gmail. com Andy with a capital A. Let's see if that works. Submit. You've successfully registered your email. Great. Let's go check our emails. Perfect. It's working now. 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. So all of those parts in summary are update your Apps Script , this doPost , create a parameter here. This parameter name, params. firstName, is going to be equal to this code in here where you need Embed Email Form and Name Form into Website to Google Sheets Simply Email Yourself From a Google Sheet Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
to put an input name equals and maybe put a 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 . There you go. That is it. Pretty simple. Hopefully, this helps. It's simple for you, but that's how you embed a name and any number of names. You can add first name, last name, maybe even some extra information. There are some different types of inputs you can add like check boxes and just, you just need to figure out, and you can do this very quickly through chat, GPT, but basically say, Hey, I have this HTML input, which is a check box. So it has a value of either true or false. Embed Email Form and Name Form into Website to Google Sheets How to Send Google Forms Entries Automatically with Apps Script Embed Email Form and Name Form into Website to Google Sheets 43 Minutes of Google Sites and Google Sheets working together
What is the value here that it's going to be? Maybe, probably just true or false. But you can double check those different parameter types with ChetGPT. You should be pretty quick to figure out what JavaScript you have to add here. Form dot the name of it dot value. What are you going to get? All right. Hopefully that's helpful to you. If you're watching this on BetterSheets, down below is this Apps Script here in the sheet. You can get this for free. If you're not yet a member of BetterSheets, become one today and grab the. Very handy dandy, enter your script and get the URL here URL, HTML. Thanks. Bye. Embed Email Form and Name Form into Website to Google Sheets Getting Started Coding in Apps Script Better Sheets Videos Checklist 43 Minutes of Google Sites and Google Sheets working together