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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.