Projects
Web Integrations
Send Form Data to Email
If you’re creating a contact or feedback form for your website, it’s essential to have a reliable method for sending that information directly to your email inbox. Elastic Email offers a powerful and cost-effective API for sending emails from your web project.
This tutorial will guide you through the process of sending form submissions from a basic HTML page using JavaScript and Elastic Email’s HTTP API. The process is straightforward, quick, and ideal for testing or small projects.
What is Elastic Email?
Elastic Email is a cloud-based email delivery service that allows developers and businesses to send transactional and marketing emails through HTTP API or SMTP. It offers high deliverability, detailed analytics, and developer-friendly integration options.
Creating an API Key
Before you can send emails through Elastic Email, you need to generate an API key. This key will authenticate your requests to their servers.
Log into your account at Elastic Email
Go to Settings > API
Create a new key and assign it permissions for sending emails
Copy the key and keep it safe (you’ll only see it once)
This key will be used in your JavaScript code to send the request.
HTML Contact Form
The form allows users to enter their name, email, and phone number. When submitted, it sends that data to your inbox via Elastic Email.
This basic structure includes input fields for user data and a submit button. It also includes SweetAlert for user-friendly alerts on success or error.
<div class="container">
<h2>Get in Touch</h2>
<form onsubmit="emailSend(); return false;">
<input type="text" id="name" placeholder="name" name="name" required>
<input type="text" id="phone" placeholder="phone" name="phone" required>
<input type="email" id="email" placeholder="email" name="email" required>
<button type="submit" class="btn">submit</button>
</form>
</div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="Contact form to email.js"></script>CSS Styling
This CSS gives the form a clean, modern look. You can always customize it further to match your website’s branding.
The design uses soft shadows and spacing to create a form that’s easy to use and visually appealing.
* {
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #32cd9c;
}
.container {
width: 350px;
background-color: white;
border-radius: 5px;
padding: 20px;
text-align: center;
}
.container input {
width: 100%;
padding: 10px;
border: none;
border-bottom: 2px solid #777777;
margin-bottom: 20px;
font-size: 16px;
outline: none;
}
.btn {
border: none !important;
cursor: pointer;
background-color: #32cd9c;
margin: 15px 0;
font-size: 16px;
width: 100%;
padding: 14px;
}
.btn:hover {
background-color: #1f7d5f;
color: white;
}JavaScript for Email Sending
Here’s the JavaScript that sends the form data to Elastic Email using a POST request. It formats the message, sends it through the API, and provides user feedback with alerts.
This code makes use of the fetch API to send a POST request with the user’s input data formatted in HTML. It handles both success and error responses and logs errors to the console for debugging.
function emailSend() {
const userName = document.getElementById('name').value;
const phone = document.getElementById('phone').value;
const email = document.getElementById('email').value;
const messageBody = `
<h3>New Form Submission</h3>
<p><strong>Name:</strong> ${userName}</p>
<p><strong>Phone:</strong> ${phone}</p>
<p><strong>Email:</strong> ${email}</p>
`;
fetch("https://api.elasticemail.com/v2/email/send", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
apikey: "YOUR_API_KEY_HERE",
subject: "New Contact Form Submission",
from: "your_verified_email@example.com",
to: "your_verified_email@example.com",
bodyHtml: messageBody,
isTransactional: true
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
swal("Successful", "Email has been sent successfully!", "success");
} else {
swal("Error", "Failed to send email!", "error");
console.error("Elastic Error:", data.error);
}
})
.catch(error => {
swal("Error", "An unexpected error occurred!", "error");
console.error("Fetch Error:", error);
});
}
What is SweetAlert and Why We Used It
In this project, we used SweetAlert to display success and error messages in a visually appealing way. Instead of using the default browser alerts (alert()), SweetAlert provides beautiful modal popups that improve user experience.
To include SweetAlert, just add this script in your HTML:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>Then, you can call it using:
swal("Title", "Message", "success" or "error");In our case:
When the email is sent successfully:
swal("Success", "Your message has been sent!", "success");If there’s an error:
swal("Error", "Something went wrong!", "error");
SweetAlert is lightweight, easy to use, and requires no setup.
Useful Elastic Email Links
Website: https://elasticemail.com
Create API Key: Available in your dashboard under Settings > API
Email Send Endpoint:
https://api.elasticemail.com/v2/email/sendAPI Documentation: https://api.elasticemail.com/public/help
Reminder: This tutorial is great for testing or learning, but for any live website, your API key must not be exposed in the browser. You should handle email requests on a backend server or use serverless functions to secure your credentials.
Final Thoughts
Integrating Elastic Email into a frontend HTML/JavaScript project is a great way to quickly set up email functionality for contact forms. While this tutorial shows how to use it directly, be sure to explore secure deployment methods for production use.
Watch Video on YouTube
Send form data to dmail using HTML, CSS & JavaScript
Download The Source File
Get immediate access to the original source file with a simple click, and start customizing it to fit your needs.
