How to send form data via email from client-side | Firebase Functions & Nodemailer & Gmail

Install Firebase CLI

npm install -g firebase-tools

2. Log in firebase

firebase login

3. Firebase Init

firebase init

4. Select Functions

5. Select javascript.

6. To say no type “n” for the question that is “Do you want to use ESLint to catch probable bugs and enforce style?”

7. If it is your first time for the firebase functions type “y” for creation of /package.json.

8. Also type “y” for the creation of index.js

9. Also type “y” for the dependencies

10. Finally you got functions files right now. But it’s not ready yet.

11. Install firebase Admin SDK (In terminal)

npm install firebase-admin

12. Install Nodemailer

npm install nodemailer

13. Go to functions file via terminal command.

cd functions

12. Open functions folder on finder than open index.js file

13. Paste this code first into your index.js file.

const functions = require('firebase-functions')
const admin = require("firebase-admin")
const nodemailer = require('nodemailer');
admin.initializeApp()
/* gmail  credentials */
var transporter = nodemailer.createTransport({
    host: 'smtp.gmail.com',
    port: 465,
    secure: true,
    auth: {
        user: 'YourGmailAddress@gmail.com',
        pass: 'YourGoogleAccountAppPassword'
    }
});
exports.sendMailOverHTTP = functions.https.onRequest((req, res) => {
    const mailOptions = {
        from: `YourGmailEmailAddress@YouWant.com`,
        to: `YourGmailEmailAddress@gmail.com`,
        subject: 'Email From Me to MySelf | Contact Form Message',
        html: `<h1>Contact Form Message</h1>
                            <p>
                               <b>Email: </b>${req.body.email}<br>
                               <b>Name: </b>${req.body.name}<br>
                                <b>Mobile: </b>${req.body.name}<br>
                               <b>Message: </b>${req.body.message}<br>
                            </p>`
    };
    return transporter.sendMail(mailOptions, (error, data) => {
        if (error) {
            return res.send(error.toString());
        }
        var data = JSON.stringify(data)
        return res.send(`Sent! ${data}`);
    });
});

• Update the user: value with your gmail address.
• Update the pass: value with your gmail App Pasword.

Probably you are asking now what is the “App password”.

To get “app password” of your gmail account follow the steps below.

• First go to https://myaccount.google.com/security
• Secondly, activate two step verification

• Third, click and go to App Passwords (“Uygulama Şifreleri” in Turkish) and Generate a password.

• Fourth, copy the app password that you have just generated and paste it in index.js file as pass: value.
• Fifth, disable unlock captcha https://accounts.google.com/b/0/DisplayUnlockCaptcha

15. Now we are ready to deploy firebase function.

To do that go back to terminal > paste the following code below.

firebase deploy --only functions

When you deploy, firebase will give a URL in terminal response.

We will use this URL to send POST request to trigger to send email dynamically when form is submitted from client-side.

for example the URL looks like this below. (search in terminal)

https://us-central1-YourProjectName.cloudfunctions.net/sendMailOverHTTP

16. Postman App. To test whether it works or not, we should check first in Postman API App (if you do not have, download it).

• First, open the Postman App
• Paste the URL into url area.
• Select POST (method)
• Click Body > Select x-www-form-urlencoded

Now you can add the keys in postman as corresponding to the form inputs in your html like this below.

• name
• email
• mobile
• message

and Send it.

You should see the response like this below.

17. Now check your gmail whether the email we sent is received or not.

If you received the email that we sent successfully then get this postman request as code snippet and integrate it into our website to make the html form dynamic on client-side.

18. Go back to postman request page >

• click the “CODE” button that is next to the url area.

• select “javascript-jQuery” then copy the all code snippet.

18 Finally open your js file where you submit your form.

for example you have a submit event for your form like this below.

You just update properties of data object with variables of the form input values.

• “name”: leadName,
• “email”: leadEmail,
• “mobile”: leadMobile,
• “message”: leadMessage

…

// Contact Form Submit JS //document.getElementById(‘submit’).addEventListener(‘click’, event => {
 var leadName = document.getElementById(‘name’).value;
 var leadEmail = document.getElementById(‘email’).value;
 var leadMobile = document.getElementById(‘phone’).value;
 var leadMessage = document.getElementById(‘message’).value;
var settings = {
  "url": "https://us-central1-YourProjectName.cloudfunctions.net/sendMailOverHTTP",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  "data": {
    "name": leadName,
    "email": leadEmail,
    "mobile": leadMobile,
    "message": leadMessage
  }
};
$.ajax(settings).done(function (response) {
  console.log(response);
});
});

That’s it. Now your html form is dynamic and you are able to receive data of the form via email.