In this tutorial, I am going to share how to create contact form in react js with example. Hope, I have solved your following questions, if you have still question, feel free to add in below comment form.
Add the following HTML + React JS code to create form.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import React from 'react'; import axios from 'axios'; class App extends React.Component{ constructor(props) { super(props); this.state = { name: '', email: '', message: '' } } handleSubmit(e){ e.preventDefault(); axios({ method: "POST", url:"http://localhost:3002/send", data: this.state }).then((response)=>{ if (response.data.status === 'success'){ alert("Message Sent."); this.resetForm() }else if(response.data.status === 'fail'){ alert("Message failed to send.") } }) } resetForm(){ this.setState({name: ‘’, email: ‘’, message: ‘’}) } render() { return( <div className="App"> <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST"> <div className="form-group"> <label htmlFor="name">Name</label> <input type="text" className="form-control" id="name" value={this.state.name} onChange={this.onNameChange.bind(this)} /> </div> <div className="form-group"> <label htmlFor="exampleInputEmail1">Email address</label> <input type="email" className="form-control" id="email" aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} /> </div> <div className="form-group"> <label htmlFor="message">Message</label> <textarea className="form-control" rows="5" id="message" value={this.state.message} onChange={this.onMessageChange.bind(this)} /> </div> <button type="submit" className="btn btn-primary">Submit</button> </form> </div> ); } onNameChange(event) { this.setState({name: event.target.value}) } onEmailChange(event) { this.setState({email: event.target.value}) } onMessageChange(event) { this.setState({message: event.target.value}) } } export default App; |
Make sure the sendmail command works correctly or use another email sending method instead of the mail funciton.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <?php $rest_json = file_get_contents("php://input"); $_POST = json_decode($rest_json, true); if ($_SERVER['REQUEST_METHOD'] === "POST") { if (empty($_POST['email'])) { $errors[] = 'Email is empty'; } else { $email = $_POST['email']; // validating the email if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors[] = 'Invalid email'; } } if (empty($_POST['message'])) { $errors[] = 'Message is empty'; } else { $message = $_POST['message']; } if (empty($errors)) { $date = date('j, F Y h:i A'); $emailBody = " <html> <head> <title>$email is contacting you</title> </head> <body style=\"background-color:#fafafa;\"> <div style=\"padding:20px;\"> Date: <span style=\"color:#888\">$date</span> <br> Email: <span style=\"color:#888\">$email</span> <br> Message: <div style=\"color:#888\">$message</div> </div> </body> </html> "; "Reply-To: $email" . "\r\n" . "MIME-Version: 1.0\r\n" . "Content-Type: text/html; charset=iso-8859-1\r\n"; $subject = 'Contacting you'; if (mail($to, $subject, $emailBody, $headers)) { $sent = true; } } } ?> <?php if (!empty($errors)) : ?> { "status": "fail", "error": <?php echo json_encode($errors) ?> } <?php endif; ?> <?php if (isset($sent) && $sent === true) : ?> { "status": "success", "message": "Your data was successfully submitted" } <?php endif; ?> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
