Creating A Contact Form - EmailJS

Trang chủ » Html Form To Email » Creating A Contact Form - EmailJS

Có thể bạn quan tâm

# 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!

Từ khóa » Html Form To Email