Tuesday 30 May 2017

Storing Contacts in Firebase Database for Backend Systems

I want to use Firebase Database to store contact form submissions from a single page website. That data will integrate with backend technologies that may eventually require authentication but this form is a simple contact request.

I'm running a gulp/webpack setup with the module below to submit the form data. Once I store the data I plan to use the sample Firebase Function with Nodemailer to send the contact's details by email to a gmail account.

So far I have been unable to intake the form though! Am I doing something wrong? I've successfully done this before with React so I'm a little confused how my Babel/ES6 setup isn't working. (FYI I call this function in the main JS file)

Any help is appreciated! Take a look below:

import * as firebase from 'firebase';

// Initialize Firebase
try {
   var config = {
    apiKey: "<HIDDEN FOR SECURITY>",
    authDomain: "<HIDDEN FOR SECURITY>",
    databaseURL: "<HIDDEN FOR SECURITY>",
    projectId: "<HIDDEN FOR SECURITY>",
    storageBucket: "<HIDDEN FOR SECURITY>",
    messagingSenderId: "<HIDDEN FOR SECURITY>"
  };
  firebase.initializeApp(config);
} catch (e) {

}

function ContactForm() {
// Shortcuts to DOM Elements.
this.contactForm = document.getElementById('contact-form');
this.contactName = document.getElementById('contact-name');
this.contactEmail = document.getElementById('contact-email');
this.contactPhone = document.getElementById('contact-phone');
this.contactZipcode = document.getElementById('contact-zipcode');
this.contactMessage = document.getElementById('contact-message');
this.contactSubmit = document.getElementById('contact-submit');
}

/**
 * Saves a new contact to the Firebase DB.
 */

ContactForm.prototype.ContactSubmit = function(name, email, phone, zipcode, 
message) {
  var firebaseRef = firebase.database().ref('contacts');
  firebaseRef.child("contact").set({
    name,
    email,
    phone,
    zipcode,
    message
  }).then(() => {
    console.log('stored to firebase');
  }, (e) => {
    console.log('failed to store to firebase');
  });

  var contactRef = firebaseRef.child().push(contact);
  return contactRef;
}

  // Saves message on form submit.
ContactForm.prototype.onsubmit = function(e) {
  e.preventDefault();
    var name = contactName.value;
    var email = contactEmail.value;
    var phone = contactPhone.value;
    var zipcode = contactZipcode.value;
    var message = contactMessage.value;
    if (name && email && phone && zipcode && message) {
      return ContactSubmit(name, email, phone, zipcode, 
message).then(function() {
        contactSubmit.click();
      });
      contactName.value = '';
      contactEmail.value = '';
      contactPhone.value = '';
      contactZipcode.value = '';
      contactMessage.value = '';
    }
  };

 export default ContactForm;



via Joe Grotto

No comments:

Post a Comment