Connect contact form to firebase-database using javascript i need someone to tell me exactly what to do step by step

I have this code below in javascript I want to make the contact form stored in firebase.

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js'

const firebaseConfig = {
  apiKey: '',

  authDomain: '',

  databaseURL: '',

  projectId: '',

  storageBucket: '',

  messagingSenderId: '',

  appId: '',
}

// Initialize Firebase

const app = initializeApp(firebaseConfig)

//reference messages collection
const messageRef = firebase.databaseURL().ref('messages')

//Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm)

function submitForm(e) {
  e.preventDefault()
  // Get Values
  const name = getInputVal('yourName')
  const gender = getInputVal('gender')
  const message = getInputVal('input-area2')

  saveMessage(name, gender, message)
}
// function to get form values
function getInputVal(id) {
  return document.getElementById(id).value
}

// save the message to firebase

function saveMessage(name, gender, message) {
  const newMessageRef = messageRef.push()
  newMessageRef.set({
    name: name,
    gender: gender,
    message: message,
  })
}

and here is the HTML.


get in touch

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum! Quisquam!

SEND MESSAGE
<script src="index-script2.js" type="module"></script>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
  crossorigin="anonymous"
></script>

as you can see the form is one section on my website the javascript code above goes under index-script2 the error given to me is that firebase is not defined. any help what can I do to fix it and make it work.i need someone to tell me exactly what to do step by step.