Toast Notification for Contact Form

In this tutorial, we will create a successful toast notification once user submitted the contact form.

Requirement

Before begin, these are the requirements that you need to have:

• Contact Form - You can use your own contact form
• Toastify JS

Install Toastify

1. Run this code to install

npm install --save toastify-js
# or
yarn add toastify-js -S

Add Toastify to Contact Form

1. Import toastify to our component

import Toastify from 'toastify-js'

2. import Toastify CSS in our globals.css.

import "toastify-js/src/toastify.css"

3. Insert this code inside the submitForm function before the clear the field code. You can change the text to whatever you want.

Toastify({
      text: "Email sent!",
      duration: 4000,
      newWindow: true,
      close: true,
      gravity: "top", // `top` or `bottom`
      position: "center", // `left`, `center` or `right`
      stopOnFocus: true, // Prevents dismissing of toast on hover
    }).showToast();

4. Your overall code will look like this.