Create a website using HTML CSS and JavaScript that stores data in Firebase

02 Nov, 2021
Following are some simple steps in order to connect our static Web Page with Firebase. 
Step 1: Firstly, We are going to create a project on Firebase to connect our static web page. Visit the Firebase page for configuring your project. Visit the website and click the On Add Project button as shown below.
Step 2: Give a Name to your project and click on the Continue button.
Step 3: Now click on the Continue button.
Step 4: Now choose Default Account For Firebase and click on the Create Project button.
Step 5: Now your project is created and you are now good to go.
Step 6: Now click on the 3rd icon that’s the Web button(</>).
Step 7: Give a nickname to your web project and click on the Register App button.
Step 8: Now you will see the configuration of your App like this. Copy this code somewhere as we will use it later.
Step 9: Click on the Realtime Database as shown below.
Step 10: Now click on the Create Database button.
Step 11: Now click on the Test Mode and then click on the Enable button.
Step 12: Activate Firebase Storage. Click on Storage button in the left and the click on Get Started.
After that this box will pop up . Click on Next.
 
Then Click on Done.
 
Project Setup:
Now Create an HTML file and copy the script code which you copied in Step 8. The following file is just a sample for you to understand how to configure your project.
 
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <title>Collecting Data</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"        crossorigin="anonymous"></head> <body class="container" style="margin-top: 50px;    width: 50%; height:auto;">         <h2 class="text-primary" style=        "margin-left: 15px; margin-bottom: 10px">        Hey There,Help Us In Collecting Data    </h2>         <form class="container" id="contactForm">        <div class="card">            <div class="card-body">                <div class="form-group">                    <label for="exampleFormControlInput1">                        Enter Your Name                    </label>                                         <input type="text" class="form-control"                    id="name" placeholder="Enter your name">                </div>                 <div class="form-group">                    <label for="exampleFormControlInput1">                        Email address                    </label>                                         <input type="email" class="form-control"                    id="email" placeholder="name@example.com">                </div>            </div>            <button type="submit" class="btn btn-primary"                style="margin-left: 15px; margin-top: 10px">                Submit            </button>        </div>    </form>     <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js">    </script>         <script>        var firebaseConfig = {            apiKey: "Use Your Api Key Here",            authDomain: "Use Your authDomain Here",            databaseURL: "Use Your databaseURL Here",            projectId: "Use Your projectId Here",            storageBucket: "Use Your storageBucket Here",            messagingSenderId: "Use Your messagingSenderId Here",            appId: "Use Your appId Here"        };         firebase.initializeApp(firebaseConfig);         var messagesRef = firebase.database()            .ref('Collected Data');                 document.getElementById('contactForm')            .addEventListener('submit', submitForm);         function submitForm(e) {            e.preventDefault();             // Get values            var name = getInputVal('name');            var email = getInputVal('email');             saveMessage(name, email);            document.getElementById('contactForm').reset();        }         // Function to get get form values        function getInputVal(id) {            return document.getElementById(id).value;        }         // Save message to firebase        function saveMessage(name, email) {            var newMessageRef = messagesRef.push();            newMessageRef.set({                name: name,                email: email,            });        }    </script></body> </html>
Output:
Entering some sample values of Name and Email address in the given form as shown below.
After clicking the Submit button, the data is getting stored in the real-time database as shown below.
annianni
varshagumber28
Firebase
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
Design a Tribute Page using HTML & CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS