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