Setting Up a "Contact Us" Form with EmailJS

Overview

This guide will walk you through the process of setting up a "Contact Us" form using EmailJS for your Next.js 14 SaaS application. You'll learn how to connect your EmailJS account to Gmail, retrieve the service ID, template ID, and public key, and configure the necessary environment variables.

Step 1: Create an EmailJS Account

- Go to the EmailJS website.

- Click on "Sign Up" and follow the prompts to create a new account.

- Once your account is created, log in to the EmailJS dashboard.

Step 2: Connect EmailJS to Gmail

- In the EmailJS dashboard, go to the "Email Services" section.

- Click on "Add new service".

- Select "Gmail" from the list of email services.

- Follow the prompts to connect your Gmail account to EmailJS. You may need to log in to your Gmail account and grant the necessary permissions.

Step 3: Retrieve Your Service ID

- Once your Gmail account is connected, navigate to the "Email Services" section.

- Locate the Gmail service you just added and copy the service ID.

- Open your .env file in your project and add the following line, replacing your_service_id with the service ID you copied:

Step 4: Create a Template

- In the EmailJS dashboard, go to the "Email Templates" section.

- Click on "Create new template" to create a new email template.

- Customize the template with the fields you need (e.g., name, email, message).

- After customizing the template, save it.

- After saving the template, copy the template ID from the "Email Templates" section.

- Add the following line to your .env file, replacing your_template_id with the template ID you copied:

Step 5: Retrieve Your Public Key

- In the EmailJS dashboard, go to the "Account" section.

- Locate your public key and copy it.

- Add the following line to your .env file, replacing your_public_key with the public key you copied: