Contact form in material UI and firestore

store data in firestore via the form in react and Material UI

save the contact form details in firestore

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.\
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

step 1.

Let's create new react app and install the firebase and material UI in the project

npx create-react-app projectName

npm install -s firebase

npm install -s @material-ui/core

npm install -s @material-ui/styles

step 2.

create a firebase.js file for all the firebase config

it looks like this:

import firebase from 'firebase/app'
import firestore from 'firebase/firebase-firestore'

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

firebase.initializeApp(firebaseConfig);

export const db = firebase.firstore()

note: firebase config can be found under the project setting in firebase

step 3.

create a form to collect data from user and update in firestore

<div class={classes.root}>
        <Typography variant='h3'>contact us</Typography>
        <br />
        <br />
        <br />
        <form noValidate=''>
          <Grid
            container
            direction='column'
            justify='center'
            alignItems='center'
          >
            <Grid container item>
              <TextField
                require={true}
                id='name'
                label='Name'
                variant='outlined'
                autoComplete='new-name'
                fullWidth
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </Grid>
            <br />
            <br />
            <Grid container item>
              <TextField
                required
                id='email'
                label='Email'
                variant='outlined'
                autoComplete='new-email'
                fullWidth
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </Grid>
            <br />
            <br />
            <Grid container item>
              <TextField
                required
                id='message'
                label='Message'
                fullWidth
                multiline
                rows={4}
                value={message}
                variant='outlined'
                onChange={(e) => setMessage(e.target.value)}
              />
            </Grid>
            <br />
            <br />
            <br />
            <br />
            <Grid container item>
              <Button
                variant='contained'
                fullWidth
                color='primary'
                onClick={onSubmitHandler}
              >
                Submit
              </Button>    
            </Grid>
          </Grid>
        </form>
        <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
          <Alert onClose={handleClose} severity='success'>
            message submitted successfully!
          </Alert>
        </Snackbar>
      </div>

note: snackbar is for an alert that the user data is submitted successfully

so the gonna look like this

now we create state for our form input so we can capture on change values from the input field and write firestore command to save data in firestore.

const classes = useStyle()
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [open, setOpen] = useState(false)


 const onSubmitHandler = (e) =>{
        e.preventDefault()
        db.collection('contact').add({
            name: name,
            email:email,
            message :message,
        })
        .then(() => {
            setOpen(true);
        })
        .catch((error) =>{
            alert(error.message)
        })

       setName("")
       setEmail("")
       setMessage("")

    }

create a function for snackbar

   const handleClose = (e, reason) =>{
        if (reason === 'clickaway'){
           return(
               console.log("working")
           ) 
        }
        setOpen(false)
    }

    function Alert(props) {
      return <MuiAlert elevation={6} variant='filled' {...props} />;
    }

for styling the elements

we use makesStyles function from material to design our form

const useStyle = makeStyles((theme) => ({
    root:{
        width:"450px",
        marginTop:"150px",
        marginLeft:"600px"

    }
}))

note: we call usestyle ()
by using other variable(in this case i use classes = useStyles())

So that's it everyone
Hope you Enjoy!

for source code visit my Github Repo : https://github.com/cyber-hoax/react-firestore