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

Last Updated : 18 Dec, 2023

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 to configure 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.

Example: This example shows the use of Firebase with HTML and CSS.

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>
        let 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);

        let messagesRef = firebase.database()
            .ref('Collected Data');
        
        document.getElementById('contactForm')
            .addEventListener('submit', submitForm);

        function submitForm(e) {
            e.preventDefault();

            // Get values
            let name = getInputVal('name');
            let email = getInputVal('email');

            saveMessage(name, email);
            document.getElementById('contactForm').reset();
        }

        // Function to get form values
        function getInputVal(id) {
            return document.getElementById(id).value;
        }

        // Save message to firebase
        function saveMessage(name, email) {
            let newMessageRef = messagesRef.push();
            newMessageRef.set({
                name: name,
                email: email,
            });
        }
    </script>
</body>

</html>