Contact Form

Kontaktformular mit Validierung und Formular-Submission.

Component HTML

<div class="max-w-2xl mx-auto">
  <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">{{title}}</h2>

  <div
    data-island="contact-form"
    data-island-props='{
      "submitUrl": "{{submitUrl}}",
      "successMessage": "{{successMessage}}"
    }'
  >
    <!-- Form Island rendert hier -->
  </div>
</div>

Island Code

// islands/contact-form.js
export default class ContactFormIsland {
  constructor(element, props = {}) {
    this.element = element;
    this.props = props;
    this.errors = {};
    this.isSubmitting = false;
    this.init();
  }

  init() {
    this.render();
    this.attachEvents();
  }

  render() {
    const { successMessage } = this.props;

    this.element.innerHTML = `
      <form class="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
        <div class="success-message hidden mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
          ${successMessage}
        </div>

        <div class="mb-6">
          <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
            Name *
          </label>
          <input
            type="text"
            id="name"
            name="name"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            required
          />
          <span class="error-name text-red-600 text-sm hidden"></span>
        </div>

        <div class="mb-6">
          <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
            E-Mail *
          </label>
          <input
            type="email"
            id="email"
            name="email"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            required
          />
          <span class="error-email text-red-600 text-sm hidden"></span>
        </div>

        <div class="mb-6">
          <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
            Nachricht *
          </label>
          <textarea
            id="message"
            name="message"
            rows="5"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            required
          ></textarea>
          <span class="error-message text-red-600 text-sm hidden"></span>
        </div>

        <button
          type="submit"
          class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <span class="submit-text">Absenden</span>
          <span class="loading-text hidden">Wird gesendet...</span>
        </button>
      </form>
    `;
  }

  attachEvents() {
    const form = this.element.querySelector('form');
    form.addEventListener('submit', (e) => this.handleSubmit(e));

    // Real-time validation
    ['name', 'email', 'message'].forEach(field => {
      const input = this.element.querySelector(`#${field}`);
      input.addEventListener('blur', () => this.validateField(field));
    });
  }

  validateField(field) {
    const input = this.element.querySelector(`#${field}`);
    const errorSpan = this.element.querySelector(`.error-${field}`);
    const value = input.value.trim();

    let error = '';

    if (!value) {
      error = 'Dieses Feld ist erforderlich';
    } else if (field === 'email' && !this.isValidEmail(value)) {
      error = 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
    } else if (field === 'message' && value.length < 10) {
      error = 'Nachricht muss mindestens 10 Zeichen lang sein';
    }

    if (error) {
      this.errors[field] = error;
      errorSpan.textContent = error;
      errorSpan.classList.remove('hidden');
      input.classList.add('border-red-500');
    } else {
      delete this.errors[field];
      errorSpan.classList.add('hidden');
      input.classList.remove('border-red-500');
    }

    return !error;
  }

  isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  async handleSubmit(e) {
    e.preventDefault();

    // Validate all fields
    const isValid = ['name', 'email', 'message'].every(field =>
      this.validateField(field)
    );

    if (!isValid || this.isSubmitting) return;

    this.isSubmitting = true;
    this.updateSubmitButton(true);

    try {
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);

      const response = await fetch(this.props.submitUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (response.ok) {
        this.showSuccess();
        e.target.reset();
      } else {
        throw new Error('Submission failed');
      }
    } catch (error) {
      alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
    } finally {
      this.isSubmitting = false;
      this.updateSubmitButton(false);
    }
  }

  updateSubmitButton(loading) {
    const submitBtn = this.element.querySelector('button[type="submit"]');
    const submitText = this.element.querySelector('.submit-text');
    const loadingText = this.element.querySelector('.loading-text');

    submitBtn.disabled = loading;
    submitText.classList.toggle('hidden', loading);
    loadingText.classList.toggle('hidden', !loading);
  }

  showSuccess() {
    const successMsg = this.element.querySelector('.success-message');
    successMsg.classList.remove('hidden');
    setTimeout(() => {
      successMsg.classList.add('hidden');
    }, 5000);
  }

  destroy() {
    // Cleanup
  }
}

<!-- islands/contact-form.svelte -->
<script>
  let { submitUrl, successMessage } = $props();

  let formData = $state({
    name: '',
    email: '',
    message: ''
  });

  let errors = $state({});
  let isSubmitting = $state(false);
  let showSuccess = $state(false);

  function validateField(field, value) {
    if (!value.trim()) {
      return 'Dieses Feld ist erforderlich';
    }

    if (field === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
    }

    if (field === 'message' && value.length < 10) {
      return 'Nachricht muss mindestens 10 Zeichen lang sein';
    }

    return '';
  }

  function handleBlur(field) {
    const error = validateField(field, formData[field]);
    if (error) {
      errors[field] = error;
    } else {
      delete errors[field];
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();

    // Validate all fields
    errors = {};
    Object.keys(formData).forEach(field => {
      const error = validateField(field, formData[field]);
      if (error) errors[field] = error;
    });

    if (Object.keys(errors).length > 0) return;

    isSubmitting = true;

    try {
      const response = await fetch(submitUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        showSuccess = true;
        formData = { name: '', email: '', message: '' };
        setTimeout(() => { showSuccess = false; }, 5000);
      }
    } catch (error) {
      alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
    } finally {
      isSubmitting = false;
    }
  }
</script>

<form onsubmit={handleSubmit} class="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
  {#if showSuccess}
    <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
      {successMessage}
    </div>
  {/if}

  <div class="mb-6">
    <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
      Name *
    </label>
    <input
      type="text"
      id="name"
      bind:value={formData.name}
      onblur={() => handleBlur('name')}
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
      class:border-red-500={errors.name}
      required
    />
    {#if errors.name}
      <span class="text-red-600 text-sm">{errors.name}</span>
    {/if}
  </div>

  <div class="mb-6">
    <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
      E-Mail *
    </label>
    <input
      type="email"
      id="email"
      bind:value={formData.email}
      onblur={() => handleBlur('email')}
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
      class:border-red-500={errors.email}
      required
    />
    {#if errors.email}
      <span class="text-red-600 text-sm">{errors.email}</span>
    {/if}
  </div>

  <div class="mb-6">
    <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
      Nachricht *
    </label>
    <textarea
      id="message"
      bind:value={formData.message}
      onblur={() => handleBlur('message')}
      rows="5"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
      class:border-red-500={errors.message}
      required
    ></textarea>
    {#if errors.message}
      <span class="text-red-600 text-sm">{errors.message}</span>
    {/if}
  </div>

  <button
    type="submit"
    disabled={isSubmitting}
    class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
  >
    {isSubmitting ? 'Wird gesendet...' : 'Absenden'}
  </button>
</form>

// islands/contact-form.js
import { mount, unmount } from 'svelte';
import Component from './contact-form.svelte';

export default class ContactFormIsland {
  constructor(element, props = {}) {
    this.component = mount(Component, {
      target: element,
      props
    });
  }

  destroy() {
    if (this.component) {
      unmount(this.component);
    }
  }
}

// islands/contact-form.jsx
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

function ContactFormComponent({ submitUrl, successMessage }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const validateField = (field, value) => {
    if (!value.trim()) {
      return 'Dieses Feld ist erforderlich';
    }

    if (field === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
    }

    if (field === 'message' && value.length < 10) {
      return 'Nachricht muss mindestens 10 Zeichen lang sein';
    }

    return '';
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleBlur = (field) => {
    const error = validateField(field, formData[field]);
    setErrors(prev => ({
      ...prev,
      [field]: error
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Validate all fields
    const newErrors = {};
    Object.keys(formData).forEach(field => {
      const error = validateField(field, formData[field]);
      if (error) newErrors[field] = error;
    });

    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) return;

    setIsSubmitting(true);

    try {
      const response = await fetch(submitUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        setShowSuccess(true);
        setFormData({ name: '', email: '', message: '' });
        setTimeout(() => setShowSuccess(false), 5000);
      }
    } catch (error) {
      alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
      {showSuccess && (
        <div className="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
          {successMessage}
        </div>
      )}

      <div className="mb-6">
        <label htmlFor="name" className="block text-sm font-semibold text-gray-700 mb-2">
          Name *
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
          onBlur={() => handleBlur('name')}
          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
            errors.name ? 'border-red-500' : 'border-gray-300'
          }`}
          required
        />
        {errors.name && <span className="text-red-600 text-sm">{errors.name}</span>}
      </div>

      <div className="mb-6">
        <label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
          E-Mail *
        </label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          onBlur={() => handleBlur('email')}
          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
            errors.email ? 'border-red-500' : 'border-gray-300'
          }`}
          required
        />
        {errors.email && <span className="text-red-600 text-sm">{errors.email}</span>}
      </div>

      <div className="mb-6">
        <label htmlFor="message" className="block text-sm font-semibold text-gray-700 mb-2">
          Nachricht *
        </label>
        <textarea
          id="message"
          name="message"
          value={formData.message}
          onChange={handleChange}
          onBlur={() => handleBlur('message')}
          rows="5"
          className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
            errors.message ? 'border-red-500' : 'border-gray-300'
          }`}
          required
        ></textarea>
        {errors.message && <span className="text-red-600 text-sm">{errors.message}</span>}
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
      >
        {isSubmitting ? 'Wird gesendet...' : 'Absenden'}
      </button>
    </form>
  );
}

export default class ContactFormIsland {
  constructor(element, props = {}) {
    this.root = createRoot(element);
    this.root.render(<ContactFormComponent {...props} />);
  }

  destroy() {
    this.root?.unmount();
  }
}

// islands/contact-form.jsx
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { render } from 'preact';

function ContactFormComponent({ submitUrl, successMessage }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const validateField = (field, value) => {
    if (!value.trim()) {
      return 'Dieses Feld ist erforderlich';
    }

    if (field === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
    }

    if (field === 'message' && value.length < 10) {
      return 'Nachricht muss mindestens 10 Zeichen lang sein';
    }

    return '';
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleBlur = (field) => {
    const error = validateField(field, formData[field]);
    setErrors(prev => ({ ...prev, [field]: error }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const newErrors = {};
    Object.keys(formData).forEach(field => {
      const error = validateField(field, formData[field]);
      if (error) newErrors[field] = error;
    });

    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) return;

    setIsSubmitting(true);

    try {
      const response = await fetch(submitUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        setShowSuccess(true);
        setFormData({ name: '', email: '', message: '' });
        setTimeout(() => setShowSuccess(false), 5000);
      }
    } catch (error) {
      alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} class="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
      {showSuccess && (
        <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
          {successMessage}
        </div>
      )}

      <div class="mb-6">
        <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
          Name *
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onInput={handleChange}
          onBlur={() => handleBlur('name')}
          class={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
            errors.name ? 'border-red-500' : 'border-gray-300'
          }`}
          required
        />
        {errors.name && <span class="text-red-600 text-sm">{errors.name}</span>}
      </div>

      <div class="mb-6">
        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
          E-Mail *
        </label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onInput={handleChange}
          onBlur={() => handleBlur('email')}
          class={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
            errors.email ? 'border-red-500' : 'border-gray-300'
          }`}
          required
        />
        {errors.email && <span class="text-red-600 text-sm">{errors.email}</span>}
      </div>

      <div class="mb-6">
        <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
          Nachricht *
        </label>
        <textarea
          id="message"
          name="message"
          value={formData.message}
          onInput={handleChange}
          onBlur={() => handleBlur('message')}
          rows="5"
          class={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
            errors.message ? 'border-red-500' : 'border-gray-300'
          }`}
          required
        ></textarea>
        {errors.message && <span class="text-red-600 text-sm">{errors.message}</span>}
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
      >
        {isSubmitting ? 'Wird gesendet...' : 'Absenden'}
      </button>
    </form>
  );
}

export default class ContactFormIsland {
  constructor(element, props = {}) {
    this.element = element;
    render(<ContactFormComponent {...props} />, element);
  }

  destroy() {
    render(null, this.element);
  }
}

// islands/contact-form.js
import { createApp } from 'vue';

const ContactFormComponent = {
  props: {
    submitUrl: String,
    successMessage: String
  },
  data() {
    return {
      formData: {
        name: '',
        email: '',
        message: ''
      },
      errors: {},
      isSubmitting: false,
      showSuccess: false
    };
  },
  methods: {
    validateField(field, value) {
      if (!value.trim()) {
        return 'Dieses Feld ist erforderlich';
      }

      if (field === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        return 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
      }

      if (field === 'message' && value.length < 10) {
        return 'Nachricht muss mindestens 10 Zeichen lang sein';
      }

      return '';
    },
    handleBlur(field) {
      const error = this.validateField(field, this.formData[field]);
      if (error) {
        this.errors[field] = error;
      } else {
        delete this.errors[field];
      }
    },
    async handleSubmit() {
      // Validate all fields
      this.errors = {};
      Object.keys(this.formData).forEach(field => {
        const error = this.validateField(field, this.formData[field]);
        if (error) this.errors[field] = error;
      });

      if (Object.keys(this.errors).length > 0) return;

      this.isSubmitting = true;

      try {
        const response = await fetch(this.submitUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.formData)
        });

        if (response.ok) {
          this.showSuccess = true;
          this.formData = { name: '', email: '', message: '' };
          setTimeout(() => { this.showSuccess = false; }, 5000);
        }
      } catch (error) {
        alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
      } finally {
        this.isSubmitting = false;
      }
    }
  },
  template: `
    <form @submit.prevent="handleSubmit" class="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
      <div v-if="showSuccess" class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
        {{ successMessage }}
      </div>

      <div class="mb-6">
        <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
          Name *
        </label>
        <input
          type="text"
          id="name"
          v-model="formData.name"
          @blur="handleBlur('name')"
          :class="['w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent', errors.name ? 'border-red-500' : 'border-gray-300']"
          required
        />
        <span v-if="errors.name" class="text-red-600 text-sm">{{ errors.name }}</span>
      </div>

      <div class="mb-6">
        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
          E-Mail *
        </label>
        <input
          type="email"
          id="email"
          v-model="formData.email"
          @blur="handleBlur('email')"
          :class="['w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent', errors.email ? 'border-red-500' : 'border-gray-300']"
          required
        />
        <span v-if="errors.email" class="text-red-600 text-sm">{{ errors.email }}</span>
      </div>

      <div class="mb-6">
        <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
          Nachricht *
        </label>
        <textarea
          id="message"
          v-model="formData.message"
          @blur="handleBlur('message')"
          rows="5"
          :class="['w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent', errors.message ? 'border-red-500' : 'border-gray-300']"
          required
        ></textarea>
        <span v-if="errors.message" class="text-red-600 text-sm">{{ errors.message }}</span>
      </div>

      <button
        type="submit"
        :disabled="isSubmitting"
        class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
      >
        {{ isSubmitting ? 'Wird gesendet...' : 'Absenden' }}
      </button>
    </form>
  `
};

export default class ContactFormIsland {
  constructor(element, props = {}) {
    this.app = createApp(ContactFormComponent, props);
    this.app.mount(element);
  }

  destroy() {
    this.app?.unmount();
  }
}

// islands/contact-form.js
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('contact-form-component')
class ContactFormComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  @property({ type: String })
  submitUrl = '';

  @property({ type: String })
  successMessage = '';

  @state()
  formData = { name: '', email: '', message: '' };

  @state()
  errors = {};

  @state()
  isSubmitting = false;

  @state()
  showSuccess = false;

  validateField(field, value) {
    if (!value.trim()) {
      return 'Dieses Feld ist erforderlich';
    }

    if (field === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
    }

    if (field === 'message' && value.length < 10) {
      return 'Nachricht muss mindestens 10 Zeichen lang sein';
    }

    return '';
  }

  handleInput(field, e) {
    this.formData = { ...this.formData, [field]: e.target.value };
  }

  handleBlur(field) {
    const error = this.validateField(field, this.formData[field]);
    this.errors = { ...this.errors, [field]: error };
  }

  async handleSubmit(e) {
    e.preventDefault();

    const newErrors = {};
    Object.keys(this.formData).forEach(field => {
      const error = this.validateField(field, this.formData[field]);
      if (error) newErrors[field] = error;
    });

    this.errors = newErrors;
    if (Object.keys(newErrors).length > 0) return;

    this.isSubmitting = true;

    try {
      const response = await fetch(this.submitUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(this.formData)
      });

      if (response.ok) {
        this.showSuccess = true;
        this.formData = { name: '', email: '', message: '' };
        setTimeout(() => { this.showSuccess = false; }, 5000);
      }
    } catch (error) {
      alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
    } finally {
      this.isSubmitting = false;
    }
  }

  render() {
    return html`
      <form @submit=${this.handleSubmit} class="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
        ${this.showSuccess ? html`
          <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
            ${this.successMessage}
          </div>
        ` : ''}

        <div class="mb-6">
          <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
            Name *
          </label>
          <input
            type="text"
            id="name"
            .value=${this.formData.name}
            @input=${(e) => this.handleInput('name', e)}
            @blur=${() => this.handleBlur('name')}
            class="w-full px-4 py-2 border ${this.errors.name ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-blue-500"
            required
          />
          ${this.errors.name ? html`<span class="text-red-600 text-sm">${this.errors.name}</span>` : ''}
        </div>

        <div class="mb-6">
          <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
            E-Mail *
          </label>
          <input
            type="email"
            id="email"
            .value=${this.formData.email}
            @input=${(e) => this.handleInput('email', e)}
            @blur=${() => this.handleBlur('email')}
            class="w-full px-4 py-2 border ${this.errors.email ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-blue-500"
            required
          />
          ${this.errors.email ? html`<span class="text-red-600 text-sm">${this.errors.email}</span>` : ''}
        </div>

        <div class="mb-6">
          <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
            Nachricht *
          </label>
          <textarea
            id="message"
            .value=${this.formData.message}
            @input=${(e) => this.handleInput('message', e)}
            @blur=${() => this.handleBlur('message')}
            rows="5"
            class="w-full px-4 py-2 border ${this.errors.message ? 'border-red-500' : 'border-gray-300'} rounded-lg focus:ring-2 focus:ring-blue-500"
            required
          ></textarea>
          ${this.errors.message ? html`<span class="text-red-600 text-sm">${this.errors.message}</span>` : ''}
        </div>

        <button
          type="submit"
          ?disabled=${this.isSubmitting}
          class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
        >
          ${this.isSubmitting ? 'Wird gesendet...' : 'Absenden'}
        </button>
      </form>
    `;
  }
}

export default class ContactFormIsland {
  constructor(element, props = {}) {
    const component = document.createElement('contact-form-component');
    component.submitUrl = props.submitUrl;
    component.successMessage = props.successMessage;
    element.appendChild(component);
    this.element = element;
  }

  destroy() {
    this.element.innerHTML = '';
  }
}

// islands/contact-form.js
export default class ContactFormIsland {
  constructor(element, props = {}) {
    element.innerHTML = `
      <div
        x-data="{
          formData: { name: '', email: '', message: '' },
          errors: {},
          isSubmitting: false,
          showSuccess: false,
          submitUrl: '${props.submitUrl}',
          successMessage: '${props.successMessage}',

          validateField(field, value) {
            if (!value.trim()) {
              return 'Dieses Feld ist erforderlich';
            }
            if (field === 'email' && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {
              return 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
            }
            if (field === 'message' && value.length < 10) {
              return 'Nachricht muss mindestens 10 Zeichen lang sein';
            }
            return '';
          },

          handleBlur(field) {
            const error = this.validateField(field, this.formData[field]);
            if (error) {
              this.errors[field] = error;
            } else {
              delete this.errors[field];
            }
          },

          async handleSubmit() {
            this.errors = {};
            Object.keys(this.formData).forEach(field => {
              const error = this.validateField(field, this.formData[field]);
              if (error) this.errors[field] = error;
            });

            if (Object.keys(this.errors).length > 0) return;

            this.isSubmitting = true;

            try {
              const response = await fetch(this.submitUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(this.formData)
              });

              if (response.ok) {
                this.showSuccess = true;
                this.formData = { name: '', email: '', message: '' };
                setTimeout(() => { this.showSuccess = false; }, 5000);
              }
            } catch (error) {
              alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.');
            } finally {
              this.isSubmitting = false;
            }
          }
        }"
      >
        <form @submit.prevent="handleSubmit" class="bg-white p-8 rounded-lg shadow-lg border border-gray-200">
          <div x-show="showSuccess" class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
            <span x-text="successMessage"></span>
          </div>

          <div class="mb-6">
            <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">
              Name *
            </label>
            <input
              type="text"
              id="name"
              x-model="formData.name"
              @blur="handleBlur('name')"
              :class="'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ' + (errors.name ? 'border-red-500' : 'border-gray-300')"
              required
            />
            <span x-show="errors.name" x-text="errors.name" class="text-red-600 text-sm"></span>
          </div>

          <div class="mb-6">
            <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
              E-Mail *
            </label>
            <input
              type="email"
              id="email"
              x-model="formData.email"
              @blur="handleBlur('email')"
              :class="'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ' + (errors.email ? 'border-red-500' : 'border-gray-300')"
              required
            />
            <span x-show="errors.email" x-text="errors.email" class="text-red-600 text-sm"></span>
          </div>

          <div class="mb-6">
            <label for="message" class="block text-sm font-semibold text-gray-700 mb-2">
              Nachricht *
            </label>
            <textarea
              id="message"
              x-model="formData.message"
              @blur="handleBlur('message')"
              rows="5"
              :class="'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ' + (errors.message ? 'border-red-500' : 'border-gray-300')"
              required
            ></textarea>
            <span x-show="errors.message" x-text="errors.message" class="text-red-600 text-sm"></span>
          </div>

          <button
            type="submit"
            :disabled="isSubmitting"
            class="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
          >
            <span x-text="isSubmitting ? 'Wird gesendet...' : 'Absenden'"></span>
          </button>
        </form>
      </div>
    `;
  }

  destroy() {
    // Alpine cleanup happens automatically
  }
}

Was du lernst

• Form Handling: Formulardaten verwalten und absenden
• Validation: Real-time Validierung mit Error Messages
• Async Operations: API-Calls mit fetch
• Loading States: UI-Feedback während async Operations
• Success Handling: Success Messages anzeigen