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.
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
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:
- 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:
- 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:
- Set up the Real-time Database to be able to accept your leads
- Push data from your website to your Real-time Database
- 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.
Now you are connected to Firebase Real-time Database.
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.
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.
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
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.
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:
That means your data is successfully stored in your database!
Firepage Method Post Series
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!