diff --git a/index.html b/index.html index b0653b3..c81eb96 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,6 @@
+ diff --git a/src/components/Form.jsx b/src/components/Form.jsx index bcc8c8d..8e7177a 100644 --- a/src/components/Form.jsx +++ b/src/components/Form.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, useRef, React, createRef } from "react"; import { Box, Button, @@ -26,7 +26,6 @@ import ReCAPTCHA from "react-google-recaptcha"; import { Spinner } from "@chakra-ui/react"; import { TbNumber2Small } from "react-icons/tb"; - const Form = () => { const [sliderValue, setSliderValue] = useState(0); const [fileAdded, setFileAdded] = useState(false); @@ -35,8 +34,7 @@ const Form = () => { const [success, setSuccess] = useState(null); const [formError, setformError] = useState(null); const [captchaValue, setCaptchaValue] = useState(null); - - + const recaptchaRef = createRef(); const { register, handleSubmit, @@ -52,6 +50,9 @@ const Form = () => { return; } + const recaptchaValue = recaptchaRef.current.getValue(); + this.props.onSubmit(recaptchaValue); + const handleCaptcha = (value) => { setCaptchaValue(value); }; @@ -125,7 +126,12 @@ const Form = () => { }; return ( - + { p={"2rem"} w={"100%"} > - {/*
*/} - - */} + - {[ - { label: "Enter your name", type: "text", name: "name" }, - { - label: "Enter your email address", - type: "email", - name: "email", - }, - { - label: "Enter your contact number", - type: "number", - name: "contactnumber", - }, - ].map((field, index) => ( - - {field.label} - - {errors[field.name] && ( - - {errors[field.name].message} - - )} - - ))} - {[ - { - label: "Select your country", - options: ["Country 1", "Country 2", "Country 3"], - name: "country", - }, - { - label: "Select your services", - options: ["Service 1", "Service 2", "Service 3"], - name: "services", - }, - { - label: "Where did you hear about us? *", - options: ["Source 1", "Source 2", "Source 3"], - name: "aboutus", - }, - ].map((selectField, index) => ( - - {selectField.label} + + {[ + { label: "Enter your name", type: "text", name: "name" }, + { + label: "Enter your email address", + type: "email", + name: "email", + }, + { + label: "Enter your contact number", + type: "number", + name: "contactnumber", + }, + ].map((field, index) => ( + + {field.label} + + {errors[field.name] && ( + + {errors[field.name].message} + + )} + + ))} + {[ + { + label: "Select your country", + options: ["Country 1", "Country 2", "Country 3"], + name: "country", + }, + { + label: "Select your services", + options: ["Service 1", "Service 2", "Service 3"], + name: "services", + }, + { + label: "Where did you hear about us? *", + options: ["Source 1", "Source 2", "Source 3"], + name: "aboutus", + }, + ].map((selectField, index) => ( + + {selectField.label} + + {errors[selectField.name] && ( + + {errors[selectField.name].message} + + )} + + ))} + + + + + Tell us about your project and business challenge. + +