The Be Sure Blog

Note: Please make sure that you never leak your EmailJS credentials to the public! Using environmental variables usually is a good way to handle them! EmailJS is a well working email tool that does not require any backend. You can implement it in any React, Angular, Vue, etc app.

In this example, we will add it to an Angular v16 application. Sign up at the link below and keep the following three things on hand:

• Email Service value
• Email Template value
• Email User value

To avoid automated spam emails, I created a form where the user has to type "okay", to unlock the real contact form. I did not get any spam email with this method in one year of usage.

Step 1: Create an Angular component named "contact":

ng generate component contact

Then edit the file "contact.component.html" to include this code:

<div class="contact" id="contact"> 
  <form *ngIf="showContactForm" (submit)="sendEmail($event)">
    <label for="name">Your Name:</label>
    <input type="text" id="name" name="name" placeholder="Please type in your name here" required />
    <label for="email">Your Email:</label>
    <input type="email" id="email" name="email" placeholder="Please type in your email here" required />
    <label for="message">Your Message:</label>
    <textarea id="message" name="message"></textarea>
    <button type="submit" value="Send" class="submit-button">Send!</button>
  </form>
  <form *ngIf="!showContactForm">
    <p>Please note that spam and advertising are strictly forbidden. Type &quot;okay&quot; to unlock the contact form:</p>
    <label for="riddle"></label>
    <input type="text"
            id="riddle"
            name="riddle"
            placeholder="Just type &apos;okay&apos; in here"
            (input)="updateUserInput($event)"
            required />
  </form>
</div>

Save and close this file.

Step 2: Install EmailJS via NPM

npm i @emailjs/browser

Step 3: Update the file "contact.component.ts"

import { Component } from '@angular/core';
import emailjs, { EmailJSResponseStatus } from '@emailjs/browser';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent {
  userInput: string;
  riddle: string;
  showContactForm: boolean;
  constructor() {
    this.userInput = "";
    this.riddle = "okay";
    this.showContactForm = false;
  }
  public sendEmail(e: Event) {
    e.preventDefault();
    emailjs.sendForm(environment.EMAIL_SERVICE, environment.EMAIL_TEMPLATE, e.target as HTMLFormElement, environment.EMAIL_USER)
      .then((result: EmailJSResponseStatus) => {
        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
  }
  updateUserInput(e: Event) {
    const target = e.target as HTMLInputElement;
    if (target.value != "okay") return;
    this.showContactForm = true;
  }
}

As you can see, we use environment.EMAIL_SERVICE, environment.EMAIL_TEMPLATE and environment.EMAIL_USER. We need to set up these environmental variables now. Please make sure to never leak these credentials to a public Git repo or anywhere else.

Step 4: Create environmental variables with your EmailJS credentials.

First add these two lines to your .gitignore file, if you use Git.

/src/environments/*
environment.ts

Then create and/or edit the file /src/environments/environment.ts to include:

export const environment = {
  EMAIL_SERVICE: "your_service_id",
  EMAIL_TEMPLATE: "your_template",
  EMAIL_USER: "your_user",
};

Replace the string values with your actual credentials. If you ever leak your credentials, change them immediately!

Finally, some styling in the "contact.component.scss" file:

$prim-bg: #e37373;
$sec-bg: #5e66c2;
$prim-color: #f2f2f2;
$sec-color: black;
$box-shadow-dark: 0 0 15px rgba(0,0,0,0.3);
$box-shadow-bright: 0 0 15px rgba(255,255,255,0.6);
$text-shadow-dark: 1px 1px 5px rgba(0,0,0,0.3);
$text-shadow-bright: 1px 1px 5px rgba(255,255,255,0.7);

@mixin flexBox {
    display: flex;
    justify-content: center;
    align-items: center;
}
main {
    height: 100vh;
    @include flexBox;
    flex-direction: column;
}
.contact {
    border-bottom: none;
    > form {
        width: 500px;
        max-width: calc( 85% - 70px);
        outline: solid 3px $prim-bg;
        border-radius: 10px;
        padding: 25px 35px;
        margin: 35px 0;
        box-shadow: $box-shadow-dark;
        background: rgba(0,0,0,0.7);
        @include flexBox;
        flex-direction: column;
        align-items: flex-start;
        > p {
            font-size: 1.3rem;
            color: $prim-color;
        }
        > label {
            width: 100%;
            margin-bottom: 10px;
            color: $prim-color;
        }
        > input {
            width: 100%;
            background: none;
            border: none;
            outline: none;
            border-bottom: solid 3px $prim-color;
            padding-bottom: 5px;
            margin-bottom: 20px;
            color: $prim-color;
        }
        > textarea {
            border: none;
            outline: none;
            background: none;
            border: solid 3px $prim-color;
            padding: 5px;
            width: calc(100% - 10px);
            height: 175px;
            resize: none;
            margin-bottom: 20px;
            color: $prim-color;
        }
        > button {
            background: none;
            outline: none;
            border: none;
            border: solid 1px $prim-color;
            border-radius: 5px;
            padding: 5px 20px;
            box-shadow: $box-shadow-dark;
            transition: box-shadow .2s;
            color: $prim-color;
        }
       
        > button:hover {
            cursor: pointer;
            box-shadow: 0 3px 15px rgba(255,255,255,0.2);
        }
    }
}

Step 5: Testing

npm run start

Send an email and see if it goes through. If not, the developer console may provide some feedback, why it failed.