How to send an email from a static HTML page with Google sheets?
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:
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)
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.
GREAT! THANK YOU !!!
I CAN’T SEE IMAGES IN THIS POST , BUT THE TEXT IS VERY USEFUL!!!
I will check, Thank you!
how can i change from email address
we are using a Gmail address here.
How to send message on WhatsApp
I dont know
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.
No, you can use any email
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?
hi friend, you can do whatever you want, but really it’s not in my schedule to update this guide.
Awesome article . Keep up the good work.
Thank you! very much, this article was really helpful. You just saved me a great stress. Once again, thank you! very much!
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.
Friend, sorry this totally out of scope
Thank you so much for the article. I got what I wanted.
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
Hello All
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
use the other template
it is not working through any template
Please, double-check friend, it must work
Hi Hasan,
No attach files in:
https://storage.h-educate.com/drive/s/Rbxh9HhrWut6AQUfCwUbODoL4LDAub
For download it.
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?
You can add whatever options you want, but you need to add in the form and in the sheet
Why I see information about my form after a push the button. Can I avoid this ?Or to hidden these information.
PLease use the second template
hello i use second template and it didnt show next page
please double-check, it must work
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?
You need to edit the script, I need to test, am sorry as I can’t give a direct answer here.
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
Am really sorry friend, I didnt do this before, I need to test
Thanks a lot for your quick reply!.
If you test please share that.
hii , i have a contact form with file attachment, it’s possible to send attached file to mail
I really didnt test this friend.
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
Check the other example
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);
})
Hi! Actually I’m from India. I want to display my time. But it’s showing time according to your region. Please help.
the html link is not working like to download the html file
Please post questions on h-educate.com/forums so the team won’t miss this.
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.
Hello friend, for questions, please post it on h-educate.com/forums.
please link send me 3 thousand niche excel sheet or google sheets
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?
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.
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
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.
you can, I explained it in the post