Gitlab-Migration/rhein-sw-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add required fields and optional inputs in contact form

Browse Source
This commit is contained in:
Thatsaphorn
2025-04-21 01:33:18 +02:00
parent 14de4c8d88
commit 21e83d6ee7
1 changed files with 110 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
components/Contact/Section/ContactFormSection.tsx
View File

@@ -33,20 +33,41 @@ const ContactFormSection = () => {
<form className="space-y-6"> <form className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{["Dein Name", "Deine E-Mail"].map((label, index) => (
<motion.div <motion.div
key={index}
initial={{opacity: 0, y: 10}} initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: index * 0.1}} transition={{duration: 0.5, delay: 0.1}}
> >
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}> <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
{label} Dein Name *
</label> </label>
<input <input
type={index === 0 ? "text" : "email"} type="text"
placeholder={index === 0 ? "Max Mustermann" : "max@example.com"} required
placeholder="Max Mustermann"
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
style={{
backgroundColor: colors.inputFieldBg,
border: `1px solid ${colors.inputBorder}`,
color: colors.primaryText,
}}
/>
</motion.div>
<motion.div
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.2}}
>
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Deine E-Mail *
</label>
<input
type="email"
required
placeholder="max@example.com"
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition" className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
style={{ style={{
backgroundColor: colors.inputFieldBg, backgroundColor: colors.inputFieldBg,
@@ -55,8 +76,6 @@ const ContactFormSection = () => {
}} }}
/> />
</motion.div> </motion.div>
))}
</div>
<motion.div <motion.div
initial={{opacity: 0, y: 10}} initial={{opacity: 0, y: 10}}
@@ -65,10 +84,75 @@ const ContactFormSection = () => {
transition={{duration: 0.5, delay: 0.3}} transition={{duration: 0.5, delay: 0.3}}
> >
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}> <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Deine Nachricht Firmenname (optional)
</label>
<input
type="text"
placeholder="Mustermann GmbH"
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
style={{
backgroundColor: colors.inputFieldBg,
border: `1px solid ${colors.inputBorder}`,
color: colors.primaryText,
}}
/>
</motion.div>
<motion.div
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.4}}
>
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Telefonnummer (optional)
</label>
<input
type="tel"
placeholder="+49 123 456789"
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
style={{
backgroundColor: colors.inputFieldBg,
border: `1px solid ${colors.inputBorder}`,
color: colors.primaryText,
}}
/>
</motion.div>
<motion.div
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.5}}
>
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Webseite (optional)
</label>
<input
type="url"
placeholder="https://deinewebseite.de"
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
style={{
backgroundColor: colors.inputFieldBg,
border: `1px solid ${colors.inputBorder}`,
color: colors.primaryText,
}}
/>
</motion.div>
</div>
<motion.div
initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
transition={{duration: 0.5, delay: 0.6}}
>
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Deine Nachricht *
</label> </label>
<textarea <textarea
rows={4} rows={4}
required
placeholder="Worum geht es?" placeholder="Worum geht es?"
className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition" className="w-full p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
style={{ style={{
@@ -84,7 +168,7 @@ const ContactFormSection = () => {
initial={{opacity: 0, y: 10}} initial={{opacity: 0, y: 10}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.4}} transition={{duration: 0.5, delay: 0.7}}
> >
<button <button
type="submit" type="submit"