Kontaktformular für Vue
Fügen Sie das in Vue ein. Einsendungen gehen an Formgong. Keine Datenbank, kein Resend.
KI-Lead-Scoring ist in jedem Tarif kostenlos, bis zu 100 bewertete Einsendungen pro Monat. Aktivieren Sie es für das Formular. Heiße Anfragen und wahrscheinlicher Spam erscheinen in Telegram, per E-Mail und im Posteingang.
<script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Sent. Thank you!" : "Could not send. Please try again.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Name <input name="name" placeholder="Your name" required></label>
<label>Email <input name="email" type="email" placeholder="you@example.com" required></label>
<label>Message <textarea name="message" placeholder="How can we help?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Send</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "uk", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Надіслано. Дякуємо!" : "Не вдалося надіслати. Спробуйте ще раз.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Ім’я <input name="name" placeholder="Ваше ім’я" required></label>
<label>Email <input name="email" type="email" placeholder="you@example.com" required></label>
<label>Повідомлення <textarea name="message" placeholder="Чим ми можемо допомогти?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Надіслати</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "pl", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Wysłano. Dziękujemy!" : "Nie udało się wysłać. Spróbuj ponownie.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Imię <input name="name" placeholder="Twoje imię" required></label>
<label>E-mail <input name="email" type="email" placeholder="ty@example.com" required></label>
<label>Wiadomość <textarea name="message" placeholder="W czym możemy pomóc?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Wyślij</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "tr", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Gönderildi. Teşekkürler!" : "Gönderilemedi. Lütfen tekrar deneyin.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Ad <input name="name" placeholder="Adınız" required></label>
<label>E-posta <input name="email" type="email" placeholder="siz@ornek.com" required></label>
<label>Mesaj <textarea name="message" placeholder="Size nasıl yardımcı olabiliriz?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Gönder</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "es", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Enviado. ¡Gracias!" : "No se pudo enviar. Inténtalo de nuevo.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Nombre <input name="name" placeholder="Tu nombre" required></label>
<label>Correo electrónico <input name="email" type="email" placeholder="tu@ejemplo.com" required></label>
<label>Mensaje <textarea name="message" placeholder="¿En qué podemos ayudarte?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Enviar</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "fr", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Envoyé. Merci !" : "Échec de l’envoi. Veuillez réessayer.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Nom <input name="name" placeholder="Votre nom" required></label>
<label>E-mail <input name="email" type="email" placeholder="vous@exemple.com" required></label>
<label>Message <textarea name="message" placeholder="Comment pouvons-nous vous aider ?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Envoyer</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "pt", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Enviado. Obrigado!" : "Não foi possível enviar. Tente novamente.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Nome <input name="name" placeholder="O seu nome" required></label>
<label>E-mail <input name="email" type="email" placeholder="voce@exemplo.com" required></label>
<label>Mensagem <textarea name="message" placeholder="Como podemos ajudar?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Enviar</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "ar", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "تم الإرسال. شكرًا لك!" : "تعذّر الإرسال. يرجى المحاولة مرة أخرى.");
}
</script>
<template>
<form @submit="onSubmit">
<label>الاسم <input name="name" placeholder="اسمك" required></label>
<label>البريد الإلكتروني <input name="email" type="email" placeholder="you@example.com" required></label>
<label>الرسالة <textarea name="message" placeholder="كيف يمكننا مساعدتك؟" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">إرسال</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "he", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "נשלח. תודה!" : "השליחה נכשלה. נא לנסות שוב.");
}
</script>
<template>
<form @submit="onSubmit">
<label>שם <input name="name" placeholder="השם שלך" required></label>
<label>אימייל <input name="email" type="email" placeholder="you@example.com" required></label>
<label>הודעה <textarea name="message" placeholder="איך נוכל לעזור?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">שליחה</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "hi", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।");
}
</script>
<template>
<form @submit="onSubmit">
<label>नाम <input name="name" placeholder="आपका नाम" required></label>
<label>ईमेल <input name="email" type="email" placeholder="you@example.com" required></label>
<label>संदेश <textarea name="message" placeholder="हम आपकी कैसे मदद कर सकते हैं?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">भेजें</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "ja", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "送信しました。ありがとうございます。" : "送信できませんでした。もう一度お試しください。");
}
</script>
<template>
<form @submit="onSubmit">
<label>お名前 <input name="name" placeholder="山田 太郎" required></label>
<label>メールアドレス <input name="email" type="email" placeholder="you@example.com" required></label>
<label>メッセージ <textarea name="message" placeholder="ご用件をご記入ください" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">送信</button>
<p role="status">{{ status }}</p>
</form>
</template><script setup>
import { ref } from "vue";
const status = ref("");
async function onSubmit(event) {
event.preventDefault();
const fields = Object.fromEntries(new FormData(event.currentTarget));
const response = await fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: JSON.stringify({ _lang: "de", ...fields, access_key: "fk_your_access_key" }),
});
const result = await response.json();
status.value = result.message || (result.success ? "Gesendet. Vielen Dank!" : "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut.");
}
</script>
<template>
<form @submit="onSubmit">
<label>Name <input name="name" placeholder="Ihr Name" required></label>
<label>E-Mail <input name="email" type="email" placeholder="name@beispiel.de" required></label>
<label>Nachricht <textarea name="message" placeholder="Wie können wir Ihnen helfen?" required></textarea></label>
<div aria-hidden="true" style="position:absolute;left:-10000px">
<input name="botcheck" tabindex="-1" autocomplete="off">
</div>
<button type="submit">Senden</button>
<p role="status">{{ status }}</p>
</form>
</template>