Sending emails directly from a web application can enhance user experience by enabling seamless communication. JavaScript, combined with EmailJS, allows us to send emails directly from the browser without server-side code. In this article, we will build a complete app that sends emails using JavaScript, including all necessary coding examples and detailed explanations.
Prerequisites
- Basic understanding of HTML, CSS, and JavaScript.
- An EmailJS account (free to sign up).
Step 1: Setting Up EmailJS
1. Create an EmailJS Account:
Sign up here for free EmailJS account
2. Create an Email Service:
- Once logged in, navigate to the “Email Services” tab.
- Add a new email service and connect your desired email service provider (e.g., Gmail).
3. Create an Email Template:
- Go to the “Email Templates” tab.
- Create a new email template with placeholders for the subject, message, and sender information.
4. Get Your User ID and Template ID:
- Navigate to the “Integration” tab to find your User ID.
- Note down the Template ID from the template you created.
Step 2: HTML Structure
We will create a simple form where users can enter their name, email, subject, and message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send Email using JavaScript</title>
<link rel="stylesheet" href="em.css">
</head>
<body>
<div class="container">
<h2>Send an Email</h2>
<form id="emailForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Send Email</button>
</form>
<div id="status"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.1/dist/email.min.js"></script>
<script src="sc.js"></script>
</body>
</html>
Step 3: CSS Styling
For a better user experience, we will add some basic CSS styling.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, textarea, button {
margin-top: 5px;
padding: 10px;
font-size: 1em;
}
button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #0056b3;
}
#status {
margin-top: 20px;
text-align: center;
}
Step 4: JavaScript Integration
Now, we will add the JavaScript code to handle the form submission and send the email using EmailJS.
// script.js
// Initialize EmailJS
(function(){
emailjs.init("YOUR_USER_ID"); // Replace 'YOUR_USER_ID' with your EmailJS user ID
})();
document.getElementById('emailForm').addEventListener('submit', function(event) {
event.preventDefault();
// Get form values
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var subject = document.getElementById('subject').value;
var message = document.getElementById('message').value;
// Send email
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', {
name: name,
email: email,
subject: subject,
message: message
}).then(function(response) {
document.getElementById('status').innerText = "Email sent successfully!";
document.getElementById('status').style.color = "green";
}, function(error) {
document.getElementById('status').innerText = "Failed to send email. Please try again.";
document.getElementById('status').style.color = "red";
});
});
Output:
In the above JavaScript code:
- Initialization: We initialize EmailJS using the
emailjs.init()method with your User ID. - Form Submission: We add an event listener to the form to handle the submit event.
- Get Form Values: We retrieve the values entered in the form fields.
- Send Email: We use the
emailjs.send()method to send the email. Replace'YOUR_SERVICE_ID'and'YOUR_TEMPLATE_ID'with the respective IDs from your EmailJS account. - Status Update: We update the status message based on whether the email was sent successfully or failed.
Detailed Explanation
EmailJS Initialization:
EmailJS provides a simple way to send emails using only client-side code. The emailjs.init() function initializes the library with your unique User ID, allowing you to authenticate and use EmailJS services.
Form Submission Handling:
We use JavaScript to handle the form submission and prevent the default form submission behavior. This allows us to process the form data and send the email using EmailJS without refreshing the page.
Form Data Retrieval:
The getElementById() method retrieves the values from the form fields. These values are then used to populate the email template parameters.
Sending the Email:
The emailjs.send() method sends the email using the specified service ID and template ID, along with the form data. The method returns a promise, which we use to update the status message based on the success or failure of the email sending process.
Conclusion
In this article, we built a simple app that sends emails using JavaScript and EmailJS. We covered setting up EmailJS, creating the HTML form, adding CSS styling, and implementing the JavaScript code to handle form submission and send emails. By using EmailJS, we can send emails directly from the browser without server-side code, enhancing the user experience and streamlining communication within web applications. This approach is particularly useful for contact forms, feedback forms, and any other feature that requires sending emails from a web application.
Leave a Reply