如何在 Firebase 托管中制作邮件联系表？答案

【问题标题】：How do I make mail contact form in Firebase hosting?如何在 Firebase 托管中制作邮件联系表？
【发布时间】：2018-02-17 13:00:50
【问题描述】：

我正在尝试将我的网站迁移到 Firebase 托管，但我有一个联系表单 PHP 邮件，我也想在 Firebase 中使用它。我可以做吗？怎么做？

谢谢！

【问题讨论】：

添加有问题的代码。
@artgb 我的代码只是 PHP 中的常规 mail() 函数。我想知道如何在 Firebase 托管中做到这一点。它可以具有云功能，但我需要知道如何。谢谢！

标签： javascript php jquery firebase

【解决方案1】：

您可以创建表单，然后将用户数据提交到 Firebase 数据库并从您的管理仪表板查看。

你可以这样做：

//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.');
  }
});

以上代码采用 4 个用户值，生成时间戳并将数据插入 Firebase 数据库，如果您有管理仪表板，则可以使用它来查看它并从那里对其执行进一步的操作。

以下是使用 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);
    }
);

【讨论】：

这是一个很棒的解决方案，但我希望代码只是将表单中输入的信息邮寄给我。
您可以尝试下面发布的关于使用 Firebase 函数发送电子邮件的 Mariano 方法，我从未使用过 Firebase 函数，因此无法发布相关代码，但我会定期使用 Javascript 发送电子邮件。为此，我使用 emailjs.com SDK，他们提供免费版本，您可以通过它每月发送 200 封电子邮件。在 emailjs.com 中，您登录到仪表板，创建模板，这基本上意味着设置标题，您将发送给谁（这也可以通过代码自定义）并且只需几行代码，您就可以在用户单击提交时发送电子邮件按钮。查看更新的答案。

【解决方案2】：

Firebase hosting 只提供静态内容，这意味着您不能在那里使用 PHP 或任何服务器端语言。

另一方面，您仍然可以通过 AJAX 和 Javascript 使用 HTTP trigger 来使用 Firebase functions 到 send an email。

这样，您可以制作功能齐全的联系表单，而无需在您的站点中使用服务器端语言。

【讨论】：

嗯不错！但是我怎么做呢？我对后端编程有点陌生。你有任何演示或sn-ps给我看吗？谢谢！