# Create a contact form
Now that we have our Contact Service and Contact Us email template set up, the final step is to create a simple HTML contact form and send its content via email using EmailJS.
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
// https://dashboard.emailjs.com/admin/account
emailjs.init({
publicKey: "YOUR_PUBLIC_KEY",
});
})();
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
// these IDs from the previous steps
emailjs.sendForm('contact_service', 'contact_form', this)
.then(() => {
console.log('SUCCESS!');
}, (error) => {
console.log('FAILED...', error);
});
});
}
</script>
</head>
<body>
<form id="contact-form">
<!-- To simplify the tutorial, the value is static. -->
<input type="hidden" name="time" value="Mar 10 2025 08:46">
<label>Name</label>
<input type="text" name="name" required>
<label>Email</label>
<input type="email" name="email" required>
<label>Subject</label>
<input type="text" name="title" required>
<label>Message</label>
<textarea name="message" required></textarea>
<input type="submit" value="Send">
</form>
</body>
</html>
# Getting Your Public Key
You can obtain your public key from the Account (opens new window) page in the EmailJS dashboard. Once set up, fill in the form fields and hit "Send"—your email should arrive in your inbox. If you don't see it, check the spam folder.
# What Did We Just Do?
First, we load our EmailJS SDK
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
Second, we initialize the SDK with our public key
emailjs.init({
publicKey: 'YOUR_PUBLIC_KEY',
});
Third, we submit our contact form and send it through EmailJS
emailjs.sendForm('contact_service', 'contact_form', this);
# That’s it!
You now have a fully functional contact form that sends messages
directly to your inbox via EmailJS.
Simple, efficient, and no backend required!
← Prepare an Auto-Reply template Connecting email services →