update
This commit is contained in:
Engin committed
1 parent
cc2b84dcad
commit
3bda7d6eb6
28 files changed
+2330
-49
No files matched your search
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { useActionState, useMemo, useState } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
import {
|
||||
sendContactMessage,
|
||||
type ContactFormState,
|
||||
} from "@/app/kontakt/actions";
|
||||
import styles from "./ContactForm.module.css";
|
||||
|
||||
const initialState: ContactFormState = { success: false };
|
||||
|
||||
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const PHONE_REGEX = /^[0-9+\-/() ]{6,20}$/;
|
||||
|
||||
function SubmitButton({ disabled }: { disabled: boolean }) {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn--filled"
|
||||
disabled={disabled || pending}
|
||||
>
|
||||
{pending ? "Wird gesendet…" : "Nachricht senden"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ContactForm() {
|
||||
const [state, formAction] = useActionState(sendContactMessage, initialState);
|
||||
|
||||
const [values, setValues] = useState({
|
||||
unternehmen: "",
|
||||
vorname: "",
|
||||
nachname: "",
|
||||
email: "",
|
||||
telefon: "",
|
||||
nachricht: "",
|
||||
datenschutz: false,
|
||||
});
|
||||
|
||||
const isValid = useMemo(() => {
|
||||
return (
|
||||
values.vorname.trim().length > 0 &&
|
||||
values.nachname.trim().length > 0 &&
|
||||
EMAIL_REGEX.test(values.email.trim()) &&
|
||||
PHONE_REGEX.test(values.telefon.trim()) &&
|
||||
values.nachricht.trim().length > 0 &&
|
||||
values.datenschutz
|
||||
);
|
||||
}, [values]);
|
||||
|
||||
if (state.success) {
|
||||
return (
|
||||
<div className={styles.successBox} role="status">
|
||||
<p>
|
||||
Vielen Dank für Ihre Nachricht! Wir melden uns schnellstmöglich bei
|
||||
Ihnen zurück.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form action={formAction} className={styles.form} noValidate>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="unternehmen" className={styles.label}>
|
||||
Unternehmen <span className={styles.optional}>(optional)</span>
|
||||
</label>
|
||||
<input
|
||||
id="unternehmen"
|
||||
name="unternehmen"
|
||||
type="text"
|
||||
className={styles.input}
|
||||
value={values.unternehmen}
|
||||
onChange={(e) =>
|
||||
setValues((v) => ({ ...v, unternehmen: e.target.value }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.row}>
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="vorname" className={styles.label}>
|
||||
Vorname <span className={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="vorname"
|
||||
name="vorname"
|
||||
type="text"
|
||||
required
|
||||
className={styles.input}
|
||||
value={values.vorname}
|
||||
onChange={(e) =>
|
||||
setValues((v) => ({ ...v, vorname: e.target.value }))
|
||||
}
|
||||
/>
|
||||
{state.fieldErrors?.vorname && (
|
||||
<p className={styles.errorText}>{state.fieldErrors.vorname}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="nachname" className={styles.label}>
|
||||
Nachname <span className={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="nachname"
|
||||
name="nachname"
|
||||
type="text"
|
||||
required
|
||||
className={styles.input}
|
||||
value={values.nachname}
|
||||
onChange={(e) =>
|
||||
setValues((v) => ({ ...v, nachname: e.target.value }))
|
||||
}
|
||||
/>
|
||||
{state.fieldErrors?.nachname && (
|
||||
<p className={styles.errorText}>{state.fieldErrors.nachname}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="email" className={styles.label}>
|
||||
E-Mail <span className={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
className={styles.input}
|
||||
value={values.email}
|
||||
onChange={(e) => setValues((v) => ({ ...v, email: e.target.value }))}
|
||||
/>
|
||||
{state.fieldErrors?.email && (
|
||||
<p className={styles.errorText}>{state.fieldErrors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="telefon" className={styles.label}>
|
||||
Telefonnummer <span className={styles.required}>*</span>
|
||||
</label>
|
||||
<input
|
||||
id="telefon"
|
||||
name="telefon"
|
||||
type="tel"
|
||||
required
|
||||
className={styles.input}
|
||||
value={values.telefon}
|
||||
onChange={(e) =>
|
||||
setValues((v) => ({ ...v, telefon: e.target.value }))
|
||||
}
|
||||
/>
|
||||
{state.fieldErrors?.telefon && (
|
||||
<p className={styles.errorText}>{state.fieldErrors.telefon}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.field}>
|
||||
<label htmlFor="nachricht" className={styles.label}>
|
||||
Nachricht <span className={styles.required}>*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="nachricht"
|
||||
name="nachricht"
|
||||
required
|
||||
rows={6}
|
||||
className={styles.textarea}
|
||||
value={values.nachricht}
|
||||
onChange={(e) =>
|
||||
setValues((v) => ({ ...v, nachricht: e.target.value }))
|
||||
}
|
||||
/>
|
||||
{state.fieldErrors?.nachricht && (
|
||||
<p className={styles.errorText}>{state.fieldErrors.nachricht}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.checkboxField}>
|
||||
<input
|
||||
id="datenschutz"
|
||||
name="datenschutz"
|
||||
type="checkbox"
|
||||
required
|
||||
className={styles.checkbox}
|
||||
checked={values.datenschutz}
|
||||
onChange={(e) =>
|
||||
setValues((v) => ({ ...v, datenschutz: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
<label htmlFor="datenschutz" className={styles.checkboxLabel}>
|
||||
Ich habe die{" "}
|
||||
<a href="/datenschutz" target="_blank" rel="noopener noreferrer">
|
||||
Datenschutzhinweise
|
||||
</a>{" "}
|
||||
gelesen und stimme der Verarbeitung meiner Daten zu.{" "}
|
||||
<span className={styles.required}>*</span>
|
||||
</label>
|
||||
</div>
|
||||
{state.fieldErrors?.datenschutz && (
|
||||
<p className={styles.errorText}>{state.fieldErrors.datenschutz}</p>
|
||||
)}
|
||||
|
||||
{state.error && <p className={styles.errorText}>{state.error}</p>}
|
||||
|
||||
<SubmitButton disabled={!isValid} />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user