The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

Create a fully functional contact form with EmailJS

posted on 7.6.2023 by Below Surface in "Angular"

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:

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, as HTMLFormElement, environment.EMAIL_USER)       .then((result: EmailJSResponseStatus) => {         console.log(result.text);       }, (error) => {         console.log(error.text);       });   }

  updateUserInput(e: Event) {     const 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.


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.


contact form
send emails
angular 16
frontend email


More posts of this category

How to initialize a new Angular project

Starting from zero might be troubling, as it was for me as a React dev