Kontaktformular für Next.js
Fügen Sie das in Next.js 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.
"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Sent. Thank you!" : "Could not send. Please try again."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Надіслано. Дякуємо!" : "Не вдалося надіслати. Спробуйте ще раз."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Wysłano. Dziękujemy!" : "Nie udało się wysłać. Spróbuj ponownie."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Gönderildi. Teşekkürler!" : "Gönderilemedi. Lütfen tekrar deneyin."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Enviado. ¡Gracias!" : "No se pudo enviar. Inténtalo de nuevo."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Envoyé. Merci !" : "Échec de l’envoi. Veuillez réessayer."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Enviado. Obrigado!" : "Não foi possível enviar. Tente novamente."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "تم الإرسال. شكرًا لك!" : "تعذّر الإرسال. يرجى المحاولة مرة أخرى."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "נשלח. תודה!" : "השליחה נכשלה. נא לנסות שוב."));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "भेज दिया गया। धन्यवाद!" : "भेजा नहीं जा सका। कृपया फिर से कोशिश करें।"));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "送信しました。ありがとうございます。" : "送信できませんでした。もう一度お試しください。"));
}
return (
<form onSubmit={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 /></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>
);
}"use client";
import { useState } from "react";
export function ContactForm() {
const [status, setStatus] = useState("");
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();
setStatus(result.message || (result.success ? "Gesendet. Vielen Dank!" : "Das Senden ist fehlgeschlagen. Bitte versuchen Sie es erneut."));
}
return (
<form onSubmit={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 /></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>
);
}