EmailJS

# Create a contact form

We have our Contact Service email service and Contact Form email template from the previous steps. Let's create a simple HTML form and send its content by email.









 
 
 







 
 
 
 
 
 



















<!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="contact_number" value="697483">
        <label>Name</label>
        <input type="text" name="user_name">
        <label>Email</label>
        <input type="email" name="user_email">
        <label>Message</label>
        <textarea name="message"></textarea>
        <input type="submit" value="Send">
    </form>
</body>
</html>

You can obtain your public key from the Account (opens new window) page in the EmailJS dashboard. After filling the fields and sending the request we should find the new email in our personal inbox. If you can't find it take a look at the spam folder.

# So what did we 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, using our Contact Service and Contact Form:

emailjs.sendForm('contact_service', 'contact_form', this);

# That’s it!

You now have a contact form that sends all submissions to your inbox via your own Gmail account.

← Prepare an Auto-Reply template Connecting email services →