125 lines
3.7 KiB
Vue
125 lines
3.7 KiB
Vue
<template>
|
|
<main>
|
|
<header class="site-header">
|
|
<NuxtLink class="brand" to="/" aria-label="FEDEO Startseite">
|
|
<img src="/Logo.png" alt="FEDEO" />
|
|
</NuxtLink>
|
|
|
|
<nav aria-label="Hauptnavigation">
|
|
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
|
|
<NuxtLink to="/#funktionen">Funktionen</NuxtLink>
|
|
<NuxtLink to="/#open-source">Open Source</NuxtLink>
|
|
<NuxtLink to="/#selfhost">Selfhost</NuxtLink>
|
|
<NuxtLink to="/#matrix">Matrix</NuxtLink>
|
|
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
|
|
<a class="login-link" href="https://app.fedeo.de">Einloggen</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="contact-page">
|
|
<div class="contact-heading">
|
|
<p class="eyebrow">Kontakt</p>
|
|
<h1>Sprich mit uns über FEDEO.</h1>
|
|
<p>
|
|
Ob Demo, Selfhosting, Integrationen oder ein konkreter Ablauf im Betrieb: Schreib uns kurz, worum es geht.
|
|
</p>
|
|
</div>
|
|
|
|
<form class="contact-form" @submit.prevent="submitForm">
|
|
<div class="form-grid">
|
|
<label>
|
|
Name
|
|
<input v-model="form.name" name="name" autocomplete="name" required>
|
|
</label>
|
|
<label>
|
|
E-Mail
|
|
<input v-model="form.email" name="email" autocomplete="email" required type="email">
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
Unternehmen
|
|
<input v-model="form.company" name="company" autocomplete="organization">
|
|
</label>
|
|
|
|
<label class="honeypot">
|
|
Website
|
|
<input v-model="form.website" name="website" tabindex="-1" autocomplete="off">
|
|
</label>
|
|
|
|
<label>
|
|
Nachricht
|
|
<textarea v-model="form.message" name="message" required rows="8"></textarea>
|
|
</label>
|
|
|
|
<label class="check-row">
|
|
<input v-model="form.privacy" type="checkbox" required>
|
|
<span>
|
|
Ich habe die <NuxtLink to="/datenschutz">Datenschutzerklärung</NuxtLink> gelesen und bin mit der Verarbeitung meiner Angaben zur Kontaktaufnahme einverstanden.
|
|
</span>
|
|
</label>
|
|
|
|
<div class="form-actions">
|
|
<button class="primary-action" :disabled="pending" type="submit">
|
|
{{ pending ? 'Wird gesendet' : 'Anfrage senden' }}
|
|
</button>
|
|
<p v-if="statusMessage" :class="['form-status', statusType]">{{ statusMessage }}</p>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<footer>
|
|
<img src="/Logo.png" alt="FEDEO" />
|
|
<div>
|
|
<NuxtLink to="/zielgruppen">Zielgruppen</NuxtLink>
|
|
<NuxtLink to="/kontakt">Kontakt</NuxtLink>
|
|
<NuxtLink to="/impressum">Impressum</NuxtLink>
|
|
<NuxtLink to="/datenschutz">Datenschutz</NuxtLink>
|
|
<a href="https://app.fedeo.de">Einloggen</a>
|
|
</div>
|
|
<p>Copyright © 2026 Federspiel Technology UG haftungsbeschränkt.</p>
|
|
</footer>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const form = reactive({
|
|
company: '',
|
|
email: '',
|
|
message: '',
|
|
name: '',
|
|
privacy: false,
|
|
website: ''
|
|
})
|
|
|
|
const pending = ref(false)
|
|
const statusMessage = ref('')
|
|
const statusType = ref<'error' | 'success'>('success')
|
|
|
|
const submitForm = async () => {
|
|
pending.value = true
|
|
statusMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/contact', {
|
|
body: form,
|
|
method: 'POST'
|
|
})
|
|
|
|
form.company = ''
|
|
form.email = ''
|
|
form.message = ''
|
|
form.name = ''
|
|
form.privacy = false
|
|
form.website = ''
|
|
statusType.value = 'success'
|
|
statusMessage.value = 'Danke, deine Nachricht wurde gesendet.'
|
|
} catch (error: any) {
|
|
statusType.value = 'error'
|
|
statusMessage.value = error?.statusMessage || 'Die Nachricht konnte gerade nicht gesendet werden.'
|
|
} finally {
|
|
pending.value = false
|
|
}
|
|
}
|
|
</script>
|