DEV Community

loading...
Cover image for Contact form in material UI and firestore

Contact form in material UI and firestore

cyberhoax profile image Raunak Tamang Updated on ・2 min read

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()

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Alt Text
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("")

    }

Enter fullscreen mode Exit fullscreen mode

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} />;
    }
Enter fullscreen mode Exit fullscreen mode

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"

    }
}))
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

So that's it everyone
Hope you Enjoy!

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

Discussion (0)

pic
Editor guide