Connecting a HTML Form to a Firebase Database – Blancer.com Tutorials and projects

There is a similar question to this but it’s from almost a decade ago.

I’ve got a HTML Form which gets filled out and console.log printed out. I’ve got my firebase database. I’m just having so many issues trying to get them to connect. I know the firebase database is set up correct as I’ve been able to connect and send hard coded data to it via a python script

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
  <script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.7/firebase-firestore.js"></script>
</head>
<body>
  <h1>Form</h1>
  <form id="contactForm">
    <label for="first">First Name:</label><br>
    <input type="text" id="first" name="first"><br>

    <label for="last">Last Name:</label><br>
    <input type="text" id="last" name="last"><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br>

    <label for="phone">Phone:</label><br>
    <input type="tel" id="phone" name="phone"><br><br>

    <button type="submit">Submit</button>
  </form>
  <script src="app.js"></script>
</body>
</html>

I’ve tried many different ways to connect this via JS but I just cant seem to work it out

var firebaseConfig = {
apiKey: "APIKEY",
authDomain: "AUTHDOMAIN",
databaseURL: "DATABASEURL",
projectId: "PROJECTID",
storageBucket: "STORAGEBUCKET",
messagingSenderId: "MESSAGINGSENDERID",
appId: "APPID"

};

firebase.initializeApp(firebaseConfig);

var db = firebase.database();

document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    print("Test")
    var first = document.getElementById('first').value;
    var last = document.getElementById('last').value;
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;
    print("Test2")
    db.ref('users').push({
        first : first,
        last : last,
        email : email,
        phone : phone,
    })
    print("Test3")
    .then(() => {
        print("Test4")
        console.log("Data submitted successfully.");
        document.getElementById('contactForm').reset();
    })
    .catch((error) => {
        console.error("Error submitting data: ", error);
    });
});

from flask import Flask, request

app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit_form():
    data = request.form

    print(data)
    return 'Form submitted successfully'

if __name__ == '__main__':
    app.run(debug=True)

I’m completely lost at this point and have absolute no clue. When I try to import

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

This seems to break for whatever reason console.log but if I don’t firebase is undefined.

I need help. Please