Contact Form - Copy this React, Tailwind Component to your project
Import React, { useState } from "react"; import msg_icon from '../../assets/msg icon.png'; import mail_icon from '../../assets/mail icon.png'; import phone_icon from '../../assets/phone icon.png'; import location_icon from '../../assets/location icon.png'; import white_arrow from '../../assets/white arrow.png'; const Contact = () => { const [result, setResult] = useState(""); const [rating, setRating] = useState(0); const onSubmit = async (event) => { event.preventDefault(); setResult("Sending...."); const formData = new FormData(event.target); formData.append("access_key", "6ab5bef3 175b 43c4 8c63 46b2b6dfb168"); formData.append("rating", rating); const response = await fetch("https://api.web3forms.com/submit", { method: "POST", body: formData, }); const data = await response.json(); if (data.success) { setResult("Form Submitted Successfully"); setTimeout(() => setResult(null), 4000); event.target.reset(); setRating(0); } else { console.log("Error", data); setResult(data.message); } }; const handleStarClick = (index) => { setRating(index + 1); }; return ( <div className="container mx auto my 16 px 4 flex flex wrap gap 8 justify between"> <div className="w full md:w [48%] bg gray 50 shadow lg rounded lg p 6"> <h3 className="text xl font semibold text gray 800 flex items center mb 4"> Send us a message <img src={msg_icon} alt="Message Icon" className="w 6 ml 2" /> </h3> <p className="text gray 600 mb 6"> Feel free to reach out through the contact form or find our contact information below. Your feedback, questions, and suggestions are important to us as we strive to provide exceptional service to our prediction community. </p> <ul className="space y 4"> <li className="flex items center text gray 700"> <img src={mail_icon} alt="Mail Icon" className="w 5 mr 3" /> info.diabetesproject24@gmail.com </li> <li className="flex items center text gray 700"> <img src={phone_icon} alt="Phone Icon" className="w 5 mr 3" /> +91 8459162696 </li> <li className="flex items center text gray 700"> <img src={location_icon} alt="Location Icon" className="w 5 mr 3" /> Nanded, Maharashtra, <br /> India </li> </ul> </div> <div className="w full md:w [48%] bg gray 50 shadow lg rounded lg p 6"> <form className="space y 4" onSubmit={onSubmit}> <div> <label className="block font medium text gray 700 mb 1">Your name</label> <input type="text" name="name" placeholder="Your name" required className="w full px 4 py 2 border border gray 300 rounded md focus:ring focus:ring indigo 200" /> </div> <div> <label className="block font medium text gray 700 mb 1">Phone Number</label> <input type="tel" name="phone" placeholder="Your mobile number" className="w full px 4 py 2 border border gray 300 rounded md focus:ring focus:ring indigo 200" /> </div> <div> <label className="block font medium text gray 700 mb 1"> Write your messages here </label> <textarea name="message" rows="6" placeholder="Your message" required className="w full px 4 py 2 border border gray 300 rounded md focus:ring focus:ring indigo 200" ></textarea> </div> <div> <label className="block font medium text gray 700 mb 1">Rating</label> <div className="flex space x 2"> {[...Array(5)].map((_, index) => ( <div key={index} className={`text 3xl cursor pointer transition transform transform hover:scale 125 ${ rating > index ? "text yellow 400" : "text gray 300" }`} onClick={() => handleStarClick(index)} > ★ </div> ))} </div> </div> <button type="submit" className="bg indigo 600 text white px 6 py 2 rounded full hover:bg indigo 700 flex items center justify center" > Submit Now <img src={white_arrow} alt="White Arrow" className="w 5 ml 2" /> </button> </form> <span className="block mt 4 text green 500 font bold">{result}</span> </div> </div> ); }; export default Contact;
