arif11015

React-contact-form.js

Aug 4th, 2021 (edited)
275
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { useForm } from "react-hook-form";
  3. import {yupResolver} from "@hookform/resolvers/yup";
  4. import * as yup from 'yup';
  5. import {Button, Col, Container, Form, Row} from "react-bootstrap";
  6. import RestClient from "../RestAPI/RestClient";
  7. import AppUrl from "../RestAPI/AppUrl";
  8.  
  9.  
  10. const schema = yup.object().shape({
  11.     name:yup.string().required(),
  12.     email:yup.string().email().required(),
  13.     message:yup.string().min(20).max(350).required(),
  14. });
  15.  
  16. const ContactPageContent = () => {
  17.     const {register, handleSubmit,  formState: { errors } } = useForm({
  18.         resolver: yupResolver(schema),
  19.     })
  20.     const sendFormData = (data) =>{
  21.         RestClient.ContactPostRequest(AppUrl.sendContactFormData, JSON.stringify(data)).then(result=>{
  22.             reset();
  23.             return alert("Success")
  24.         }).catch(error=>{
  25.             return "Error"
  26.         })
  27.     }
  28.     return (
  29.         <Container className="pt-5 ContactPageContentWrap">
  30.             <Row>
  31.                 <Col lg={6} md={12} xs={12}>
  32.                     <h3>Send Us Message</h3>
  33.                     <Form onClick={handleSubmit(sendFormData)}>
  34.                         <Form.Group className="mb-3">
  35.                             <Form.Control {...register('name')}  id="name" type="text" name="name" placeholder="Name" />
  36.                             <p className="text-danger"> {errors.name?.message} </p>
  37.                         </Form.Group>
  38.  
  39.                         <Form.Group className="mb-3">
  40.                             <Form.Control {...register('email')} id="contactEmail" type="email" name="email" placeholder="Email" />
  41.                             <p className="text-danger"> {errors.email?.message} </p>
  42.                         </Form.Group>
  43.                         <Form.Group className="mb-3">
  44.                             <Form.Control {...register('message')} id="contactMessage" as="textarea" name="message" rows={3} placeholder="Message" />
  45.                             <p className="text-danger"> {errors.message?.message} </p>
  46.                         </Form.Group>
  47.                         <Button type="submit" variant="primary">
  48.                             Submit
  49.                         </Button>
  50. <button type="button" onClick={() => reset({  })}>Reset</button>
  51.                     </Form>
  52.                 </Col>
  53.                 <Col lg={6} md={12} xs={12} className="ContactPageRightColWrap">
  54.                    
  55.                 </Col>
  56.             </Row>
  57.         </Container>
  58.     );
  59. };
  60.  
  61. export default ContactPageContent;
RAW Paste Data