Connect Registration Form To Firebase - Part 1

In this tutorial, I am going to show you how to connect your registration form to Firebase. Firebase is a mobile and web development platform that provides programmers with variety of tools that helps them develop quality applications.

For the purpose of this tutorial we will be making use of Firebase Realtime Database to store data in our registration form. Here, data is stored as JSON and synchronized in realtime to every connected client.

Tutorial Outline:

• Create Html template for registration form.

• Add css for design and responsiveness

• Connect form to Javascript

• Connect Firebase Realtime Database to Registration Form

Create Html Template for Registration Form

We will not make use of any html frameworks like Bootstrap, neither are we making use of any form of boiler templates. Our registration form is going to be built from scratch and it is also going to be responsive.

The important things to take note of in the index.html file is that:

• Our form has two sections (Your Basic Info and Profile section)

• We have two script tags below the page. The first script tag is gotten from firebase. I'll show you how we got that script tag later.

• We are making use of Html 5 validation through the "required" attribute.

• The last thing I want us to take note of is the ID'S and the class in our form. This will enable us manipulate the DOM with javascript and Css respectively.

With our html looking really ugly, it's time to add some Cascading Style Sheet:

Add css for Design and Responsiveness

NOTE:

• The border "box-sizing: border-box;" was added globally (*). This is because the box-sizing property allows us to include the padding and border in an element's total width and height.

• The alert class was set to display as none. In our javascript file, we are going to set it to display as block once the registration form has been submitted.

... and with that, we have a much better looking registration form. Its not the best looking form in the world, but with the media query added at the bottom of the style.css file, it is really responsive.

In the second part of this tutorial, we will connect our registration form to javascript and also link it to the Firebase Realtime Database.

To get more free content on web development, subscribe to my newsletter:
here