如何在Firebase托管中创建邮件联系表单？

Question

I'm trying to migrate my website to Firebase hosting, but I have a contact form PHP mail that I want to use in Firebase too. Can I do It? And How?

Thanks!

Answer 1

You can create form and then submit the user data to Firebase Database and view it from your Admin Dashboard.

You can do something like this:

//Handling Contact Form
document.getElementById('submit').addEventListener('click', event => {
  const leadName = document.getElementById('client_name').value;
  const leadEmail = document.getElementById('client_email').value;
  const leadMobile = document.getElementById('client_mobile').value;
  const leadMessage = document.getElementById('client_message').value;

if(leadMobile != "" && leadEmail != "" && leadName != "") {

  const leadTimestamp = Math.floor(Date.now() / 1000);

  firebase.database().ref('leads').once('value', snapshot => {
    var totalLeads = snapshot.numChildren();
    totalLeads++;

    firebase.database().ref('leads').child(totalLeads).set({
      name: leadName,
      mobile: leadMobile,
      email: leadEmail,
      message: leadMessage,
      timestamp: leadTimestamp
    });
    $('.contact-form').hide();
    $('.message-sent-success').show();

  }, function(error) {
    console.log(error);
  });
} else {
  alert('Please fill all the fields.');
  }
});

The above code takes 4 user values, generates timestamp and inserts the data in Firebase Database and if you have an admin dashboard, you can use it to view it and perform further actions on it from there.

Here's how you can send email using emailjs.com

emailjs.send("gmail", "<template_name>", { //template_name is set via emailjs.com dashboard
      content: email_description // you can store user data in any such variable
}).then(
    function(response) {
      document.write("Email sent successfully!");
    },
    function(error) {
      document.write("Failed to send email.");
      console.log(error);
    }
);