basiclean-webapp/components/ContactForm.tsx

"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>
  );
}