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.


(Ray Johnson) #4

I wanted to share my experience with selecting a mobile backend for my app. I used to run my applications (I have several in the app store(s)) on Parse and was pretty happy with the backend until Facebook decided to shut down the service. After that I have evaluated all listed options and was not happy with any of them for various reasons. Firebase was not a good fit because the of their approach with JSON document being a database - I did a stress test with million nodes in the tree and the service was not performing well. AWS and Appery are quite complex and become expensive very quickly while Azure and CloudMine are quite limited in the capabilities. Kinvey is both limited and super expensive once you start doing something more serious in the app. In the end I chose Backendless (https://backendless.com) for my backend. The service has native SDKs for all major mobile and web platforms. The usability and developer experience is by far the best I have seen. The service has an extremely flexible server-side code model where I can deploy Java and JS server-side code to override default handling of the API and to create my own API services. My apps leverage social (Facebook, Twitter, Google) login, geolocation, file upload/download, push notifications (iOS, Android) and of course data persistence, which has really awesome support for complex relations. Check it out if you are looking for a flexible and very reasonably priced backend.


(Varun Raj) #5

Hello Ray,

Thanks for bring this up,

Actually if you use indexes and prepare a good data structure firebase is much scalable. Also you can try looking at Firestore which a new NoSQL database in the cloud comes with Firebase project for high scale projects.