Skip to content

Commit

Permalink
contact form changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sahil4883
Sahil4883 committed Sep 12, 2024
1 parent e9fdac3 commit e49552c
Showing 1 changed file with 93 additions and 143 deletions.
236 changes: 93 additions & 143 deletions app/(All Pages)/contact/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,104 @@
import React from "react";
import { Underdevelopment } from "@/Components/Underdevelopment";
//TODO: Edit the contact form to suit our current requirement
//TODO:Connect the form with backend service
const Contact = () => {
return (
<section className="bg-gray-100">
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-x-16 gap-y-8 lg:grid-cols-5">
<div className="lg:col-span-2 lg:py-12">
<p className="max-w-xl text-lg">
At the same time, the fact that we are wholly owned and totally
independent from manufacturer and other group control gives you
confidence that we will only recommend what is right for you.
</p>

<div className="mt-8">
<a href="#" className="text-2xl font-bold text-pink-600">
{" "}
0151 475 4450{" "}
</a>

<address className="mt-2 not-italic">
282 Kevin Brook, Imogeneborough, CA 58517
</address>
</div>
</div>

<div className="rounded-lg bg-white p-8 shadow-lg lg:col-span-3 lg:p-12">
<form action="#" className="space-y-4">
<div>
<label className="sr-only" htmlFor="name">
Name
</label>
<input
className="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Name"
type="text"
id="name"
/>
</div>

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label className="sr-only" htmlFor="email">
Email
</label>
<input
className="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Email address"
type="email"
id="email"
/>
</div>

<div>
<label className="sr-only" htmlFor="phone">
Phone
</label>
<input
className="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Phone Number"
type="tel"
id="phone"
/>
</div>
</div>
"use client";
import React, { useState } from "react";

<div className="grid grid-cols-1 gap-4 text-center sm:grid-cols-3">
<div>
<label
htmlFor="Option1"
className="block w-full cursor-pointer rounded-lg border border-gray-200 p-3 text-gray-600 hover:border-black has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white"
tabIndex={0}
>
<input
className="sr-only"
id="Option1"
type="radio"
tabIndex={-1}
name="option"
/>
interface FormData {
email: string;
phone: string;
message: string;
}

<span className="text-sm"> Option 1 </span>
</label>
</div>
const ContactForm: React.FC = () => {
const [formData, setFormData] = useState<FormData>({
email: "",
phone: "",
message: "",
});

<div>
<label
htmlFor="Option2"
className="block w-full cursor-pointer rounded-lg border border-gray-200 p-3 text-gray-600 hover:border-black has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white"
tabIndex={0}
>
<input
className="sr-only"
id="Option2"
type="radio"
tabIndex={-1}
name="option"
/>
const [formSubmitted, setFormSubmitted] = useState(false);

<span className="text-sm"> Option 2 </span>
</label>
</div>
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
};

<div>
<label
htmlFor="Option3"
className="block w-full cursor-pointer rounded-lg border border-gray-200 p-3 text-gray-600 hover:border-black has-[:checked]:border-black has-[:checked]:bg-black has-[:checked]:text-white"
tabIndex={0}
>
<input
className="sr-only"
id="Option3"
type="radio"
tabIndex={-1}
name="option"
/>
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Normally, you would handle form submission here (e.g., send the data to an API)
setFormSubmitted(true);
};

<span className="text-sm"> Option 3 </span>
</label>
</div>
</div>
if (formSubmitted) {
return <div className="text-green-500 font-semibold">Form submitted</div>;
}

<div>
<label className="sr-only" htmlFor="message">
Message
</label>

<textarea
className="w-full rounded-lg border-gray-200 p-3 text-sm"
placeholder="Message"
rows={8}
id="message"
></textarea>
</div>

<div className="mt-4">
<button
type="submit"
className="inline-block w-full rounded-lg bg-black px-5 py-3 font-medium text-white sm:w-auto"
>
Send Enquiry
</button>
</div>
</form>
</div>
</div>
return (
<form
onSubmit={handleSubmit}
className="max-w-md mx-auto p-4 bg-white shadow-md rounded-lg"
>
<div className="mb-4">
<label
htmlFor="email"
className="block text-gray-700 font-semibold mb-2"
>
Email:
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="mb-4">
<label
htmlFor="phone"
className="block text-gray-700 font-semibold mb-2"
>
Phone Number:
</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
required
className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="mb-4">
<label
htmlFor="message"
className="block text-gray-700 font-semibold mb-2"
>
Message:
</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
required
className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</section>
<button
type="submit"
className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition-colors"
>
Submit
</button>
</form>
);
};

export default Contact;
export default ContactForm;

0 comments on commit e49552c

Please sign in to comment.