How do I create a Contact Form using Firebase as backend?


(Karthik Kamalakannan) #1

Is there a easy way to use Firebase as the backend for a website’s contact form? If so, how can I do it, and how easy is it for everyone to implement?

Update:

I was able to create a contact form using Firebase. Here are some quick steps to make this work:

Idea:

The idea here is to have two fields, name & email. Capture these two fields when a person submits a form, and store it in Firebase Database.

Execution:

  1. Create a new Firebase Project

  1. Now, you will be taken to a Project Dashboard. Click on Add Firebase to your web app link.

  1. This will open up a modal which contains the important API keys and the Javascript code which you will have to paste in your app’s code.

  2. Here’s a piece of code you can use to pass data to Firebase from a form:

# HTML Code of your form
<form class="sucess-none" id="newContact">
  <div class="inputs">
      <input type="text" value="" name="FNAME" class="required name" id="name" placeholder="Name:" style=" width: 35%; float: left; background: none; padding: 1.75em 2em; margin: 0; border-radius: .25em; box-shadow: none; border: none;">

      <input type="email" value="" name="EMAIL" class="required email" id="email" placeholder="Email:" style=" width: 65%; float: left; background: none; padding: 1.75em 2em; margin: 0; border-radius: .25em; box-shadow: none; border: none;">
  </div>
  <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_96d9e6e519173af7bdbdab9d_23138bd741" tabindex="-1" value="">
  </div>
  <input type="submit" class="btn" value="Submit" name="subscribe" id="submitContact">
</form>

Javascript

<script type="text/javascript">
$(document).ready(function() {
    if ($('#newContact').length > 0 ) {
        contactScript('forcontact');
    }
});
//firebase
function contactScript(value) {
    var a = { 
      apiKey: "AIzaSyAdqNXW1saxRPpIxBdVArnEOQ1Ow3eLbx8",
	    authDomain: "discourse-skcript.firebaseapp.com",
	    databaseURL: "https://discourse-skcript.firebaseio.com",
	    projectId: "discourse-skcript",
	    storageBucket: "discourse-skcript.appspot.com",
	    messagingSenderId: "592087480717" };
    firebase.initializeApp(a);
    var b = firebase.database().ref("messages");
        $("#newContact").submit(function(a) { $(this), console.log("Submit to Firebase");
        var c = $("#name").val(),
            d = $("#email").val(),
            f = { name: c, email: d};
        return b.push(f).then(function(a) { 
            $(".sucess").css("display", "block"), 
            $(".sucess-none").css("display", "none") }), !1 })   
}
</script>

This should do the trick.


(Varun Raj) #2

Hi Karthik,

It’s pretty simple and yet really helpful,

You can create a html form and handle the submission with JS function with which you can post the captured data to firebase realtime database.

And the future you can do few crazy things like connect the database to cloudfunctions and integration automatic slack messages when you get a contact form submission, or auto reply to them with some greeting messages and lot more things which helps for customer engagement, and lead generation process.


(Karthik Kamalakannan) #3

Thanks @varun. I just edited my original question to include the code I wrote. Hope that’s correct.