mecmartini / gatsby-contact-form-firebase

Example of how to build a Contact Form for GatsbyJS with Firebase Database as backend

Example of how to build a Contact Form for GatsbyJS with Firebase Database as backend

by SoulWeb Solutions

Contact Form, made with GatsbyJS, using a Firebase Realtime Database integration as backend to store data.

🚀 Quick start

1. Start developing

   Navigate into the project directory and start it up:

   gatsby develop

2. Open the source code and start editing

   Your site is now running at http://localhost:8000.

3. Firebase config

   To make it work you must add your Firebase Database credentials and config to src/utils/firebase.js:

     const config = {
       apiKey: "XXXXXXXXXXXXXXXXXXXXXX",
       authDomain: "XXX.firebaseapp.com",
       databaseURL: "https://XXX.firebaseio.com",
       projectId: "XXX",
       storageBucket: "XXX.appspot.com",
       messagingSenderId: "XXXXXXXXXXXX",
       appId: "X:XXXXXXXXXX:XXX:XXXXXXXXXX"
     };

4. Database collection

   You can change the database collection used to store the data on src/components/contactForm.js:

   handleSubmit = event => {
     ...
   
     if (database) {
       database.collection('contact').add({  // change contact with the name of your collection
         ...
       });
     }
   
     ...
   }

5. Try it

   Navigate to http://localhost:8000/contact to see the Contact Form in action.