Form options
This commit is contained in:
npcdazai
@@ -158,271 +158,481 @@ const Form = () => {
|
||||
w={"100%"}
|
||||
>
|
||||
{/* <form onSubmit={handleSubmit(onSubmit)}> */}
|
||||
<FormControl
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
<FormControl
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
px={"4rem"}
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={4}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
>
|
||||
<Box
|
||||
px={"4rem"}
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={4}
|
||||
justifyItems="center"
|
||||
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) => (
|
||||
<Box w="100%" key={index}>
|
||||
<FormLabel color="#FFFFFF">{field.label}</FormLabel>
|
||||
<Input
|
||||
{...register(field.name, {
|
||||
required: `${field.label} is required`,
|
||||
pattern:
|
||||
field.type === "email"
|
||||
? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
|
||||
: undefined,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
type={field.type}
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
/>
|
||||
{errors[field.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[field.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<Box w="100%" key={index + 3}>
|
||||
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel>
|
||||
<Select
|
||||
{...register(selectField.name, {
|
||||
required: `${selectField.label} is required`,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
color="white"
|
||||
placeholder="Select an option"
|
||||
>
|
||||
{selectField.options.map((option, idx) => (
|
||||
<option
|
||||
key={idx}
|
||||
value={option.toLowerCase().replace(/\s/g, "")}
|
||||
>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{errors[selectField.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[selectField.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"}>
|
||||
<FormLabel color="#FFFFFF">
|
||||
Tell us about your project and business challenge.
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("project_challenges", {
|
||||
required: "Project details are required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
minH="65px"
|
||||
/>
|
||||
{errors.project_challenges && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.project_challenges.message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={5}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
px={"4rem"}
|
||||
>
|
||||
<Box w="100%">
|
||||
<FormLabel color="#FFFFFF">
|
||||
When would you like to start
|
||||
</FormLabel>
|
||||
{[
|
||||
{ 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) => (
|
||||
<Box w="100%" key={index}>
|
||||
<FormLabel color="#FFFFFF">{field.label}</FormLabel>
|
||||
<Input
|
||||
{...register(field.name, {
|
||||
required: `${field.label} is required`,
|
||||
pattern:
|
||||
field.type === "email"
|
||||
? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
|
||||
: undefined,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
type={field.type}
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
/>
|
||||
{errors[field.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors[field.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
{[
|
||||
{
|
||||
label: "Select your country",
|
||||
options: [
|
||||
"Afghanistan",
|
||||
"Albania",
|
||||
"Algeria",
|
||||
"Andorra",
|
||||
"Angola",
|
||||
"Antigua and Barbuda",
|
||||
"Argentina",
|
||||
"Armenia",
|
||||
"Australia",
|
||||
"Austria",
|
||||
"Azerbaijan",
|
||||
"Bahamas",
|
||||
"Bahrain",
|
||||
"Bangladesh",
|
||||
"Barbados",
|
||||
"Belarus",
|
||||
"Belgium",
|
||||
"Belize",
|
||||
"Benin",
|
||||
"Bhutan",
|
||||
"Bolivia",
|
||||
"Bosnia and Herzegovina",
|
||||
"Botswana",
|
||||
"Brazil",
|
||||
"Brunei",
|
||||
"Bulgaria",
|
||||
"Burkina Faso",
|
||||
"Burundi",
|
||||
"Cabo Verde",
|
||||
"Cambodia",
|
||||
"Cameroon",
|
||||
"Canada",
|
||||
"Central African Republic",
|
||||
"Chad",
|
||||
"Chile",
|
||||
"China",
|
||||
"Colombia",
|
||||
"Comoros",
|
||||
"Congo (Congo-Brazzaville)",
|
||||
"Costa Rica",
|
||||
"Croatia",
|
||||
"Cuba",
|
||||
"Cyprus",
|
||||
"Czechia (Czech Republic)",
|
||||
"Democratic Republic of the Congo",
|
||||
"Denmark",
|
||||
"Djibouti",
|
||||
"Dominica",
|
||||
"Dominican Republic",
|
||||
"Ecuador",
|
||||
"Egypt",
|
||||
"El Salvador",
|
||||
"Equatorial Guinea",
|
||||
"Eritrea",
|
||||
"Estonia",
|
||||
'Eswatini (fmr. "Swaziland")',
|
||||
"Ethiopia",
|
||||
"Fiji",
|
||||
"Finland",
|
||||
"France",
|
||||
"Gabon",
|
||||
"Gambia",
|
||||
"Georgia",
|
||||
"Germany",
|
||||
"Ghana",
|
||||
"Greece",
|
||||
"Grenada",
|
||||
"Guatemala",
|
||||
"Guinea",
|
||||
"Guinea-Bissau",
|
||||
"Guyana",
|
||||
"Haiti",
|
||||
"Honduras",
|
||||
"Hungary",
|
||||
"Iceland",
|
||||
"India",
|
||||
"Indonesia",
|
||||
"Iran",
|
||||
"Iraq",
|
||||
"Ireland",
|
||||
"Israel",
|
||||
"Italy",
|
||||
"Jamaica",
|
||||
"Japan",
|
||||
"Jordan",
|
||||
"Kazakhstan",
|
||||
"Kenya",
|
||||
"Kiribati",
|
||||
"Kuwait",
|
||||
"Kyrgyzstan",
|
||||
"Laos",
|
||||
"Latvia",
|
||||
"Lebanon",
|
||||
"Lesotho",
|
||||
"Liberia",
|
||||
"Libya",
|
||||
"Liechtenstein",
|
||||
"Lithuania",
|
||||
"Luxembourg",
|
||||
"Madagascar",
|
||||
"Malawi",
|
||||
"Malaysia",
|
||||
"Maldives",
|
||||
"Mali",
|
||||
"Malta",
|
||||
"Marshall Islands",
|
||||
"Mauritania",
|
||||
"Mauritius",
|
||||
"Mexico",
|
||||
"Micronesia",
|
||||
"Moldova",
|
||||
"Monaco",
|
||||
"Mongolia",
|
||||
"Montenegro",
|
||||
"Morocco",
|
||||
"Mozambique",
|
||||
"Myanmar (formerly Burma)",
|
||||
"Namibia",
|
||||
"Nauru",
|
||||
"Nepal",
|
||||
"Netherlands",
|
||||
"New Zealand",
|
||||
"Nicaragua",
|
||||
"Niger",
|
||||
"Nigeria",
|
||||
"North Korea",
|
||||
"North Macedonia",
|
||||
"Norway",
|
||||
"Oman",
|
||||
"Pakistan",
|
||||
"Palau",
|
||||
"Panama",
|
||||
"Papua New Guinea",
|
||||
"Paraguay",
|
||||
"Peru",
|
||||
"Philippines",
|
||||
"Poland",
|
||||
"Portugal",
|
||||
"Qatar",
|
||||
"Romania",
|
||||
"Russia",
|
||||
"Rwanda",
|
||||
"Saint Kitts and Nevis",
|
||||
"Saint Lucia",
|
||||
"Saint Vincent and the Grenadines",
|
||||
"Samoa",
|
||||
"San Marino",
|
||||
"Sao Tome and Principe",
|
||||
"Saudi Arabia",
|
||||
"Senegal",
|
||||
"Serbia",
|
||||
"Seychelles",
|
||||
"Sierra Leone",
|
||||
"Singapore",
|
||||
"Slovakia",
|
||||
"Slovenia",
|
||||
"Solomon Islands",
|
||||
"Somalia",
|
||||
"South Africa",
|
||||
"South Korea",
|
||||
"South Sudan",
|
||||
"Spain",
|
||||
"Sri Lanka",
|
||||
"Sudan",
|
||||
"Suriname",
|
||||
"Sweden",
|
||||
"Switzerland",
|
||||
"Syria",
|
||||
"Taiwan",
|
||||
"Tajikistan",
|
||||
"Tanzania",
|
||||
"Thailand",
|
||||
"Timor-Leste",
|
||||
"Togo",
|
||||
"Tonga",
|
||||
"Trinidad and Tobago",
|
||||
"Tunisia",
|
||||
"Turkey",
|
||||
"Turkmenistan",
|
||||
"Tuvalu",
|
||||
"Uganda",
|
||||
"Ukraine",
|
||||
"United Arab Emirates",
|
||||
"United Kingdom",
|
||||
"United States of America",
|
||||
"Uruguay",
|
||||
"Uzbekistan",
|
||||
"Vanuatu",
|
||||
"Vatican City",
|
||||
"Venezuela",
|
||||
"Vietnam",
|
||||
"Yemen",
|
||||
"Zambia",
|
||||
"Zimbabwe",
|
||||
],
|
||||
name: "country",
|
||||
},
|
||||
{
|
||||
label: "Select your services",
|
||||
options: [
|
||||
"Mobile application Development ",
|
||||
"Website Design & Development ",
|
||||
"Website Prototype Designing",
|
||||
"SEO",
|
||||
"Free Website Audit Report",
|
||||
"Website Maintenance",
|
||||
],
|
||||
name: "services",
|
||||
},
|
||||
{
|
||||
label: "Where did you hear about us? *",
|
||||
options: ["Social Media ", "Clutch", "Good Firm", "Other"],
|
||||
name: "aboutus",
|
||||
},
|
||||
].map((selectField, index) => (
|
||||
<Box w="100%" key={index + 3}>
|
||||
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel>
|
||||
<Select
|
||||
{...register("would_like_start", {
|
||||
required: "Start date is required",
|
||||
{...register(selectField.name, {
|
||||
required: `${selectField.label} is required`,
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
color="white"
|
||||
placeholder="Select an option"
|
||||
_placeholder={{ color: "black", bgColor: "black" }}
|
||||
>
|
||||
<option value="option1">Option 1</option>
|
||||
<option value="option2">Option 2</option>
|
||||
<option value="option3">Option 3</option>
|
||||
{selectField.options.map((option, idx) => (
|
||||
<option
|
||||
style={{ backgroundColor: "black" }}
|
||||
key={idx}
|
||||
value={option.toLowerCase().replace(/\s/g, "")}
|
||||
>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
{errors.would_like_start && (
|
||||
{errors[selectField.name] && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.would_like_start.message}
|
||||
{errors[selectField.name].message}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box w="100%">
|
||||
<FormLabel color="#FFFFFF">Attach file</FormLabel>
|
||||
<Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
{...register("fileInput", {
|
||||
validate: (file) =>
|
||||
file &&
|
||||
["image/png", "image/jpeg", "application/pdf"].includes(
|
||||
file.type
|
||||
) &&
|
||||
file.size <= 5 * 1024 * 1024
|
||||
? true
|
||||
: "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
|
||||
})}
|
||||
onChange={(e) => {
|
||||
handleChange(e);
|
||||
setFileAdded(true);
|
||||
}}
|
||||
display="none"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
leftIcon={<Icon as={FiPaperclip} />}
|
||||
variant="outline"
|
||||
bg="#E5195E12"
|
||||
border="1px solid #E5195E"
|
||||
borderRadius="10px"
|
||||
size="md"
|
||||
_hover={{ bg: "#E5195E12" }}
|
||||
w="100%"
|
||||
color="#fff"
|
||||
>
|
||||
Attach file
|
||||
</Button>
|
||||
{errors.fileInput && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.fileInput.message}
|
||||
</Text>
|
||||
)}
|
||||
{fileAdded && !errors.fileInput && (
|
||||
<Text color="green.400" mt={2}>
|
||||
File added successfully!
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
|
||||
<Text mb={4} fontWeight="400" fontSize="18px">
|
||||
What is the budget of your project?
|
||||
<Box w="100%" px={"4rem"}>
|
||||
<FormLabel color="#FFFFFF">
|
||||
Tell us about your project and business challenge.
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
{...register("project_challenges", {
|
||||
required: "Project details are required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
focusBorderColor="#E5195E"
|
||||
backgroundColor="#E5195E0A"
|
||||
color="white"
|
||||
minH="65px"
|
||||
/>
|
||||
{errors.project_challenges && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.project_challenges.message}
|
||||
</Text>
|
||||
<Slider
|
||||
aria-label="budget-slider"
|
||||
min={0}
|
||||
max={500000}
|
||||
step={100000}
|
||||
value={sliderValue}
|
||||
onChange={(value) => {
|
||||
setSliderValue(value);
|
||||
setValue("budget", value);
|
||||
}}
|
||||
colorScheme="pink"
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
display="grid"
|
||||
gridTemplateColumns={{ base: "1fr", md: "repeat(2, 1fr)" }}
|
||||
gap={5}
|
||||
justifyItems="center"
|
||||
w="100%"
|
||||
px={"4rem"}
|
||||
>
|
||||
<Box w="100%">
|
||||
<FormLabel color="#FFFFFF">
|
||||
When would you like to start
|
||||
</FormLabel>
|
||||
<Select
|
||||
{...register("would_like_start", {
|
||||
required: "Start date is required",
|
||||
})}
|
||||
border="1px solid #E5195E"
|
||||
w="100%"
|
||||
color="white"
|
||||
placeholder="Select an option"
|
||||
>
|
||||
<SliderTrack bg="#999999" height="2px">
|
||||
<SliderFilledTrack bg="#E5195E" />
|
||||
</SliderTrack>
|
||||
<SliderThumb boxSize={4} bg="#E5195E"></SliderThumb>
|
||||
</Slider>
|
||||
{errors.budget && (
|
||||
<option style={{ backgroundColor: "black" }} value="option1">
|
||||
With in 15 days
|
||||
</option>
|
||||
<option style={{ backgroundColor: "black" }} value="option2">
|
||||
With in 1 Month
|
||||
</option>
|
||||
<option style={{ backgroundColor: "black" }} value="option3">
|
||||
With in 2 month
|
||||
</option>
|
||||
</Select>
|
||||
{errors.would_like_start && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.budget.message}
|
||||
{errors.would_like_start.message}
|
||||
</Text>
|
||||
)}
|
||||
<Flex justify="space-between" mt={4}>
|
||||
{[0, 100000, 200000, 300000, 400000, 500000].map(
|
||||
(val, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
top="11px"
|
||||
as="button"
|
||||
borderRadius="50%"
|
||||
w="8.34px"
|
||||
h="8.34px"
|
||||
px="0"
|
||||
marginTop="-2.8rem"
|
||||
position="relative"
|
||||
mb={"3rem"}
|
||||
bg={sliderValue >= val ? "#E5195E" : "gray.600"}
|
||||
></Box>
|
||||
<Text color="gray.400" fontSize="sm" mt={"-1.7rem"}>
|
||||
{val / 1000}k
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box
|
||||
w="100%"
|
||||
maxW="1186px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
py={4}
|
||||
|
||||
<Box w="100%">
|
||||
<FormLabel color="#FFFFFF">Attach file</FormLabel>
|
||||
<Input
|
||||
id="fileInput"
|
||||
type="file"
|
||||
{...register("fileInput", {
|
||||
validate: (file) =>
|
||||
file &&
|
||||
["image/png", "image/jpeg", "application/pdf"].includes(
|
||||
file.type
|
||||
) &&
|
||||
file.size <= 5 * 1024 * 1024
|
||||
? true
|
||||
: "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
|
||||
})}
|
||||
onChange={(e) => {
|
||||
handleChange(e);
|
||||
setFileAdded(true);
|
||||
}}
|
||||
display="none"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
leftIcon={<Icon as={FiPaperclip} />}
|
||||
variant="outline"
|
||||
bg="#E5195E12"
|
||||
border="1px solid #E5195E"
|
||||
borderRadius="10px"
|
||||
size="md"
|
||||
_hover={{ bg: "#E5195E12" }}
|
||||
w="100%"
|
||||
color="#fff"
|
||||
>
|
||||
Attach file
|
||||
</Button>
|
||||
{errors.fileInput && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.fileInput.message}
|
||||
</Text>
|
||||
)}
|
||||
{fileAdded && !errors.fileInput && (
|
||||
<Text color="green.400" mt={2}>
|
||||
File added successfully!
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
|
||||
<Text mb={4} fontWeight="400" fontSize="18px">
|
||||
What is the budget of your project?
|
||||
</Text>
|
||||
<Slider
|
||||
aria-label="budget-slider"
|
||||
min={0}
|
||||
max={500000}
|
||||
step={100000}
|
||||
value={sliderValue}
|
||||
onChange={(value) => {
|
||||
setSliderValue(value);
|
||||
setValue("budget", value);
|
||||
}}
|
||||
colorScheme="pink"
|
||||
>
|
||||
{/* <FormLabel color="#FFFFFF">
|
||||
<SliderTrack bg="#999999" height="2px">
|
||||
<SliderFilledTrack bg="#E5195E" />
|
||||
</SliderTrack>
|
||||
<SliderThumb boxSize={4} bg="#E5195E"></SliderThumb>
|
||||
</Slider>
|
||||
{errors.budget && (
|
||||
<Text color="red.400" mt={2}>
|
||||
{errors.budget.message}
|
||||
</Text>
|
||||
)}
|
||||
<Flex justify="space-between" mt={4}>
|
||||
{[0, 100000, 200000, 300000, 400000, 500000].map(
|
||||
(val, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
>
|
||||
<Box
|
||||
top="11px"
|
||||
as="button"
|
||||
borderRadius="50%"
|
||||
w="8.34px"
|
||||
h="8.34px"
|
||||
px="0"
|
||||
marginTop="-2.8rem"
|
||||
position="relative"
|
||||
mb={"3rem"}
|
||||
bg={sliderValue >= val ? "#E5195E" : "gray.600"}
|
||||
></Box>
|
||||
<Text color="gray.400" fontSize="sm" mt={"-1.7rem"}>
|
||||
{val / 1000}k
|
||||
</Text>
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
<Box
|
||||
w="100%"
|
||||
maxW="1186px"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
gap={4}
|
||||
py={4}
|
||||
>
|
||||
{/* <FormLabel color="#FFFFFF">
|
||||
Please type the letters below
|
||||
</FormLabel>
|
||||
<Textarea
|
||||
@@ -441,48 +651,50 @@ const Form = () => {
|
||||
{errors.captcha.message}
|
||||
</Text>
|
||||
)} */}
|
||||
<Box>
|
||||
<ReCAPTCHA
|
||||
ref={recaptchaRef}
|
||||
sitekey="6LdsyU4qAAAAAGlNpH3hZuf76Y1FkQjXrtiAB_3C"
|
||||
onChange={(val)=> {setCaptchaToken(val)}}
|
||||
/>
|
||||
{/* <Box
|
||||
<Box>
|
||||
<ReCAPTCHA
|
||||
ref={recaptchaRef}
|
||||
sitekey="6LdsyU4qAAAAAGlNpH3hZuf76Y1FkQjXrtiAB_3C"
|
||||
onChange={(val) => {
|
||||
setCaptchaToken(val);
|
||||
}}
|
||||
/>
|
||||
{/* <Box
|
||||
className="g-recaptcha"
|
||||
// data-sitekey="6Lel4Z4UAAAAAOa8LO1Q9mqKRUiMYl_00o5mXJrR"
|
||||
datasitekey="6Ldhwk4qAAAAAB-Xbyvp8BtmnyrBqBbpnC1skOb6"
|
||||
></Box> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box w="100%" display="flex" justifyContent="center">
|
||||
<Button
|
||||
bg="#E5195E"
|
||||
w="100%"
|
||||
maxW="912px"
|
||||
h="55px"
|
||||
color="white"
|
||||
borderRadius="0px"
|
||||
type="submit"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
isLoading={loading}
|
||||
_hover={{ bg: "#D41554" }}
|
||||
disabled={loading} // Disable button when loading
|
||||
>
|
||||
{loading ? (
|
||||
<Spinner
|
||||
thickness="4px"
|
||||
speed="0.65s"
|
||||
emptyColor="gray.200"
|
||||
color="blue.500"
|
||||
size="xl"
|
||||
/>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
</FormControl>
|
||||
<Box w="100%" display="flex" justifyContent="center">
|
||||
<Button
|
||||
bg="#E5195E"
|
||||
w="100%"
|
||||
maxW="912px"
|
||||
h="55px"
|
||||
color="white"
|
||||
borderRadius="0px"
|
||||
type="submit"
|
||||
onClick={handleSubmit(onSubmit)}
|
||||
isLoading={loading}
|
||||
_hover={{ bg: "#D41554" }}
|
||||
disabled={loading} // Disable button when loading
|
||||
>
|
||||
{loading ? (
|
||||
<Spinner
|
||||
thickness="4px"
|
||||
speed="0.65s"
|
||||
emptyColor="gray.200"
|
||||
color="blue.500"
|
||||
size="xl"
|
||||
/>
|
||||
) : (
|
||||
"Submit"
|
||||
)}
|
||||
</Button>
|
||||
</Box>
|
||||
</FormControl>
|
||||
{/* </form> */}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user