EmailJS Contact Form

EmailJS is a great service to use to send emails online and only worry about the frontend.

What is EmailJS? It’s a JavaScript library that allows you to send email straight from the page, without using any backend code. After that, the developers create one or more email templates (dynamic content supported) and use our Javascript SDK to send an email with specified templates and dynamic parameters for rendering it.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            // https://dashboard.emailjs.com/admin/account
            emailjs.init('public_key');
        })();
    </script>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById('contact-form').addEventListener('submit', function(event) {
                event.preventDefault();
                // generate a five digit number for the contact_number variable
                this.contact_number.value = Math.random() * 100000 | 0;
                // these IDs from the previous steps
                emailjs.sendForm('service_id', 'template_id', this)
                    .then(function() {
                        console.log('SUCCESS!');
                    }, function(error) {
                        console.log('FAILED...', error);
                    });
            });
        }
    </script>
                                      
    <form id="contact-form">
        <input type="hidden" name="contact_number">
        <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>

The public key as commented out in the code, you get from: https://dashboard.emailjs.com/admin/account

For the service ID, you get it from “Email Services”

For the template ID, you get it from “Email Templates”

Here’s an example code for the email notification.

<table style="background-color: #f7f7f7; width: 100%;">
<tbody>
<tr>
<td>
<table style="margin: auto; padding-top: 20px; padding-bottom: 20px;">
<tbody>
<tr>
<td style="text-align: center;"><img src="https://cdn.shopify.com/s/files/1/0032/3043/3315/t/24/assets/thrive-logo-horizontal.svg?v=93495361139925698751656453675" alt="" width="200px" height="auto"></td>
</tr>
</tbody>
</table>
<table style="background-color: white; width: 100%; max-width: 600px; margin: auto; border-left: 15px solid #f7f7f7; border-right: 15px solid #f7f7f7;">
<tbody>
<tr>
<td style="padding: 0 20px;" data-read-aloud-multi-block="true">
<p><strong>Name: </strong><br>{{user_name}}</p>
<p><strong>Phone: </strong><br>{{user_phone}}</p>
<p><strong>Email: </strong><br>{{user_email}}</p>
<p><strong>Company: </strong><br>{{user_company}}</p>
<p><strong>Color: </strong><br>{{color}}</p>
<p><strong>Waist: </strong><br>{{waist}}</p>
<p><strong>Inseam: </strong><br>{{inseam}}</p>
<p><strong>Quantity: </strong><br>{{quantity}}</p>
<p><strong>Message: </strong><br>{{message}}</p>
</td>
</tr>
</tbody>
</table>
<table style="margin: auto; padding: 20px; width: 100%; max-width: 600px; text-align: center;">
<tbody>
<tr>
<td>
<h4>Congrats on Your New Website Lead!</h4>
</td>
</tr>
<tr>
<td data-read-aloud-multi-block="true">
<p><em><small>The form was submitted from: {{form_url}}</small></em></p>
</td>
</tr>
<tr>
<td>
<p>Have questions about the form submission or the website?<br>Reach out to your web support at <a href="mailto:hello@brownsurfing.com">hello@brownsurfing.com</a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

To get the actual URL of the page where it was submitted from, I have to do it manually with JavaScript and a hidden field.

<input type="hidden" name="form_url" value="" id="form-url">

let formURL = document.querySelector('#form-url');
formURL.value = window.location.href;