Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Medium
  • Last Updated : 08 Apr, 2021
Geek Week

Following are some simple steps in order to connect our static Web Page with Firebase. 

Step by Step Implementation:

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>Colleting Data</title>
    <script src=
    </script>
  
    <link rel="stylesheet" href=
        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=
    </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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :