How to Create Contact Form with MUI in React
mui|

Ayush

Arya

|

Feb 13, 2024

How To Create Contact Form With MUI In React


Streamlining User Communication: Crafting an Interactive Contact Form with Material-UI in React

Empower your React application with a user-friendly and visually appealing contact form using Material-UI components. In this comprehensive guide, we'll walk through the process of creating a dynamic and responsive contact form that not only enhances user experience but also integrates seamlessly into your project.

Integrating Material-UI Components

Begin by importing essential Material-UI components such as Button, TextField, Box, Typography, and icons like PersonIcon, EmailIcon, NoteAltIcon, and PhoneAndroidIcon. This establishes a solid foundation for the form's structure and styling.

1// (Import statements) 2import React, { useState } from "react"; 3import { Button, TextField, Box, Typography } from "@mui/material"; 4import PersonIcon from "@mui/icons-material/Person"; 5import EmailIcon from "@mui/icons-material/Email"; 6import NoteAltIcon from "@mui/icons-material/NoteAlt"; 7import PhoneAndroidIcon from "@mui/icons-material/PhoneAndroid"; 8import axios from "axios"; 9 10const ContactForm = () => { 11// State for form data 12 13 const [formData, setFormData] = useState({ 14 fullname: "", 15 email: "", 16 phone: "", 17 msg: "", 18 }); 19 20 const { fullname, email, phone, msg } = formData; 21 22 // ... (handleChange and handleSubmit functions) 23 24 const handleChange = (e) => { 25 setFormData({ ...formData, [e.target.name]: e.target.value }); 26 }; 27 28 const handleSubmit = async (e) => { 29 e.preventDefault(); 30 const payload = { 31 fullname: fullname, 32 email: email, 33 phone: phone, 34 msg: msg, 35 }; 36 37 try { 38 const response = await axios.post(`/api/contact`, payload, { 39 headers: { 40 "Content-Type": "application/json", 41 }, 42 }); 43 if (response.status === 200) { 44 alert(response.data.message); 45 setFormData({ 46 fullname: "", 47 email: "", 48 phone: "", 49 msg: "", 50 }); 51 } 52 } catch (error) { 53 if (error.response && error.response.status === 400) { 54 alert(error.response.data.message); 55 } 56 if (error.response && error.response.status === 404) { 57 alert(error.response.data.message); 58 } 59 if (error.response && error.response.status === 500) { 60 alert(error.response.data.message); 61 } 62 } 63 }; 64 // JSX structure for the contact form 65 return ( 66 <> 67 <Box 68 sx={{ alignItems: "center", justifyContent: "center", display: "flex" }} 69 > 70 <Box 71 sx={{ 72 background: "#ffffff", 73 width: 600, 74 border: "2px solid #767676 ", 75 borderRadius: 5, 76 p: 5, 77 my: 2, 78 mx: 2, 79 }} 80 > 81 <Typography 82 sx={{ 83 color: "#2D3748", 84 fontFamily: " 'Inter', sans-serif", 85 fontSize: 30, 86 fontWeight: 700, 87 }} 88 textAlign="center" 89 > 90 Contact Us 91 </Typography> 92 <Box 93 component="form" 94 validate="true" 95 onSubmit={handleSubmit} 96 sx={{ mt: 1 }} 97 > 98 <Box sx={{ display: "flex", alignItems: "flex-end" }}> 99 <PersonIcon sx={{ color: "action.active", mr: 1, my: 0.5 }} /> 100 101 <TextField 102 variant="standard" 103 margin="normal" 104 required 105 fullWidth 106 onChange={handleChange} 107 value={fullname} 108 name="fullname" 109 id="fullname" 110 label="Full Name" 111 /> 112 </Box> 113 <Box sx={{ display: "flex", alignItems: "flex-end" }}> 114 <EmailIcon sx={{ color: "action.active", mr: 1, my: 0.5 }} /> 115 116 <TextField 117 variant="standard" 118 margin="normal" 119 required 120 fullWidth 121 onChange={handleChange} 122 value={email} 123 name="email" 124 id="email" 125 autoComplete="email" 126 label="Your Email Id" 127 /> 128 </Box> 129 <Box sx={{ display: "flex", alignItems: "flex-end" }}> 130 <PhoneAndroidIcon 131 sx={{ color: "action.active", mr: 1, my: 0.5 }} 132 /> 133 134 <TextField 135 variant="standard" 136 margin="normal" 137 required 138 fullWidth 139 onChange={handleChange} 140 value={phone} 141 name="phone" 142 id="phone" 143 label="Phone" 144 /> 145 </Box> 146 <Box sx={{ display: "flex", alignItems: "flex-end" }}> 147 <NoteAltIcon sx={{ color: "action.active", mr: 1, my: 0.5 }} /> 148 149 <TextField 150 variant="standard" 151 margin="normal" 152 required 153 fullWidth 154 onChange={handleChange} 155 value={msg} 156 name="msg" 157 id="msg" 158 label="Massage" 159 multiline 160 rows={2} 161 /> 162 </Box> 163 164 <Button 165 type="submit" 166 fullWidth 167 sx={{ 168 my: 3, 169 fontFamily: " 'Inter', sans-serif", 170 letterSpacing: "normal", 171 py: 1, 172 color: "#fff", 173 backgroundColor: "#10BE35 ", 174 "&:hover": { backgroundColor: "#07711E" }, 175 textTransform: "none", 176 }} 177 > 178 Submit 179 </Button> 180 </Box> 181 </Box> 182 </Box> 183 </> 184 ); 185}; 186 187export default ContactForm;

Enhancing User Experience

  1. Dynamic Form Handling: Utilize React's state management to handle form data dynamically, creating a seamless user experience.

  2. Axios for API Interaction: Employ Axios to handle form submissions, interacting with the backend API endpoint for smooth data transmission.

  3. Styling with Material-UI: Leverage Material-UI's styling capabilities to create an aesthetically pleasing and responsive contact form.

Conclusion: Elevate User Interaction with Material-UI Contact Form

Integrate this Material-UI contact form into your React project to establish effective communication channels with users. Elevate user interaction, capture essential data, and create a visually appealing contact experience.

Feel free to customize the code to align with your project's design requirements and explore additional Material-UI features for further enhancement.


By combining Material-UI components, state management, and API interaction, you'll create a contact form that seamlessly integrates into your React application, ensuring a positive user experience.


Popular Blog Categories


Contact Me

Phone

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail : techayu001@gmail.com

Chatbot