如何在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

Firebase hosting only serves static content, this means you can't use PHP or any server-side language there.

On the other hand, you can still use Firebase functions to send an email using an HTTP trigger via AJAX with Javascript.

This way, you can make a fully functional contact form without using server-side languages in your site.

Answer 2

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);
    }
);