In this tutorial, we will create contact us form page in react with material ui (mui 5). We will see mui 5 contact us form, contact us with image example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
React Material UI 5 Contact US Page Example
1. Create react mui 5 simple contact us using react-mui TextField, Typography, Box, Button component.
import { useState } from "react";
import { TextField, Button, Typography, Box } from "@mui/material";
export default function ContactForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
//
};
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<Box sx={{ maxWidth: 600, mx: "auto", p: 2 }}>
<Typography variant="h4" align="center" mb={2}>
Contact Us
</Typography>
<form onSubmit={handleSubmit}>
<TextField
fullWidth
label="Name"
value={name}
onChange={(e) => setName(e.target.value)}
margin="normal"
required
/>
<TextField
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
margin="normal"
required
type="email"
/>
<TextField
fullWidth
label="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
margin="normal"
required
multiline
rows={4}
/>
<Button variant="contained" type="submit" sx={{ mt: 2 }}>
Submit
</Button>
</form>
</Box>
</Box>
);
}
react mui 5 contact page
2. react mui 5 contact us page with border style.
import { useState } from "react";
import { TextField, Button, Typography, Box } from "@mui/material";
export default function ContactForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
//
};
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
maxWidth: 600,
mx: "auto",
p: 2,
border: "2px solid #000000",
borderRadius: "12px",
boxShadow: 1,
}}
>
<Typography variant="h4" align="center" mb={2}>
Contact Us
</Typography>
<form onSubmit={handleSubmit}>
<TextField
fullWidth
label="Name"
value={name}
onChange={(e) => setName(e.target.value)}
margin="normal"
required
/>
<TextField
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
margin="normal"
required
type="email"
/>
<TextField
fullWidth
label="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
margin="normal"
required
multiline
rows={4}
/>
<Button
fullWidth
type="submit"
sx={{
mt: 2,
backgroundColor: "#000",
color: "#fff",
"&:hover": {
backgroundColor: "#111",
},
}}
>
Submit
</Button>
</form>
</Box>
</Box>
);
}
mui 5 contact form
3. react mui 5 responsive contact us page with image.
import { useState } from "react";
import { TextField, Button, Typography, Grid, Box } from "@mui/material";
export default function ContactForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
//
};
return (
<Box sx={{ height: "100vh" }}>
<Grid
container
direction="column"
alignItems="center"
justifyContent="center"
sx={{ height: "100%" }}
>
<Grid item xs={12} md={4}>
<Box sx={{ p: 2 }}>
<Typography variant="h4" align="center" mb={2}>
Contact Us
</Typography>
<form onSubmit={handleSubmit}>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Box sx={{ display: "flex", justifyContent: "center" }}>
<img
src="https://cdn.pixabay.com/photo/2023/04/24/03/16/camping-7947056__340.jpg"
alt="Contact"
style={{ maxWidth: "100%" }}
/>
</Box>
</Grid>
<Grid item xs={12} md={6}>
<TextField
fullWidth
label="Name"
value={name}
onChange={(e) => setName(e.target.value)}
margin="normal"
required
/>
<TextField
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
margin="normal"
required
type="email"
/>
<TextField
fullWidth
label="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
margin="normal"
required
multiline
rows={4}
/>
<Button variant="contained" type="submit" sx={{ mt: 2 }}>
Submit
</Button>
</Grid>
</Grid>
</form>
</Box>
</Grid>
</Grid>
</Box>
);
}
react mui 5 contact us with image
