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.
There are a bunch of guides on the web explaining how to host on firebase or make your contact form work and store leads into the database.
BUT
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
The whole method takes 10-20 minutes, and it requires basic knowledge of JavaScript and copy skills. When you’re done, you’ll get leads forwarded to your email from Firebase. I highly doubt that there is a simpler way.
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 = “example@gmail.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 gmail.login=yourlogin@gamail.com gmail.pass=yourpass
functions.config() to access that object*.
*Firebase functions:config:get — to see any data you stored
**Firebase functions:config:unset gmail — to delete
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!
The Firepage Landing:
Part #1: Pick a Landing Page Template and Host It on Firebase (Firebase Hosting)
Part #2: Set up a Database to Store your Leads (Real-Time Database)
17 Comments
I get a javascript error, ‘require’ is not defined. Did I miss something?
Hi, Michael! That means that you probably have not installed nodeJS or some packages. Hit me up on Twitter with a screenshot and I’ll help you fix it.
I figured it out, I was writing the function script to the wrong index,js file. If I recall it had been a long day 🙁
Now, however, I’m having trouble getting any error/success message returned from sendMail. How do I send a message from the functions script back to my web page?
Are you looking for Success/Error Message in Firebase Console?
The first thing you should look for: Is data successfully storing in your real-time database? If it is, look for a database trigger: “exports.onDataAdded”. Make sure it’s firing correctly by adding a console.log… and check status in function logs. If it’s not firing, probably you have to change a path or smth …
You don’t really need to send messages from functions to your webpage. I prefer to count successful push to the real-time database as a success. BUT if you really want to send messages from functions to your frontend you probably need to store it in the database first and then request it using JS on the frontend. Although, I’m not a Node.js expert just yet. 😉
Getting an error when trying to deploy. Says it can’t find nodemailer, even though I have it installed in the /functions/node_modules folder. It’s also listed in the functions/package.json under devDependencies like you have in the post.
The full error is here: https://imgur.com/a/obd0qYN
Hi, Ethan! Is it listed under regular dependencies? Here is my package.json from firebase functions folder https://imgur.com/a/9JU1DUB. Nodemailer should be listed just under ‘regular dependencies’ in order to work. Dev dependencies are not necessary. If you still have a problem, hit me up via twitter @tech_trench. I’ll help you in real time!
I feel dumb, it wasn’t. Deployed successfully. Thanks for the quick reply.
Now I’m getting an error in the firebase functions logs, it says Error: Invalid login: Application-specific password required. Learn more at https://support.google.com/mail/?p=InvalidSecondFactor.
From what I read it is because I have a 2-step authentication enabled on my google account. How can I make this work with this website?
For my latest project, I just created a new Gmail account. Don’t forget to enable Less Secure Apps that might be a thing too, and check your email box as well. Sometimes Google sends you an email like “An external app is trying to use your account … Approve or Decline”.
Set up a new email and got it working! Thank’s for all your help Alex.
This is so helpful. Thank you so much 🙂
You are welcome 🙂
i want complete code of this project .
will you please provide it to me?
Sure thing Ram, send me a dm via twitter @tech_trench and I’ll send you the link.
Hi Alex,
I’m reaching out to you regarding your tutorial How to Send Emails from Contact Form Using Firebase Functions. I was also writing a comment with my question, but can’t find it anymore?!
Anyway, I have a problem with making Contact form working correctly. I followed your guide, and everything seems to work fine except the most important thing. The emails that come from Firebase function have the “!undefined” in the subject line. No data is inside the emails. May you please help me to find out what is getting wrong here? And here is the log from Functions in Firebase.
10:27:51.649 AM
onDataAdded
Function execution started
10:27:51.908 AM
onDataAdded
Function returned undefined, expected Promise or value.
10:27:51.914 AM
onDataAdded
Function execution took 266 ms, finished with status: ‘ok.’
10:28:01.007 AM
onDataAdded
Message sent:
Otherwise great tutorials! Thank you.
Cheers,
Henrik
Sure thing, Henrick. Thank you for reaching out. If you are getting undefined, that happens from one of the two reasons:
a) There is a disconnect between variables you stored and you are trying to pull. For example – https://imgur.com/a/hz1oxmK here we are trying to pull “mail” variable from the record we just created. (blue) And here we are storing that information. – https://imgur.com/a/GC2n97t (prev article explains). So if you stored for example “email” and you are trying to pull “mail” you are gonna get undefined.
b) You have not stored data at all, maybe there is a mistake at previous steps and you are not creating records in the database. In that case, you have to make sure you do.
is there any video explanation bro , ?
I’m beginner
Sry bro. There is none.