feat: rewrite ContactFormBlock to use CMS form-builder

- Use submitContactForm() from api.ts instead of raw fetch to /api/contact
- Extract formId from block.form relationship (CMS-configurable)
- Use configurable successMessage from block data
- Add pnpm-workspace.yaml for onlyBuiltDependencies

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@c2s/payload-contracts':
         specifier: github:complexcaresolutions/payload-contracts
-        version: git+https://git@github.com:complexcaresolutions/payload-contracts.git#64847594b2150bfdce09a7bd7f54ad2f52d6f2b7(react@19.2.1)
+        version: git+https://git@github.com:complexcaresolutions/payload-contracts.git#c168832a128a38ae2c4f87057bc28b1b56b60236(react@19.2.1)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -134,8 +134,8 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
-  '@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#64847594b2150bfdce09a7bd7f54ad2f52d6f2b7':
+  '@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#c168832a128a38ae2c4f87057bc28b1b56b60236':
-    resolution: {commit: 64847594b2150bfdce09a7bd7f54ad2f52d6f2b7, repo: git@github.com:complexcaresolutions/payload-contracts.git, type: git}
+    resolution: {commit: c168832a128a38ae2c4f87057bc28b1b56b60236, repo: git@github.com:complexcaresolutions/payload-contracts.git, type: git}
     version: 1.0.0
     peerDependencies:
       react: ^19.0.0
@@ -2080,7 +2080,7 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#64847594b2150bfdce09a7bd7f54ad2f52d6f2b7(react@19.2.1)':
+  '@c2s/payload-contracts@git+https://git@github.com:complexcaresolutions/payload-contracts.git#c168832a128a38ae2c4f87057bc28b1b56b60236(react@19.2.1)':
     optionalDependencies:
       react: 19.2.1
 

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - "@c2s/payload-contracts"

src/components/blocks/ContactFormBlock.tsx

@@ -5,14 +5,21 @@ import { motion } from 'framer-motion'
 import { Container } from '../ui/Container'
 import { Button } from '../ui/Button'
 import { cn } from '@/lib/utils'
+import { submitContactForm } from '@/lib/api'
 
 interface ContactFormBlockProps {
   block: Record<string, unknown>
 }
 
 export function ContactFormBlock({ block }: ContactFormBlockProps) {
-  const title = (block.title as string) || (block.headline as string) || 'Kontakt'
+  const title = (block.headline as string) || 'Kontakt'
-  const subtitle = (block.subtitle as string) || 'Haben Sie Fragen? Schreiben Sie mir.'
+  const description = (block.description as string) || 'Haben Sie Fragen? Schreiben Sie mir.'
+  const successText = (block.successMessage as string) || 'Vielen Dank! Ich werde mich schnellstmöglich bei Ihnen melden.'
+
+  // Extract formId from the form relationship (can be number or { id: number })
+  const formRef = block.form as number | { id: number } | undefined
+  const formId = typeof formRef === 'object' ? formRef?.id : formRef
+
   const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle')
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -21,22 +28,14 @@ export function ContactFormBlock({ block }: ContactFormBlockProps) {
 
     try {
       const formData = new FormData(e.currentTarget)
-      const response = await fetch('/api/contact', {
+      await submitContactForm({
-        method: 'POST',
+        name: formData.get('name') as string,
-        headers: { 'Content-Type': 'application/json' },
+        email: formData.get('email') as string,
-        body: JSON.stringify({
+        subject: formData.get('subject') as string,
-          name: formData.get('name'),
+        message: formData.get('message') as string,
-          email: formData.get('email'),
+        formId: formId || undefined,
-          subject: formData.get('subject'),
-          message: formData.get('message'),
-        }),
       })
-
-      if (response.ok) {
       setStatus('success')
-      } else {
-        setStatus('error')
-      }
     } catch {
       setStatus('error')
     }
@@ -73,13 +72,13 @@ export function ContactFormBlock({ block }: ContactFormBlockProps) {
             <h2 className="font-heading font-bold text-[1.5em] tracking-[4px] uppercase text-dark mt-0 mb-[30px]">
               {title}
             </h2>
-            <p className="text-gray-light">{subtitle}</p>
+            <p className="text-gray-light">{description}</p>
           </header>
 
           {/* Success Message */}
           {status === 'success' && (
             <div className="bg-success/10 border border-success text-success p-4 mb-8 text-center">
-              Vielen Dank! Ich werde mich schnellstmöglich bei Ihnen melden.
+              {successText}
             </div>
           )}