How to Send Emails from Contact Form Using Firebase Functions
This post comes as the cherry on top of the firepage post series.
Here I’m going to show you how to send emails to your email address from a contact form and use Firebase Functions to stay notified about new leads.
All of that is a waste of time if you can’t forward your leads from a website to your email, and get NOTIFIED about it. Before the article you’re reading now, there were ZERO guides explaining how to do so.
Obviously, you don’t want to log into your real-time database every day and check it manually, even if some services still make you do that. (Come on Facebook Lead Forms, it’s 2019 already!)
First let’s set everything up.
Learn What You Need to Know Before We Begin
This article is a continuation of a series of posts where we’re creating a landing page from scratch using Google Firebase – The Firepage Landing. Let’s quickly recap what we did before starting with your lead forwarding:
- We picked a free/paid ready-made HTML5 template
- Hosted it on Firebase Hosting
- Bought and attached a domain to it
- Created a real-time database
- Made a working contact form and started storing leads in the database
Now every time a user enters an email into the email box on a website and hits the submit button, his email is getting stored in the Firebase Real-time Database. Let’s forward that data to your email.
3 Steps to Send Emails from the Contact Form on Firebase
The strategy here’s very simple. Every time your Real-time Database gets modified, you want to grab those changes and send them over to your email.
So we define 3 steps here:
- Initialize Firebase functions
- Install a mail forwarding application
- Configure firebase functions
Every time you get a lead, that lead gets forwarded to your email.
Luckily for us, all events are already a part of Firebase functions. For sending emails, we’re going to install an external Node.JS application.
But don’t run away, this is MUCH simpler than it sounds.
Step #1: Initialize Firebase Functions
Go to console/terminal, move to your project folder and type “firebase init”.
Then do everything it tells you to. There is no wrong answer and Google gives you clear instructions.
Once you get it done, the function folder is going to appear in a project folder.
Step #2: Installing the Nodemailer Application for Sending Emails
As you see, there are 2 files: package.json and index.js
Package.json is responsible for applications running on your firebase functions server. We just need to add 3 lines of code to install the mail forwarding app – Nodemailer.
Go to your console, move to /your-project/function and install the new Nodemailer app.
Return back to your project folder. Not that hard, huh? Now our Firepage can send Emails!
Step #3: Learn How to Configure Firebase Functions
Here I have prepared a good chunk of code with an explanation of how it works. This is also available on Codepen
Just copy paste that from the Codepen.
You may notice that I use “functions.config().gmail.login” to get the login and password: you can use just a plain text instead.
const gmailEmail = “email@example.com” - this is going to work as well.
However, it’s not secure if you ever plan to share your code on Github, for example.
I recommend that you use the Firebase functions environment object to store your secure information, such as passwords, logins, emails, etc. Here is how to access it:
firebase functions:config:set firstname.lastname@example.org gmail.pass=yourpass
functions.config() to access that object*.
Go ahead and try it, copy and paste that code and change the example data to yours.
Tip: There are ways to use not only Gmail but you would have to more deeply configure your transporter functions.
Once everything is configured and the recipient email is correct, deploy your project.
Step #4: Test Your Contact Form to Make Sure Everything Works Correctly
Go to your webpage and enter some data into your fields. Click the submit button. 😉
If you did everything correctly and in the right order, you should get an email notification.
You’re probably also going to want to make sure everything works as expected. Check out the project logs in your Firebase console. Besides, this is also the simplest way to debug your contact form using Firebase Functions.
Firepage Landing Post Series
Congratulations! You have successfully created your first Firepage Landing.
Now you can install Google analytics and search the console, assign custom conversion, create nice looking popups, and much more. In less than 3 hours you made it from zero to hero and created a fully working landing page.
Now leave a comment below and tell me more about your journey!