Date:

Share:

React contact form code example

Related Articles

In the post, I will cover the React contact form, create a react js form using an input element, and change the status of the component associated with an event like onSubmit etc.

First need to create a functional component, I use a functional component to create and handle a response form. I’m using a- In Submit An event that will watch changes in input.

import React,  useRef  from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() 
  const nameRef = useRef(null);
  const emailRef = useRef(null);
  const phoneRef = useRef(null);
  const messageRef = useRef(null);

  const handleSubmit = (event) => 
    event.preventDefault();
    const data = 
      name: nameRef.current.value,
      email: emailRef.current.value,
      phone: phoneRef.current.value,
      message: messageRef.current.value,
    ;
    alert("Your data 😎: n" + JSON.stringify(data));
  ;

  return (
    <div className="container h-100">
      <div className="row h-100 justify-content-center align-items-center">
        <section>
          <div>
            <div className="row">
              <div className="col-sm-12">
                <div className="row">
                  <div className="col-sm-8 col-sm-offset-2">
                    <div>
                      <h2>CONTACT US</h2>
                    </div>
                    <form
                      method="post"
                      data-form-title="CONTACT US"
                      onSubmit=handleSubmit
                    >
                      <input type="hidden" data-form-email="true" />
                      <div className="form-group">
                        <input
                          type="text"
                          className="form-control mb-2"
                          name="name"
                          required=""
                          placeholder="Name*"
                          data-form-field="Name"
                          ref=nameRef
                          tabindex="1"
                        />
                      </div>
                      <div className="form-group">
                        <input
                          type="email"
                          className="form-control  mb-2"
                          name="email"
                          required=""
                          placeholder="Email*"
                          data-form-field="Email"
                          ref=emailRef
                          tabindex="2"
                        />
                      </div>
                      <div className="form-group">
                        <input
                          type="tel"
                          className="form-control  mb-2"
                          name="phone"
                          placeholder="Phone"
                          data-form-field="Phone"
                          ref=phoneRef
                          tabindex="3"
                        />
                      </div>
                      <div className="form-group">
                        <textarea
                          className="form-control  mb-2"
                          name="message"
                          placeholder="Message"
                          rows="7"
                          data-form-field="Message"
                          ref=messageRef
                        ></textarea>
                      </div>
                      <div>
                        <button type="submit" className="btn btn-lg btn-danger">
                          CONTACT US
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );


export default App;

Screenshot

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles