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

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

@@ -33,42 +33,126 @@ 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 initial={{opacity: 0, y: 10}}
key={index} whileInView={{opacity: 1, y: 0}}
initial={{opacity: 0, y: 10}} viewport={{once: true}}
whileInView={{opacity: 1, y: 0}} transition={{duration: 0.5, delay: 0.1}}
viewport={{once: true}} >
transition={{duration: 0.5, delay: index * 0.1}} <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
> Dein Name *
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}> </label>
{label} <input
</label> type="text"
<input required
type={index === 0 ? "text" : "email"} placeholder="Max Mustermann"
placeholder={index === 0 ? "Max Mustermann" : "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, border: `1px solid ${colors.inputBorder}`,
border: `1px solid ${colors.inputBorder}`, color: colors.primaryText,
color: colors.primaryText, }}
}} />
/> </motion.div>
</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"
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.3}}
>
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
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> </div>
<motion.div <motion.div
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.3}} transition={{duration: 0.5, delay: 0.6}}
> >
<label className="block font-semibold mb-1" style={{color: colors.primaryText}}> <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
Deine Nachricht 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"