Creating an Interactive Contact Form with EmailJS: A Comprehensive Guide from Scratch

Creating an Interactive Contact Form with EmailJS: A Comprehensive Guide from Scratch

In today's digital world, the presence of contact forms on websites plays a crucial role in maintaining communication between site owners and visitors. Contact forms allow visitors to send messages, requests, or feedback directly, thereby enhancing interaction and trust between users and service providers. Furthermore, with contact forms in place, site owners can promptly and efficiently receive and respond to user inquiries or issues.

One of the best solutions for sending emails through contact forms is by using EmailJS. EmailJS enables direct email sending from websites without the need to build a backend server. With EmailJS, you can easily integrate email services using JavaScript, simplifying the process of sending messages from contact forms.

This article aims to guide readers through the step-by-step process of creating and integrating interactive contact forms using EmailJS. From initial setup to implementation on a website, this guide provides clear and detailed instructions so that you can implement a functional and secure contact form effortlessly.

Introduction: Creating a Contact Form with EmailJS

A contact form is a critical component of a website, allowing visitors to communicate directly with the site owner. Through a contact form, we can receive messages, inquiries, or feedback from users in an easy and organized manner. In this guide, we will discuss how to create an interactive contact form using EmailJS, a service that facilitates email sending without requiring a backend server.

Creating the Contact Form

The first part of this guide will focus on creating the HTML structure for the contact form. We will begin by understanding the basic elements needed in a contact form, such as inputs for name, email, and message, as well as a button to submit this data.

HTML Structure

The basic elements of a contact form include the <form>, <input>, <textarea>, and <button> tags. Each element plays a crucial role in ensuring that the data collected from users is submitted correctly. Here is an example of HTML code to create a simple contact form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulir Kontak</title>
</head>
<body>
    <form id="contact-form">
        <label for="name">Nama:</label>
        <input type="text" id="name" name="user_name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="user_email" required>

        <label for="message">Pesan:</label>
        <textarea id="message" name="user_message" required></textarea>

        <button type="submit">Kirim</button>
    </form>
</body>
</html>

Designing with CSS

After completing the basic HTML structure for the contact form, the next step is to enhance its appearance using CSS. Good design not only makes the form aesthetically pleasing but also improves user experience by making the form easier to fill out and navigate.

Example CSS to Enhance the Aesthetics of the Form

Here is an example of CSS code to enhance the appearance of the contact form we have created:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    box-sizing: border-box;
}

label {
    display: block;
    margin-bottom: 8px;
}

input, textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #007BFF;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

By adding the CSS code above, a simple contact form will transform into a more attractive and user-friendly form. This combination of HTML and CSS forms a strong foundation before proceeding to the next step, which is integrating EmailJS to send emails through the contact form.

Integrating EmailJS

EmailJS is a service that allows you to send emails directly from the client-side JavaScript without dealing with a back-end server. This is particularly useful for simple applications that require email sending functionality, such as contact forms on websites. In this guide, we will learn how to integrate EmailJS into a web project, set up API keys and templates in EmailJS, and write JavaScript code to handle form data and send it through EmailJS.

Instalasi dan Konfigurasi EmailJS

Installation and Configuration of EmailJS

How to Integrate EmailJS into a Web Project:

Create an EmailJS Account:

Visit the EmailJS website and sign up to create a free account.

Create an Email Service:

Once logged in, navigate to the Email Services section.

Choose the email service you wish to use (e.g., Gmail, Yahoo, etc.), and follow the instructions to connect your email service.

Create an Email Template:

Go to the Email Templates section.

Create a new template and customize it according to your needs. For example, you can create a template for a contact message with variables like {{name}}, {{email}}, and {{message}}.

Get API Key:

Go to the API Keys section and create a new API key. Save this API key as it will be used in your JavaScript code.

Writing JavaScript Code

Explanation on Handling Form Data with JavaScript:

To send data from the contact form using EmailJS, we need to handle the form submission event, collect input data, and use the EmailJS SDK to send the email. Here's an example of a complete implementation.

Example JavaScript Code to Send Form Data to EmailJS:

Add EmailJS Library to Your Project:

Include the EmailJS script in your HTML file. You can use a CDN for this purpose.

<script type="text/javascript" src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script type="text/javascript">
  (function() {
      emailjs.init("YOUR_USER_ID"); // Ganti YOUR_USER_ID dengan User ID dari EmailJS
  })();
</script>

Create Contact Formulir in HTML:

<form id="contact-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send</button>
</form>

Handling Form Submission with JavaScript:

document.getElementById('contact-form').addEventListener('submit', function(event) {
  event.preventDefault(); // Mencegah pengiriman formulir secara default

  // Ambil data dari formulir
  const templateParams = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    message: document.getElementById('message').value
  };

  // Kirim email menggunakan EmailJS
  emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
    .then(function(response) {
      console.log('SUCCESS!', response.status, response.text);
      alert('Pesan berhasil dikirim!');
    }, function(error) {
      console.log('FAILED...', error);
      alert('Pengiriman pesan gagal. Silakan coba lagi.');
    });
});

n the code above, make sure to replace YOUR_USER_ID, YOUR_SERVICE_ID, and YOUR_TEMPLATE_ID with the appropriate values from EmailJS.

That's the Tutorial on Creating Interactive Contact Forms with EmailJS: A Complete Guide from Scratch. Hope it's helpful.