Serverless Material UI contact form

Setting up a serverless Material UI contact form — using Express and Nodemailer

Photo by Nicole De Khors from Burst

Having a contact form is obviously better than just simply displaying an email address on your website. Visitors of the website will feel convenient when they get in touch with us via the contact form. Most of the websites have a contact form and when I developed my personal website in React I planned to integrate a contact form, for that I did a Proof of Concept (POC). I have integrated a website using Material UI, Express, and NodeMailer. Material UI is a popular React UI framework like bootstrap. Express is a minimal and flexible Node.js web application framework. Nodemailer is a module for Node.js to send emails. Here we are going to develop a node application and React application from scratch. This is my 31st article in Medium.

To make headway

I assume that you know about GitHub. First things first, we need to create two repositories in GitHub. One is for the front-end(React-form) and another is for the back-end (Node API). You could maintain a single repo for both front-end and back-end but that is hard to maintain the project. Next, Download the latest version of node.js from the link. In this article, I used node v12.16.0 and npm version 6.13.4.

Photo by Headway on Unsplash

Front-End

To create a react application run the following command in your shell/terminal in a specific folder (e.g., desktop)

npx create-react-app contact-form

Delete all the files inside the src folder and create an App.js, Contact.js, and index.js files inside the src folder.

Now, in your src folder directory you need to create an index.js file with the following code:

Now, in your src folder directory you need to create an App.js file with the following code:

Install Material-UI for Material Design form component.

// Install MaterialUI
npm install @material-ui/core --save

Install Axios to make HTTP requests to the API.

// Install axios
npm install axios --save

Open the Contact.js file and Set it up as a class component.

Contact class component returns JSX form. Here I used Material UI components, so they are optional you can use your own components.

Here, except TextField for mail, each TextField has an onChange handler relevant to a specific variable in your component’s state. Therefore, the state gets updated as the input changes. The form itself has an onSubmit handler that calls the formSubmit function which handles your API calls. TextField for mail has an onChange handler that calls the handleChangeEmail function which validates mail TextField inputs.

Now you need to add all the functions inside the Contact class component.

As the name suggests, The preventDefault() function (on line 36) prevents the form’s default action which would have triggered a page reload. When the message is being sent, the button text changes to “…Sending”, and Axios makes the API call. resetForm function will reset your form fields and update your button text. In the handleChangeEmail function validate the email address and update the state using the regular expression.

Note: you need to update “BACKEND_URL” after you deploy the backend.

Photo by Ferenc Almasi on Unsplash

Back-End

Now you need to create a separate folder for the back-end development, I named the folder as “Form Backend”. You may use whatever name you prefer. To initialize the application run the following command in your shell/terminal in a specific folder (e.g., Form Backend)

// Initialize
npm init

You need to set up the Express.js, nodemailer, config file, and route for that run the following command in your shell/terminal which was integrated with VSCode or your IDE.

//Install express and other dependencies
npm install express nodemailer cors --save

We have installed CORS to allow cross-origin requests. In the package.json file, add the start property inside the existing scripts property. Your package.json scripts should like this:

"scripts": {
  "start": "node ."
}

Now, in your directory you need to create an index.js file with the following code:

If you use a well-Known mail service then replace the “WELL-KNOWN SERVICES” with the service name listed in the link. Update your Email address and Password. We have set up a Nodemailer SMTP Transport and our route that will receive the data from our React form and send an email to the destination email address that we specify.

Photo by hitesh choudhary from Pexels

Deploy

Before you push your code into GitHub make sure your backend repo is private because credentials will be exposed on GitHub.

Push your front-end code to the corresponding repository. Deploy your front-end using Vercel. You could use any services but Vercel is easy to deploy. For the backend deployment, you could use Heroku. We couldn’t use Vercel to deploy backend because Express is not a good fit for the Vercel platform since it is primarily a Frontend-First company and provider Serverless Functions as lightweight helpers. Finally, be sure to copy the link and replace BACKEND_URL in the Contact.js file in the React app.

Photo by SpaceX on Unsplash

Happy Coding 😎