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.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <title>Registration Form</title> | |
| </head> | |
| <body> | |
| <form action="" method="POST" id="registrationform"> | |
| <h1>Register</h1> | |
| <div class="alert">Message Sent</div> | |
| <fieldset> | |
| <!-- Section 1 --> | |
| <legend><span class="section">1</span>Your Basic Info</legend> | |
| <label class="" for="name">Name:</label> | |
| <input type="text" name="name" value="" id="name" required /> | |
| <label class="" for="email">Email:</label> | |
| <input type="email" name="email" value="" id="email" required /> | |
| <label for="password">password:</label> | |
| <input type="password" name="password" value="" id="password" required /> | |
| </fieldset> | |
| <fieldset> | |
| <!-- section 2 --> | |
| <legend><span class="section">2</span>Profile</legend> | |
| <label class="" for="bio">Bio:</label> | |
| <textarea name="bio" id="bio" required></textarea> | |
| <label for="job">Job Role:</label> | |
| <select name="job" id="job" required> | |
| <optgroup label="Web"> | |
| <option value="front_end_developer" id="frontend">Frontend Developer</option> | |
| <option value="back_end_developer" id="backend">Backend Developer</option> | |
| <option value="fullstack_developer" id="fullstack">Fullstack Developer</option> | |
| </optgroup> | |
| <optgroup label="Mobile"> | |
| <option value="android" id="android">Android</option> | |
| <option value="ionic" id="ionic">Ionic</option> | |
| <option value="phonegap" id="phonegap">PhoneGap</option> | |
| </optgroup> | |
| </select> | |
| <br /><br /> | |
| <label>Interest:</label> | |
| <select id="interest" required> | |
| <option value="development">Development</option> | |
| <option value="design">Design</option> | |
| <option value="business">Business</option> | |
| </select> | |
| <button type="submit" sendMessage()>Register</button> | |
| </form> | |
| <script src="https://www.gstatic.com/firebasejs/5.10.0/firebase.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
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
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', | |
| 'Lucida Sans', Arial, sans-serif; | |
| color: bisque; | |
| background-color: lightcyan; | |
| } | |
| form { | |
| max-width: 400px; | |
| margin: 35px auto; | |
| border-radius: 10px; | |
| padding: 10px 15px; | |
| background: rgb(151, 66, 231); | |
| } | |
| h1 { | |
| margin: 0 0 30px 0; | |
| text-align: center; | |
| margin-top: 5px; | |
| } | |
| .alert { | |
| text-align: center; | |
| padding: 10px; | |
| background: rgb(168, 240, 177); | |
| color: green; | |
| margin-bottom: 10px; | |
| display: none; | |
| } | |
| input[type='text'], | |
| input[type='email'], | |
| input[type='password'], | |
| textarea, | |
| select { | |
| background: lightsteelblue; | |
| border: 1px; | |
| margin-bottom: 25px; | |
| box-shadow: 2px; | |
| color: beige; | |
| background-color: rgb(142, 143, 223); | |
| width: 100%; | |
| padding: 15px; | |
| margin: 0; | |
| height: auto; | |
| font-size: 15px; | |
| } | |
| select { | |
| padding: 6px; | |
| height: 32px; | |
| border-radius: 2px; | |
| } | |
| fieldset { | |
| margin-bottom: 30px; | |
| border: none; | |
| } | |
| legend { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| label.light { | |
| font-weight: 300; | |
| display: inline; | |
| } | |
| .section { | |
| background-color: rgb(68, 114, 221); | |
| color: white; | |
| height: 29px; | |
| display: inline-block; | |
| width: 29px; | |
| border-radius: 100%; | |
| text-align: center; | |
| line-height: 30px; | |
| margin-right: 4px; | |
| font-size: 0.7em; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| button { | |
| padding: 25px 40px; | |
| color: whitesmoke; | |
| background-color: rgb(36, 159, 235); | |
| font-size: 15px; | |
| margin: 30px 0px 0px; | |
| width: 100%; | |
| text-align: center; | |
| border-radius: 5px; | |
| } | |
| @media screen and (min-width: 480px) { | |
| form { | |
| max-width: 480px; | |
| } | |
| } |
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
Top comments (3)
I always dreamed of creating such forms. Thank you for sharing your know
Knowledge.
You're welcome rushan.
Can you please show example to store complex form data into firebase.i want to store multiple attributes but only the first attributes get stored.please make an demo