Simple PHP Contact Form with Firebase Hosting

Simple PHP contact form with Firebase hosting

From the Firebase Hosting site (emphasis mine):

We deliver all of your static content (html, js, images, etc.) over a secure SSL connection and serve it on a CDN.

Firebase Hosting is for hosting static assets. Firebase currently doesn't offer any way to execute your code on Firebase's servers.

Update (2018-08-08): You can now run Node.js/JavaScript code but connecting your Firebase Hosting project to Cloud Functions + Firebase Hosting. But that still won't allow you to run PHP code.

How do I make mail contact form in Firebase hosting?

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

HTML form submission to firebase function

OK so few things I found out:

1. is that CORS is needed to send an application/JSON content type (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

2. I was setting the headers wrong should have been

    const options = {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(params),
   

   }

3. With CORS on the cloud firebase functions a barebone implementation looks like:

    export const sendEmail = functions.https.onRequest(async (request, response) => {
    corsHandler(request, response, () => {
        try {
            let formBody: formBody = request.body
            console.log(formBody.hcaptchaResponse)
        }
        catch (err) {
            functions.logger.error(err)
        }
    });
   

4. my body in the fetch request needed to be stringified to match the content-type

   body: JSON.stringify(params)

Can we use dynamic link without a firebase hosted webpage?

Firebase Dynamic Links don't have to be on the same domain as your website. It's common practice to host them on a different domain, or on a subdomain. The actual web forwarding address of the Dynamic link is specifying by the link parameter [1], and doesn't have to be the same as the domain of the Dynamic link.

Firebase provides a free <subdomain>.page.link domain for your usage [2]. You can also setup dynamic links with a custom domain at <subdomain>.yourdomain.com or <subdomain>.yourdomain.com/path[3], which uses Firebase Hosting.

If you would like to switch your entire website over to Firebase Hosting to take advantage of our other features (like the CDN), you can setup your PHP site to run on Cloud Run [4], and setup a rewrite to it using Hosting [5].

Is PHPmailer from github only used for your local host?

Firebase hosting does not support PHP which is why the file is being downloaded.

You'd need to write this in Javascript to use with Firebase - https://firebase.google.com/docs/hosting/functions

---

Related Topics