How to Connect Email to HTML Form with EmailJS
Your website contact form needs to send visitor messages directly to your email. The first time I created an HTML form, I still remember that experience. The form appeared correctly on the page, but after I pressed Submit, nothing occurred. The system failed to deliver any email or alert or provide any response. EmailJS became my first discovery when I searched for an easy way to solve my problem.
I will show you how to use EmailJS for sending emails from an HTML form through this article. I will use easy Indian English, avoid complicated words, and explain everything step by step, as if I’m sitting next to you and guiding you. The guide provides a solution for beginners and students and people who need a functional contact form without any backend programming requirements.
What Is EmailJS and Why Use It?
EmailJS enables developers to send emails from their HTML and JavaScript applications without using any PHP or server infrastructure or email-enabled hosting services. The reason for EmailJS's popularity among entry-level users stems from its straightforward implementation process.
Why EmailJS Is Perfect for Beginners?
I suggest EmailJS for these reasons:
- No backend coding required
- The system operates with basic HTML and JavaScript code.
- The free plan provides sufficient resources for small websites.
- The system requires simple setup procedures which users can complete without difficulty.
- The system serves as an ideal solution for college students who want to create projects and build their professional portfolios.
Web development beginners can use this approach to achieve their work more efficiently.
Things You Need Before Starting
Before connecting email to an HTML form with EmailJS, make sure you have:
- A basic HTML form
- A free EmailJS account
- Internet connection 😊
The system requires only those two components which include both the server and the database.
Step 1: Create an EmailJS Account
You need to create a free account at the EmailJS website as your initial step.
After you complete the registration process:
You need to add your email service (Ex-Gmail.)
Your email address needs verification to complete this process.
The step enables EmailJS to send emails for you.
Step 2: Create an Email Template
- Go to Email Templates and Click Create New Template
The email design needs to be developed by you to show how it should appear when users submit their form.
The example template contains the following content:
- Name: {{name}}
- Email: {{email}}
- Message: {{message}}
Your HTML form will send data to these variables which will store the information.
Step 3: Get Your EmailJS Keys
You should record the following information from your EmailJS dashboard:
- Service ID
- Template ID
- Public Key
These items will be needed for your JavaScript programming.
Step 4: Create Your HTML Form
create simple HTML form (You can use this code):
<form id="contact-form">
<label>Name:</label><br>
<input type="text" name="name" required><br><br>
<label>Email:</label><br>
<input type="email" name="email" required><br><br>
<label>Message:</label><br>
<textarea name="message" required></textarea><br><br>
<button type="submit">Send Message</button>
</form>
Step 5: Add EmailJS Script
Add this script in <body>tag:
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script>
(function(){
emailjs.init("PASTE YOUR PUBLIC KEY HERE");
})();
</script>
Replace PASTE YOUR PUBLIC KEY HERE with your real EmailJS public key.
Step 6: Send Email Using JavaScript
Paste this JavaScript code:
<script>
document.getElementById("contact-form").addEventListener("submit", function(event) {
event.preventDefault();
emailjs.sendForm("PASTE YOUR SERVICE ID", "PASTE YOUR TEMPLATE ID", this)
.then(function() {
alert("Message sent successfully!");
}, function(error) {
alert("Failed to send message. Please try again.");
});
});
</script>
Replace: PASTE YOUR SERVICE ID , PASTE YOUR TEMPLATE ID with your real EmailJS SERVICE ID, REAL TEMPLATE ID
Test Your Form
After completing all steps: Open your HTML file in a browser Fill the form Click Send Message The email will reach your inbox within seconds if all details are accurate.
I checked my inbox twice during my first test because I couldn't believe it worked without a server connection😄.
Common Mistakes and How to Fix Them🛠️⚙️
Email Not Received?
You need to check your spam folder.
You must verify that both service ID and template ID have been entered correctly.
The template variables should use the same field names as the template.
Error in JavaScript?
You need to check the browser console for errors.
You need to check that EmailJS script has been successfully added to the system.
Final Words🧠✨
You will gain a valuable skill by learning to use EmailJS for email connections with HTML forms. The system eliminates form-related anxiety which results in a dynamic interactive experience for your website. I have used EmailJS for demo sites and student projects and small business pages and the service has always met my expectations.
Keep learning, keep building! 🚀
0 Comments