Angular Bootstrap Contact Form

Angular Contact Form - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

This Angular Bootstrap Contact Form tutorials is a step-by-step guide on how to create a contact form for sending messages using the NodeJS environment and Express server. It also covers the validation of client-side and server-side messages.

Requirements:

• Angular 6 with Angular CLI,
• The NodeJS environment,
• The Express package from the npm repository,
• The nodemailer package from the npm repository,
• The body-parser package from the npm repository.

If you need some ready-to-download code, you will find it here.

Creating the application and the necessary service

Let's start from scratch! Let's create a new application and generate a service responsible for contact with our NodeJS server. In order to do this, execute the commands below in your application terminal:

1. Create a new Angular application using Angular CLI:

        
            
          ng new mdb-contact-form --style=scss
        
        
    

Create a new Connection Service:

        
            
          ng generate service connection
        
        
    

Then add the newly generated ConnectionService to the providers array in the app.module.ts file.

Building the ConnectionService logic

The ConnectionService is responsible for contact with our backend written in NodeJS. It is not yet created, but we will do it in the next step. Let's now fill in the ConnectionService with the appropriate code, which will allow you to send the form to the backend.

        
            
          import { HttpClient, HttpHeaders } from '@angular/common/http';
          import { Injectable } from '@angular/core';

          @Injectable({
            providedIn: 'root'
          })
          export class ConnectionService {
            url: string = 'http://localhost:3000/send';

            constructor(private http: HttpClient) {}

            sendMessage(messageContent: any) {
              return this.http.post(this.url,
              JSON.stringify(messageContent),
              { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), responseType: 'text' });
            }
          }
        
        
    

The sendMessage() method is responsible for hitting the http://localhost:3000/send address, which is the router defined in the Express server that we will immediately create. Thanks to this, our application knows how to send data between the frontend and backend layers.

The post() method of the HttpClient class takes three parameters.

The first parameter is the address of the endpoint to be hit by the front layer.

The second parameter is the data that the front has to send to the address from the first parameter.

The third parameter details the options, which we can pass to the request. In them, we pass the Http header with the defined Content-Type parameter.

Creating the NodeJS backend server file

To do this, Create a new file in your application's root directory, and name it server.js, then paste the code you will find below. Without any worries, I'll immediately describe what the code you copy is doing.

If you haven't installed the express, nodemailer and body-parser packages from the npm repository so far, do so immediately using the following command in your application terminal:

        
            
          npm install express nodemailer body-parser --save
        
        
    

        
            
          const express = require('express');
          const nodemailer = require('nodemailer');
          const app = express();
          const port = 3000;
          const bodyParser = require('body-parser');

          const transporter = nodemailer.createTransport({
            host: 'smtp.gmail.com',
            provider: 'gmail',
            port: 465,
            secure: true,
            auth: {
              user: ' ', // Enter here email address from which you want to send emails
              pass: ' ' // Enter here password for email account from which you want to send emails
            },
            tls: {
            rejectUnauthorized: false
            }
          });

          app.use(bodyParser.json());

          app.use(function (req, res, next) {
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
          });

          app.post('/send', function (req, res) {
            let senderName = req.body.contactFormName;
            let senderEmail = req.body.contactFormEmail;
            let messageSubject = req.body.contactFormSubjects;
            let messageText = req.body.contactFormMessage;
            let copyToSender = req.body.contactFormCopy;

            let mailOptions = {
              to: [' '], // Enter here the email address on which you want to send emails from your customers
              from: senderName,
              subject: messageSubject,
              text: messageText,
              replyTo: senderEmail
            };

            if (senderName === '') {
              res.status(400);
              res.send({
              message: 'Bad request'
              });
              return;
            }

            if (senderEmail === '') {
              res.status(400);
              res.send({
              message: 'Bad request'
              });
              return;
            }

            if (messageSubject === '') {
              res.status(400);
              res.send({
              message: 'Bad request'
              });
              return;
            }

            if (messageText === '') {
              res.status(400);
              res.send({
              message: 'Bad request'
              });
              return;
            }

            if (copyToSender) {
              mailOptions.to.push(senderEmail);
            }

            transporter.sendMail(mailOptions, function (error, response) {
              if (error) {
                console.log(error);
                res.end('error');
              } else {
                console.log('Message sent: ', response);
                res.end('sent');
              }
            });
          });

          app.listen(port, function () {
            console.log('Express started on port: ', port);
          });
        
        
    

I will start the description of the above code from the top.

Line 7 — const transporter = nodemailer.createTransport({ }) is used to create a function that takes the object containing the configuration of the transporter as a parameter. It is in this configuration that you define the host from which emails are sent, the provider (if it is gmail), port, authorization, and many other things that are to be sent. To make it easier, you can send emails from a Gmail account. To do this, enter your username and password to your mailbox in the user and pass keys.

Line 22 — app.use(bodyParser.json()); launches the body-parser, thanks to which we can intercept data sent in the requests from the frontend layer.

Lines 24 — 29 are only used in development environments. It is not recommended to use them in a production environment unless you know exactly what you are doing.

In line 31 we define route /post, after which the frontend layer sends data to the backend layer. This is where the actual email is sent to the mailbox.

Lines 33 — 37 create helper variables, thanks to which we can more easily refer to the individual components of our request.

Line 39 defines the mailOptions object that is sent to the sendMail() method. It is in this object that we define, to who the email is to be sent, from who, what is its subject, text, and to who the response in the email is to be addressed. In this object are many more options that you can use. You will find them all on this page.

Lines 47 - 77 are responsible for server-side validation. This is a very simple validation, which only checks if all of the required fields are given. If any of them is not given, the backend returns the message to the front layer that the request is incorrect.

Lines 79 - 81 correspond to whether a copy of the message should be sent to the user. In the form, this is determined by the checkbox.

Lines 83 - 89 are responsible for mail sending. This is where the sendMail() function with the parameters defined above is called. If an error occurs, the server console will register the log. If the shipment is successful, the whole message will be returned to the server console.

Lines 92 - 94 run our Express server on the port 3000, which we defined at the beginning of the file.

Tutorial conclusion

In this tutorial, I presented a very simple way to send messages from the contact form on the front, through the use of a very popular backend stack NodeJS + Express. The example application, which you wrote together with me, can be easily extended by, e.g. more advanced validation on the server side, and other, interesting things on the front end.

If you have any problems while working with this tutorial, please look at our support forum and see if anyone has already had a similar problem.

If you encountered a problem with Google blocking your application while sending an email from @gmail, try changing permissions for less secure applications. You can achieve this by visiting this page.