It’s not always easy to find the right way how to send an email from a static HTML page with google sheets.
However, you might be tempted just to use your regular Gmail account to send messages from your website.
But that can quickly lead to problems if you’re trying to send a lot of messages at once.
Google Sheets service is the perfect solution for this issue. It offer easy ways to send email address without using any special software or server side language.
So, with a few simple steps, you can have your website send emails automatically.
In this short step by step guide, I’ll show you the easy and exact ways to send email from your static web page.
Read Also: What Is Email Warm Up – Increase Email Deliverability By 90%
How to send an email from a static HTML page with Google sheets step by step
1. First thing to do is, click on the following link:
2. The spreadsheet will appear in front of you.
3. If you like, you change the name of the file.
4. Click on Extensions> Apps Script.
5. Click on line No: 8; change the “TO_ADDRESS” with the email address you want, and Save the “Script”.
6. Click on the Deploy > New Deployment.
7. Add any Description you want, change access to Anyone, and then Press “Deploy”.
8. If it asks you to authenticate, click Authorize Access.
9. Copy the Web App URL you created and add it to your static web page.
10. Download the HTML form sample data and navigate to the script editor.
11. Navigate to the script editor and paste the web app link you copied from google sheets in step 9 into the “Action Value”.
12. Copy the website URL and open the file in your web browser, fill out the subject line and email form and then click the submit button.
After that, check your email ID to see the success message!
Additionally, every etries or emails will be record if you or someone else send emails.
This step by step guide was based on the GitHub tutorial.
Read Also: How To Verify Email Address Without Sending Email
Read Also: 10 Best Email Warm up Tools – Increase Your Inbox Reputation
How to send email from HTML form without any backend
There are several websites and technologies available online that allow us to make useful HTML forms in a quick and easy way without writing a single line of backend code.
However, you can create a basic HTML form using the example below.
<form>
<label for="email">Your Email</label>
<input type="email" name="email" placeholder="Your email">
<br>
<label for="name">Your name</label>
<input type="text" name="name" placeholder="Your name">
<br>
<button name="submit">Submit</button>
</form> Use the following web apps for making your form functional
However, I will be using formcarry.com. But, you can use emailjs.com or formspree.io as an alternate web app option to create an HTML form.
Use the following setups
Go to the formcarry.com web page and sign up using your email address.
After that, Log in to your dashboard and you will see the code that you have to add to your HTML form.
Now, copy the “action” and “method” HTML file attributes.
<form action="https://formcarry.com/s/uztm8yEvX1" method="POST"> After that, Paste the form tag attributes to your HTML form as shown below.
<form action="https://formcarry.com/s/uztm8yEvX1" method="POST">
<label for="email">Your Email</label>
<input type="email" name="email" placeholder="Your email">
<br>
<label for="name">Your name</label>
<input type="text" name="name" placeholder="Your name">
<br>
<button name="submit">Submit</button>
</form>
Well done!
Now you have to refresh your web page and fill out the HTML form. Then hit/submit the form.
You will be redirected to the Thank You page.
Now, you can go to formcarry.com and navigate to the detail dashboard.
You will be able to see all the details you filled in the contact form.
So, if you have any questions you can ask me in the comment section.
Hope you found this tutorial on how to send emails from a static HTML page helpful.
Read Also: 16 Top Free Blogger Templates For Any Niche – Download Now
Read Also: How To Warm Up SMTP Server IP: Skyrocket Your IP Reputation
GREAT! THANK YOU!
THE IMAGES ARE GREAT AND ILLUSTRATED BETTER IN THIS POST, AND THE TEXT IS VERY USEFUL AS WELL!
Thank you so much❤️
Hi,
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.
Awesome article . Keep up the good work.❤️
Thanks, Brother.
Thank you! very much, this article was really helpful. You just saved me a great stress. Once again, thank you! very much!
Thank you, brother.
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 Sir, 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 them in the form and in the sheet
Thank you so much for the article. I got what I wanted.
I’m happy, it helped you.
Thank you! very much, this article was really helpful. You just saved me a great stress. Once again, thank you! very much!
Thank you, brother.
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);
})
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.