How do I make a Firebase Form?

Question

I am using Firebase for a website page. How would I create a form with Firebase? And the data be stored in a database? There doesn't seem to be any good tutorials out there. I am new to Firebase.

Answer 1

Firebase database is more like a storage for your data objects. So all you need is build a JavaScript object from the form values and send to Firebase on submit.

Check this CodePen. Focus on the New Activity section. You will see how you can build objects from your form values and send to Firebase.

For instance, you have a form in your html:

<form id='myForm'>
  <input id='title' type='text' />
  <input id='description' type='text' />
  <input type='submit' />
</form>

And in your JavaScript file you can do this:

// Listen to the form submit event
$('#myForm').submit(function(evt) {

  // Target the form elements by their ids
  // And build the form object like this using jQuery: 
  var formData = {
    "title": $('#title').val(),
    "description": $('#description).val(),
  }

  evt.preventDefault(); //Prevent the default form submit action
  
  // You have formData here and can do this:
  firebase.initializeApp(config); //Initialize your firebase here passing your firebase account config object
  firebase.database().ref('/formDataTree').push( formData ); // Adds the new form data to the list under formDataTree node
})

Hope this helps