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.

8 Comments

  1. i encountred this error
    Uncaught TypeError: firebase.database is not a function
    at firebasePush (firebase.js:29)
    at HTMLFUncaught TypeError: firebase.database is not a function
    at firebasePush (firebase.js:29)
    at HTMLFormElement. (firebase.js:41)

    • Alex Reply

      Hi, Abdi! Have you connected your website to firebase as I mentioned in Step One by using “< script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js">< /script >“? You can additionally check that by typing in browser console “console.dir(firebase.database)” if mentioned above script connected properly it should return something like this: https://imgur.com/a/ocqSL2d

  2. Thanks for this guide, is really simple, but i have a concern about security, is it ok to allow writing in database for any client? isn’t that a big security hole? thanks

    • Alex Reply

      Hi, Deni! That is a really good question. IMO for the basic task like this, it does the job and that what I focused on. But if you really care about information security and storing important data there, you should definitely get familiar with the real-time database security rules.

      I’ll dive deeper into this next time I create a landing page like this too. I don’t know if it’s possible to pull all your data from the database with a proper request or spam write a bunch of trash there. Should investigate. But I guess if someone has skills and intentions like that, no rules can stop them 🙂

  3. Jean Michel Reply

    Hello Mr. Alex. It was a pleasure for me to have visited your site, which I find really interesting and very well explain. By account, I have a small problem that I would like to share with you. I deployed my static site on Firebase. My site contains a contact form, but when I do a test by entering data in the form, I see that nothing works, nothing works … I would like to know how to activate this form on my site.
    Waiting for your repose
    Thank you

    • Alex Reply

      Hi, Jean. I believe that you have not changed classes of your form inputs as I mention it in step №2. Quote: “You have to change your form and input classes according to your template. In my template, I have only one input for the email.” You have to match classes of your form, with CSS selectors in JS code. Here is an example: https://imgur.com/a/gmlsNXU. If you still having troubles making it work, do not hesitate to hit me up via twitter (@tech_trench), so I can help you in real-time.

  4. jean michel Reply

    Good evening Monsieur Alex
    I hope you are well and have a good day. I’m happy to read you, I think you’re right, the problem is at the level of the class that I certainly have not defined well … But since I’m not very strong in coding, I would need a little help if you want. My HTML and PHP file available and I would like to know in detail the procedure to follow for better indicated classes. Because I tried again to do a test, but it’s still the same result. Excuse me for mistakes, I’m not very good at English, I translate some words, I hope you will not have any trouble understanding what I mean by this message. Thank you and have the pleasure to read you.

Write A Comment