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

send email html

Introduction.

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

Responses

Your email address will not be published.

  1. GREAT! THANK YOU !!!
    I CAN’T SEE IMAGES IN THIS POST , BUT THE TEXT IS VERY USEFUL!!!

  2. 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.

  3. 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.

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

  5. 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.

  6. 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?
    TIA

  7. 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\”:[\”cbnenetwork@gmail.com\”]}”} Why is it

  8. 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?

  9. Why I see information about my form after a push the button. Can I avoid this ?Or to hidden these information.

  10. 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?

  11. 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

  12. hii , i have a contact form with file attachment, it’s possible to send attached file to mail

  13. When I submit my input, the browser load me to new page and display this message below
    {“result”:”success”,”data”:”{\”Email\”:[\”kkk@gamil.com\”],\”Message\”:[\”hello\”],\”Phone\”:[\”2819196958\”],\”Name\”:[\”din\”]}”}
    Can anyone help me how to prevent this ? Thanks

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

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

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

    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 = {
    method:”POST”,
    header:{
    “Content-Type”: “applications/json”,
    }
    };

    fetch(url,options).then(response =>{
    console.log(response.json());
    })
    .catch(err=>{
    console.log(err);
    })

  15. Hi! Actually I’m from India. I want to display my time. But it’s showing time according to your region. Please help.

  16. 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.

  17. 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.

  18. 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\”:[\”fdigitalblog@gmail.com\”]}”} 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

  19. 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.

Get 85% OFF on all our selected products
Get a Shocking Discount!
Check it out
Get a Shocking Discount!
Get 85% OFF on all our selected products
Check it out