Formular-Erfassung

{
  "success": true,
  "conversation_id": "550e8400-e29b-41d4-a716-446655440000",
  "contact_id": "6ba7b810-9dad-11d1-80b4-00c04fd430c8"
}

{
  "success": false,
  "error": "Validation failed",
  "field_errors": {
    "email": "Invalid email format",
    "phone": "Invalid phone number format"
  }
}

{
  "success": false,
  "error": "Origin not allowed"
}

<form id="kontakt-formular">
  <input type="text" name="name" placeholder="Dein Name" required />
  <input type="email" name="email" placeholder="Deine E-Mail" required />
  <textarea name="message" placeholder="Deine Nachricht" required></textarea>
  <button type="submit">Senden</button>
</form>

<script>
  document.getElementById('kontakt-formular').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target).entries());

    const res = await fetch('https://api.zickt.com/v1/forms/DEIN_CHANNEL_KEY/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (res.ok) {
      e.target.reset();
      alert('Danke! Wir melden uns bald bei dir.');
    }
  });
</script>

import { useState } from 'react';

export function KontaktFormular() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('sending');
    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch('https://api.zickt.com/v1/forms/DEIN_CHANNEL_KEY/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    setStatus(res.ok ? 'sent' : 'idle');
  };

  if (status === 'sent') return <p>Danke! Wir melden uns bald bei dir.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="E-Mail" required />
      <textarea name="message" placeholder="Nachricht" required />
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Wird gesendet…' : 'Senden'}
      </button>
    </form>
  );
}

'use client';

import { useState } from 'react';

export default function KontaktSeite() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent'>('idle');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('sending');
    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch('https://api.zickt.com/v1/forms/DEIN_CHANNEL_KEY/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    setStatus(res.ok ? 'sent' : 'idle');
  };

  if (status === 'sent') return <p>Danke! Wir melden uns bald bei dir.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="E-Mail" required />
      <textarea name="message" placeholder="Nachricht" required />
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Wird gesendet…' : 'Senden'}
      </button>
    </form>
  );
}

<script setup lang="ts">
import { ref } from 'vue';

const status = ref<'idle' | 'sending' | 'sent'>('idle');

const handleSubmit = async (e: Event) => {
  status.value = 'sending';
  const data = Object.fromEntries(new FormData(e.target as HTMLFormElement));

  const res = await fetch('https://api.zickt.com/v1/forms/DEIN_CHANNEL_KEY/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });

  status.value = res.ok ? 'sent' : 'idle';
};
</script>

<template>
  <p v-if="status === 'sent'">Danke! Wir melden uns bald bei dir.</p>
  <form v-else @submit.prevent="handleSubmit">
    <input name="name" placeholder="Name" required />
    <input name="email" type="email" placeholder="E-Mail" required />
    <textarea name="message" placeholder="Nachricht" required />
    <button type="submit" :disabled="status === 'sending'">
      {{ status === 'sending' ? 'Wird gesendet…' : 'Senden' }}
    </button>
  </form>
</template>