How to Create Simple Firebase Contact Form

If you’d like set up a Firebase contact form and store leads in your Firebase Real-time Database, you’re in the right place.

firebase contact form intro

Sit tight, because the utility power of this technique is going to blow you away… and what’s more, the regular programmer’s approach and prices will look like a scam.

Hope you learned how to host a landing page on your domain from a previous post

But…

You can’t call your web page a Firepage Landing if it doesn’t accept leads and, more importantly, doesn’t notify you about them.

What is the gain?

Compare to the usual approach of developers where you often need to:

  • Learn Java and JavaScript to a decent level.
  • Spend $15 and 3 hours to rent and set up the server.
  • Create an XHR Request and Submit a Form.

We are going to use The Firepage Method, which requires:

  • Basic understanding of JavaScript or copy-pasting skills and knowledge of Google.
  • 10 minutes of your time to read this step by step guide and 30 minutes to execute it.

So, the Firepage Method requires less time, skills, and could be implemented even by a school kid. Plus, there are 0 alternatives unless you only want to collect emails and are ready to use a third-party service like MailChimp.

So let’s get a closer look.

3 Steps for Getting your Leads Stored in Your Real-time Database

We’re going to use a Firebase method from the previous article, so I won’t go into details on how to start your project. But I want to summarize what we did:

  • Initialized Firebase project
  • Hosted Html5 template on Firebase
  • Assigned domain to your Firebase project

You’ve got a fully working website, but the subscription form is not working and clients can’t communicate with you and send requests. Let’s try to fix it using a 3 step plan:

  1. Set up the Real-time Database to be able to accept your leads
  2. Push data from your website to your Real-time Database
  3. Test 🙂

Step #1: Setting Up Your Real-time Database

Connect the Real-time Database to your project by simply adding one line of code before the closing </body> tag.

<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>

Now you are connected to Firebase Real-time Database.
firebase start confings

Next, you need to configure the Real-time Database. I prefer to stay in a test mode — I guess nobody in the world will write in my database.

firebase settings

Then switch to Real-time Database at the top, click Rules, change them to true, true and publish your changes.

Now go to your project settings and copy your Config: we’ll need it further for pushing data to the database.

firebase real-time database configuration

Once everything is prepared on Firebase and it can accept data, it’s time to actually start pushing your data.

Step #2: Learn to Push Your Data From a Landing Page

Create a new Javascript file and connect it to your page.

All you need now is to change these configs to yours. I explained where to gеt that data earlier. For those of you who do know JavaScript, I prepared instructions on how it works as code comments.

firebase contact form code
https://codepen.io/ida4ne/pen/oJLNeM

Here you can take a look at the code example and copy it.

The trick: You have to change your form and input classes according to your template. In my template, I have only one input for the email.

Leave a comment if you need instructions from me on where to find it.

You might want to switch the confirmation alert to something nice; maybe create a popup or just a nice confirmation message. You need to know a little bit of JS 🙁 for that, or I can make an addition to this article and create a basic popup.

Once everything is changed, go ahead and run deploy command – Firebase deploy. Remember how we did it in the first article?

Everything should be up and running. It’s time to test your database!

Step #3: Test your Real-time Database

Go to your website and try entering some data to your form.

testing firebase contact form

Confirmation alert popping up? Sweet …

If you did everything according to the instructions, once you log back in to your Firebase real-time database you’re going to see the data you entered:

firebase real-time database in action

That means your data is successfully stored in your database!

Firepage Method Post Series

Congratulations!

You’ve just completed Part #2 of the Firepage Landing Guide and now you have a ready Firepage Landing where customers can send requests to you. But we still need to forward requests to your email, as, obviously, you’re not gonna check the database manually every day.

Jump to the third part to learn how to forward your leads, and please leave a comment below about your progress. Thanks!

The Firepage Landing:
Part #1: Pick a Landing Page Template and Host It on Firebase (Firebase Hosting)
Part #3: Send Leads from DataBase to Your Email (Firebase Functions)

Want more content like this? Sign up for my newsletter – it’s free!

Author

I have a degree in marketing communication and work as a marketer in a software development company. Usually, I watch a marketing course or webinar a day, but sometimes I shift to programming, finances or lifestyle books.

Write A Comment