fire-form

Create simple form in 5 minutes⏱ (Medium article)

Currently available

• Contact form
• (Up comming) Pre register form
• (Up comming) Feedback form

Install

npm i @kazuwombat/fire-form

or

yarn add @kazuwombat/fire-form

How to use

Prerequisites (Setup Firebase Real Time Database)

1. Setup FirebaseProject for Web. Detail here
2. When you setup Firebase project, you can get Firebase Config like below. Copy it for when you implement the form.

3. Create Firebase Real Time Database. Detail here
4. Update database rule with below.

{
  "rules": {
    ".read": false,
    ".write": true
  }
}

Use in your project

1. Create firebaseConfig.ts file with config which you copied while Firebase project setup.

export default {
  apiKey: "xxxxxxx",
  authDomain:  "xxxxxxx",
  databaseURL:  "xxxxxxx",
  projectId:  "xxxxxxx",
  storageBucket:  "xxxxxxx",
  messagingSenderId:  "xxxxxxx",
  appId:  "xxxxxxx",
  measurementId:  "xxxxxxx"
};

2. Then make contact form with the config. You need to handle success(for example show thank you modal) and error callbacks.

import React from "react"
import { ContactForm } from '@kazuwombat/fire-form'
import config from '../firebaseConfig'

const ContactPage = () => {
  return (
    <ContactForm
      config={config}
      successCallback={() => { alert("success :)") /* TODO Handle Success */ 
}}
      errorCallback={(error) => {alert(error) /* TODO Handle Error */ 
}}
    />
  )
}
export default ContactPage

Yay 🎊 you’ve completed to create contact form 👍

Let’s test submitting form.

Then check firebase have saved the data successfully.

Customization

ContactForm accept setting object below.

export interface ContactFormSetting {
    containerStyle?: CSS.Properties;
    formStyle?: CSS.Properties;
    textStyle?: CSS.Properties;
    textAreaStyle?: CSS.Properties;
    buttonStyle?: CSS.Properties;
    indicatorStyle?: CSS.Properties;
    namePlaceHolder?: string;
    companyNamePlaceHolder?: string;
    emailPlaceHolder?: string;
    contentPlaceHolder?: string;
    submitButtonLabel?: string;
}

You can customize form visual pass config object to Contactform.

<ContactForm
  config={config}
  setting={{
    formStyle: {
      backgroundColor: "green"
    }
  }}
  successCallback={() => {
    alert("success :)") /* TODO Handle Success */
  }}
  errorCallback={(error) => {
    alert(error) /* TODO Handle Error */
  }}
/>

Notification

See another repo, fire-form-functions