How to send an email in a static HTML page using google sheets scripts?

h-educate send email

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 Link<<

 

Limited Time Offer! Don’t Miss this!

 

2.click on make a copy. You will see a spreadsheet on from of you as the following:

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 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 the access to anyone, even anonymous.

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

 

Limited Time Offer! Don’t Miss this!

 

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

 

9. Now download this test HTML contact page:

Simple mail HTML page

Simple Contact Message with Async

 

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 is my results:

Gmail inbox:

Recorded emails:

 

Please if you have any question, feel free to leave it in the questions area.

 

Limited Time Offer! Don’t Miss this!

 

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

Sharing is caring!

41 thoughts on “How to send an email in a static HTML page using google sheets scripts?”

    1. Hassan Aboul Hassan

      you need to implement it correctly on your site. and check the IDs and fields. it’s 100% working. check your page

      1. well i did lot of goofing included your JS script @ all everything works fine for my website but after i do submit {“result”:”success”,”data”:”(my data was here)”}

        i see after success result you go back and remove all except form tag in your js but that is not working too either

  1. Hi Sir..
    I was following you tutorial.. the sheet gets updated when submitted but I am not receiving the mail 🙁

  2. Hi Hassan, thank you for the quick response. I’ve downloaded the file and replaced the script link with the one that I’ve got from google sheets. Unfortunately, nothing has changed. The problem still occurs.

  3. Hi Hassan, thank you so much for sharing your knowledge. Unfortunately I have the same issue like GRIF. Can you attach the second example which will solve solve this issue for me too?

  4. so it’s saying this when I press send to see if it worked & it did… it sent to my email.. but it said this on a blank sheet with this code displaying & it did not say congrats it sent… any help? anything i missed?
    {“result”:”success”,”data”:”{\”name\”:[\”Grif\”],\”message\”:[\”This is a test\”],\”email\”:[\”MyEmail@gmail.com\”]}”}

  5. When I click on submit & I followed your guide over & over again to see if I miss anything & I did not… so how do I get the thank you page to work? It shows the code that it went through it works I get a email & it sends through. Do I need to add in a function (
    in anywhere? I don’t want to mess it up & start over again. I am not other people. I am trying to use this as a temperately cheap budget for our business & I can’t seem to get it to work any suggestions? Or a link to get the thankyou page to display properly? Do I need to install anything else to get it to work properly?

  6. vivienng3@gmail.com

    I got the result as expected except for 1 thing.
    Whenever I clicked submit button, I was prompted for echo.json.
    What is this? How can I get rid of this?
    Thank you!

  7. mostafa.zeid2015@gmail.com

    You are an Egyptian ???
    I am not a programmer and I do not know how to use it and I need to send 100,000 miles a day and need free advice and thank you

    1. Hassan Aboul Hassan

      No friend. Its a full script as shown in the video. Please ensure that you followed the tutorial step by step

  8. its giving me successfully message but it didn’t send any messages to my mail, so please help me to solve this problem.

  9. Dear Sir,

    according to your instructions, I receive the following content on the website:

    {“result”:”success”,”data”:”{\”name\”:[\”sdfsaf\”],\”message\”:[\”fasdfasf\”],\”email\”:[\”asdfasf@fsaf.de\”]}”}

    Unfortunately, it does not open the Thank you messsage.

    Thanks in advance for your help

          1. Hassan Aboul Hassan

            You need to change the script URL as explained in the video. please watch the video again or read this article and follow step by step.

          2. Hi Hassan. It worked that time. Thanks and sorry for late reply.

            Next i wanna know, How to attach a file with email ? Is there a way ?

            Thanks

Leave a Comment

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