Full features contact form with emailjs.com - JavaScript from validation
Features of this form:
- JavaScript form validation.
- Email validation
- Static - working form
- Emailjs.com
-Auto clear input field after email is sent
-Auto reply to the given mail
-After sending messages you'll be notified
Before using this advanced form, you must have only three things:
- Public API keys.like"_xY-veSL9m-IAnKUI"
- ServiceID like "service_2uupt2d"
- TemplateID like "template_lpd7tib"
You can create all these credentials from emailjs.com
Well, you may not like the design of this contact form, but it is real, and it works without a backend or server. Please set up your EmailJS credentials before using this form on your static website. If not, I'll receive an email from this form. I used JavaScript code to fully function the mailing system, including email validation and empty field validation. The technology used in this form is EmailJS. Fast delivery, support for reply emails.
Sources code:
JavaScript code:
<!-- ---------------js for mailing system ----------- -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script type="text/javascript">
(function () {
emailjs.init("_xY-veSL9m-IAnKUI");
})();
</script>
<!-- -------------------------------------------- -->
<script type="text/javascript">
function sendmail() {
let fullName = document.getElementById("name").value;
let userEmail = document.getElementById("email").value;
let subject = document.getElementById("subject").value;
let userMessage = document.getElementById("message").value;
// Check if any of the input fields are empty
if (fullName === "" || userEmail === "" || subject === "" || userMessage === "") {
// Display an alert if any of the input fields are empty
window.alert("Please fill out all the required fields!");
} else {
// Check if the email address is in the correct format
let emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!emailRegex.test(userEmail)) {
// Display an alert if the email address is not in the correct format
window.alert("Please enter a valid email address!");
}
// Display an alert if the email address is not ending with @gmail.com
// else if (userEmail.substring(userEmail.length - 10) !== "@gmail.com") {
// window.alert("Please enter a valid email address ending with @gmail.com!");}
else {
var contactParams = {
from_name: fullName,
from_email: userEmail,
subject: subject,
message: userMessage,
};
emailjs
.send("service_2uupt2d", "template_jrg4zki", contactParams)
.then(function (res) {
window.alert("Message sent successfully...🥰");
//it helps to clear the input field after prompt and press ok
document.getElementById("message").value = "";
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("subject").value = "";
});
}
}
}
</script>
<!-- ---------------end js for mailing system ----------- -->
Email.js is a JavaScript library that allows you to send email messages from JavaScript code. It provides an easy-to-use interface for building and sending email messages, and can be used in a variety of applications and contexts.
There are a number of reasons why you might want to use Email.js in your project:
To send automated email messages: You can use Email.js to send email messages automatically, based on certain triggers or events in your application. For example, you might use Email.js to send a confirmation email to a user after they sign up for your service, or to send a notification email when a new item is added to a database.
To build custom email forms: Email.js can be used to create custom email forms that allow users to send messages to your application. This can be useful for building contact forms, feedback forms, or other types of user-generated content.
To integrate with external email services: Email.js can be used to send email messages through a variety of external email services, such as Sendgrid, Mailgun, and more. This makes it easy to use your preferred email service with your JavaScript code.
To send email messages from the client-side: Email.js allows you to send email messages directly from the client-side, which can be useful in certain contexts. For example, you might use Email.js to send an email message when a user clicks a button on a web page, without having to make a separate server-side request.
To easily send emails from their website or application: Emailjs.com provides a simple API that allows users to send emails directly from their website or application without the need to set up a separate email server. This can be particularly useful for small businesses or individuals who do not have the resources or expertise to manage an email server.
To avoid spam filters: Emailjs.com uses a variety of techniques to ensure that emails sent through their service are not flagged as spam by email providers. This can help to increase the chances that emails will be delivered to their intended recipients.
To customize email templates: Emailjs.com allows users to create and customize email templates, making it easy to create professional-looking emails that match their brand.
To manage email lists: Emailjs.com provides tools to manage email lists, including the ability to segment lists and send targeted emails to specific groups of users.
To track email performance: Emailjs.com provides analytics and metrics to help users track the performance of their emails, including open rates, click-through rates, and conversion rates. This can help users optimize their email campaigns and improve their results.
