title: Uncaught ReferenceError: initializeApp is not defined
body: <p>I'm trying to connect a contact us form on my web app to firebase and I get this error. </p>
  
  <p>These are my JS scripts in the head tag; </p>
  
  <pre><code>&lt;!--&lt;script src="presentation.js"&gt;&lt;/script&gt;--&gt;
  &lt;!--&lt;script src="home1.js"&gt;&lt;/script&gt;--&gt;
  &lt;script type="module" src="contact.js"&gt;&lt;/script&gt;
  
  &lt;!-- The core Firebase JS SDK is always required and must be listed first --&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"&gt;&lt;/script&gt;
  
  &lt;!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"&gt;&lt;/script&gt;
  
  &lt;!-- Add Firebase products that you want to use --&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initializeApp()"&gt;
  </code></pre>
  
  <p>And this is the contact.js file: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//import 'firebase';
  //import firebase from 'firebase';
  //import 'firebase/firestore';
  // Initialize Firebase
  function initializeApp() {
  
  var firebaseConfig ={
      apiKey: "AIzaSyBlKtHSHez53z6LqZ4GyljzBk5Dq6G95oM",
      authDomain: "white-web-cac.firebaseapp.com",
      databaseURL: "https://white-web-cac.firebaseio.com",
      projectId: "white-web-cac",
      storageBucket: "white-web-cac.appspot.com",
      messagingSenderId: "16825950723472",
      appId: "1:168259507672:web:f352b0c66828d746b06d7904ead",
      measurementId: "G-KXTSR34654V"
  };
  // Initialize Firebase
  
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  
  
  // Reference messages collection
  var messagesRef = firebase.database().ref('messages');
  
  // Listen for form submit
  document.getElementById('ContactFormData');
  document.addEventListener('submit', submitForm);
  const db = firebase.collection("ContactFormData");
  
  // Submit form
  function submitForm(e){
      e.preventDefault();
  
      //Get value
      let name = getInputVal('name');
      let company = getInputVal('company');
      let email = getInputVal('email');
      let phone = getInputVal('phone')
      let message = getInputVal('message');
  
      // Save message
      saveMessage(name, company, email, phone, message);
  
  
      // Show alert
      document.querySelector('.alert').style.display = 'block';
  
      // Hide alert after 3 seconds
      setTimeout(function(){
          document.querySelector('.alert').style.display = 'none';
      },3000);
  
      // Clear form
      document.getElementById('contactForm').reset();
  }
  
  // Function to get form value
  function getInputVal(id){
      return document.getElementById(id).value;
  }
  
  
  // Save message to firebase
  function saveMessage(name, company, email, phone, message){
      var newMessageRef = messagesRef.push();
      newMessageRef.set({
          name: name,
          company: company,
          email: email,
          phone: phone,
          message: message
      });
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I inspect my code, I get this error: "Uncaught ReferenceError: initializeApp is not defined"<br>
  Please help me with what I might be doing wrong.</p>
  
  <p>EDIT: I am uploading my html code for the form here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contact-c" id="Contact"&gt;
      &lt;!--&lt;h1 class="title"&gt;Contact Us&lt;/h1&gt;--&gt;
      &lt;h2 class="title"&gt;&lt;b&gt;We'd love to hear from you!&lt;/b&gt;&lt;/h2&gt;
      &lt;div class="wrapper animated bounceInLeft"&gt;
          &lt;div class="contact"&gt;
              &lt;h3 class="contact-us" style="text-align: center"&gt;&lt;b&gt;Contact Us&lt;/b&gt;&lt;/h3&gt;
              &lt;div class="alert"&gt;Your message has been sent!&lt;/div&gt;
               &lt;form id="contactForm" method="post"&gt;
                  &lt;p class="name-field"&gt;
                      &lt;label&gt;Name &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;input type="text" name="name" id="name" required&gt;
                  &lt;/p&gt;
                  &lt;p class="company-field"&gt;
                      &lt;label&gt;Company&lt;/label&gt;
                      &lt;input type="text" name="company" id="company"&gt;
                  &lt;/p&gt;
                  &lt;p class="email-field"&gt;
                      &lt;label&gt;Email &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;input name="email" required type="email"&gt;
                  &lt;/p&gt;
                  &lt;p class="phone-field"&gt;
                      &lt;label&gt;Phone&lt;/label&gt;
                      &lt;input type="text" name="phone" id="phone"&gt;
                  &lt;/p&gt;
                  &lt;p class="message-field full"&gt;
                      &lt;label&gt;Message &lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;textarea name="message" rows="5" id="message" required&gt;&lt;/textarea&gt;
                  &lt;/p&gt;
                  &lt;p class="required-field"&gt;Required field &lt;span&gt;*&lt;/span&gt;&lt;/p&gt;
                  &lt;p class="submit-button"&gt;
                      &lt;button type="submit"&gt;Submit&lt;/button&gt;
                  &lt;/p&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>