GetinTouch.js
6.14 KB
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import Image from "next/image";
import React, { useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
const validationSchema = Yup.object().shape({
fullName: Yup.string().required("Full name is required"),
email: Yup.string().email("Invalid email").required("Email is required"),
phone: Yup.string().required("Phone number is required"),
zipCode: Yup.string().required("Zip code is required"),
message: Yup.string().required("Message is required")
});
const GetinTouch = () => {
const [phone, setPhone] = useState("");
return (
<section className="get-in-touch-session">
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="row mb-3">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Let’s</div>
<h2>Get In Touch</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<Formik
initialValues={{
fullName: "",
email: "",
phone: "",
zipCode: "",
message: ""
}}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// Handle form submission here
console.log(values);
setSubmitting(false);
}}
>
{({ isSubmitting, values, handleChange, handleBlur, touched, errors }) => (
<Form className="form-01">
<div className="row">
<div className="col-md-6 mb-4">
<Field
className="form-control"
type="text"
name="fullName"
placeholder="Enter Your Full Name"
onChange={handleChange}
onBlur={handleBlur}
value={values.fullName}
/>
{touched.fullName && errors.fullName && <div className="text-danger">{errors.fullName}</div>}
</div>
<div className="col-md-6 mb-4">
<Field
className="form-control"
type="email"
name="email"
placeholder="Enter Your Email Address"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{touched.email && errors.email && <div className="text-danger">{errors.email}</div>}
</div>
<div className="col-md-6 mb-4">
<Field
as={PhoneInput}
inputClass="form-control"
country={"in"}
name="phone"
placeholder="Enter Your Contact Number"
onChange={phone => handleChange({ target: { name: "phone", value: phone } })}
onBlur={handleBlur}
value={values.phone}
/>
{touched.phone && errors.phone && <div className="text-danger">{errors.phone}</div>}
</div>
<div className="col-md-6 mb-4">
<Field
className="form-control"
type="text"
name="zipCode"
placeholder="Enter Your Zip Code"
onChange={handleChange}
onBlur={handleBlur}
value={values.zipCode}
/>
{touched.zipCode && errors.zipCode && <div className="text-danger">{errors.zipCode}</div>}
</div>
<div className="col-md-12 mb-4">
<Field
className="form-control"
as="textarea"
rows={7}
name="message"
placeholder="Type your message..."
onChange={handleChange}
onBlur={handleBlur}
value={values.message}
/>
{touched.message && errors.message && <div className="text-danger">{errors.message}</div>}
</div>
<div className="col-md-12">
<button className="btn btn-primary" type="submit" disabled={isSubmitting}>
Submit
</button>
</div>
</div>
</Form>
)}
</Formik>
</div>
</div>
</div>
<div className="col-md-6">
<div className="rt-banner">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/contact-us-img.png" />
</span>
</div>
</div>
</div>
</div>
</section>
);
};
export default GetinTouch;