How to send an email from a static HTML page with Google sheets?

send email html


Sometimes you have a sample static websites created with HTML, CSS, and javascript and you may have a contact page on that website.

As you know a contact page will accept some fields from users like his Email, Name, message and then save them to the database. In your backend, you will have a page that can see that contact messages and reply to users from.

Or maybe you need to send an email from your website, but you don’t want to use any server-side language like php,asp,node.js, or any other language. you want to send an email without even using any SMTP server.

In this article or small lecture, I will show you how to send an email to your static page using only javascript and google sheets service.

Step by Step Guide.

1. The first thing you have to do is to open the link below:

Google Sheet Copy Link

2. Click on make a copy. You will see a spreadsheet on front of you.

3. Rename the file if you want.

4. Click on tools > script editor.

5. Go to line number 8, uncomment and send the target email you want to send to.

6. Now save the script then click on file > manage versions > write any description and click on save version.

7. Click on publish > Deploy as a web app.

Make sure to select the project version( in your case must be one) but when you save a different version of the script, select the right one.

And leave access to anyone, even anonymous.

Click update and if it asks for authenticating just click allow.

8.Copy the generated script (we will use this in our page)

9. Now download the test HTML contact page: (we have two examples, one is basic, and the other is an async call to hide the success message)

Download basic example

Download Async example

Open the file and go to this part:

Paste the script link you got from google sheets in step 8 in the action value.

10. Now open the file in the browser and test it, just fill the form and click send.

Check your inbox to see the magic!

Also, every email you send will be recorded in the online google sheet.

This article is based on a GitHub tutorial, check it here.

Related Articles


Your email address will not be published. Required fields are marked *

  1. Hi Hassan,
    Is it compulsory to have a Gmail email id only or if we have another email id like Yahoo where we want the form to be sent is it possible to do so, please advise.

  2. Hi Hassan, I wonder if:
    1 – It is possible to avoid copying the message information in Google sheet or delete each row after use automatically?
    2 – Does Google sheet have a maximum of rows or something else that can cause the email not to be sent?

    1. hi friend, you can do whatever you want, but really it’s not in my schedule to update this guide.

  3. Thank you! very much, this article was really helpful. You just saved me a great stress. Once again, thank you! very much!

  4. sir i have a small doubt in my form I have used two buttons one is for OTP verification another is to submit but when use this code ,the OTP verification button is getting executed first can you help me in resolving this.

  5. Hey,
    i found your article is very helpful in one of my project, when i work with separate html, it’s working fine.
    The same implemented for a single page application, it’s storing the values in the Google sheet but it’s not sending mail and success message.
    can you guide me where i was wrong?

  6. i am making email form. but, after pressing there send batten mail not forward abut open new script file and it contain “{“result”:”success”,”data”:”{\”name\”:[\”cvts\”],\”message\”:[\”i will be late\”],\”email\”:[\”\”]}”} Why is it

  7. Hi Hassan, thank you for your article, but i need your suggestion. If we want to add more details in receiver’s gmail like contact number and address. so what we have to do?

  8. Hi Hassan,

    This post is super helpful, thank you.

    Can you provide advice or direct me where I can learn to include the “Name” field in the subject line?

  9. Hi Hassan,
    This post is very helpful, Thank you.
    I need file(Resume) attachment, it’s possible here?
    It’s possible means can you guide me via my gmail

  10. When I submit my input, the browser load me to new page and display this message below
    Can anyone help me how to prevent this ? Thanks

  11. this is the fetch version here in-case it helps

    const contactForm = document.getElementById(“contactForm”);

    contactForm.addEventListener(‘submit’, (e) => {

    const email = document.getElementById(‘contactEmail’).value;
    const name = document.getElementById(‘contactName’).value;
    const message = document.getElementById(‘contactMessage’).value;

    const url = `YOUR_SCRIPT_URL?email=${email}&name=${name}&message=${message}`;
    const options = {
    “Content-Type”: “applications/json”,

    fetch(url,options).then(response =>{

  12. Hello. Congratulations on the work. It worked very well just can not redirect to another page after sending the form. Always shown the JSON section of Server Result “Success”. In step of the tutorial to use .js did not work. Could you give help? Thank you very much and congratulations on the great work.

  13. Hello,

    This script is fantastic! It’s exactly what I needed. Now I just need to solve 2 issues.

    1. I used the simple form with my own css style. However; when the action is executed,it will come back with the success result. I am trying to have it direct to another page after submitting. It seems like I can either have it shows the results. Or direct to another page but no email gets sent.

    2. Add a Google captcha so I don’t get spam.

    Is this possible with your html script? Or does the redirect ha e to be in the js file?

    1. You can use your custom theme, make sure to copy the exact code and place the values correctly. about Recaptcha, you need to validate server-side, using only HTML will be easy to break.

  14. HI,
    Hassan, I am following every step you told but after I click on Submit button, it shows – {“result”:”success”,”data”:”{\”name\”:[\”Mohd Faraz Farooqui\”],\”message\”:[\”Hi, testing.\”],\”email\”:[\”\”]}”} This Code after submitting the form.
    And URL also got changed.

    So, I check your sheet copy and downloaded a form from your blog with thank you message showing up. But it still returns the same results as above. Why?
    Can you sort this out, it’s essential and I don’t know why it’s happening.
    In Google Sheets, there is no updating in the list as I submit a form, but getting form details in my Gmail Account.
    Best Regards,
    Mohd Faraz Farooqui

  15. Unfortunately, you can’t automatically send an email from a statistical file. You will have to use some server technologies to process the request and send the email.