Formulaire de demande d’assistance
Les clients décrivent le problème avec assez de détails pour le régler dès la première réponse.
Vous utilisez Tilda ? Collez le code dans un bloc T123 (offre payante) ou utilisez le webhook sans code.
Activez les pièces jointes dans les paramètres et installez Turnstile. Les PDF, JPEG et PNG de 5 MiB maximum sont stockés en privé ; le téléchargement nécessite la connexion du propriétaire.
À quoi sert ce formulaire
La plupart des échanges avec le support prennent trois e-mails parce que le premier message est incomplet. Ce formulaire demande le sujet, l’urgence et les étapes qui mènent au problème, pour que la première réponse puisse être la bonne.
Une capture d’écran explique souvent plus qu’un paragraphe. Le modèle accepte une image ou un PDF jusqu’à 5 Mio, ou un lien si le fichier est plus volumineux.
Les champs qui comptent
- Sujet
- Compte, facturation, un bug ou une question. Oriente la demande vers la bonne personne.
- Urgence
- Permet de répondre d’abord aux clients bloqués.
- Étapes menant au problème
- Obligatoire. Les étapes permettent de reproduire le problème au lieu de deviner.
- Capture d’écran
- Un fichier jusqu’à 5 Mio, ou un lien. Montre ce que voit le client.
Aperçu
Code du formulaire
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formulaire de demande d’assistance</title>
<style>
body { font-family: "Segoe UI", sans-serif; color: #12263a; margin: 0; background: #fff; }
main { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
h1 { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 18px; margin: 18px 0 0; }
p { line-height: 1.5; }
form { display: grid; gap: 14px; position: relative; }
.field { display: grid; gap: 6px; }
label span, .check span { font-size: 14px; }
input, select, textarea { font: inherit; color: inherit; padding: 10px 12px; border: 1px solid #b4bdce; border-radius: 8px; width: 100%; box-sizing: border-box; background: #fff; }
textarea { min-height: 96px; }
.check { display: flex; gap: 8px; align-items: flex-start; }
.check input { width: auto; margin-top: 4px; }
button { background: #3c4ad8; color: #fff; border: 0; border-radius: 8px; padding: 12px 18px; font: inherit; cursor: pointer; }
.note { background: #fff6eb; padding: 12px 14px; border-radius: 8px; }
form [data-show-if] { display: none; }
</style>
</head>
<body>
<main>
<h1 data-i18n="title">Formulaire de demande d’assistance</h1>
<p data-i18n="lede">Les clients décrivent le problème avec assez de détails pour le régler dès la première réponse.</p>
<form id="fg-form" action="https://formgong.com/submit" method="POST" enctype="multipart/form-data" data-sitekey="" data-lang="fr">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="fr">
<div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"><label>Leave this field empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
<section><h2 data-i18n="section.issue">Issue</h2>
<div class="field"><label for="fg-category"><span data-i18n="category">What do you need help with?</span></label><select id="fg-category" name="category" required><option value="">—</option><option value="account" data-i18n="category.account">Account or login</option><option value="billing" data-i18n="category.billing">Billing</option><option value="bug" data-i18n="category.bug">Something is broken</option><option value="how_to" data-i18n="category.how_to">How do I…?</option><option value="other" data-i18n="category.other">Other</option></select></div>
<div class="field"><label for="fg-urgency"><span data-i18n="urgency">How urgent is it?</span></label><select id="fg-urgency" name="urgency" required><option value="">—</option><option value="blocking" data-i18n="urgency.blocking">It blocks my work</option><option value="soon" data-i18n="urgency.soon">Soon, but not blocking</option><option value="later" data-i18n="urgency.later">Whenever you can</option></select></div>
<div class="field"><label for="fg-details"><span data-i18n="details">Describe the problem and the steps that lead to it</span></label><textarea id="fg-details" name="details" required maxlength="2000"></textarea></div>
<div class="field"><label for="fg-screenshot"><span data-i18n="screenshot">Screenshot, up to 5 MiB</span></label><input id="fg-screenshot" name="screenshot" type="file" accept="image/png,image/jpeg,application/pdf"></div>
<div class="field"><label for="fg-screenshot_url"><span data-i18n="screenshot_url">Or a link</span></label><input id="fg-screenshot_url" name="screenshot_url" type="url" maxlength="300"></div></section>
<section><h2 data-i18n="section.contact">Contact</h2>
<div class="field"><label for="fg-name"><span data-i18n="name">Name</span></label><input id="fg-name" name="name" type="text" required maxlength="80" autocomplete="name"></div>
<div class="field"><label for="fg-email"><span data-i18n="email">Email</span></label><input id="fg-email" name="email" type="email" required maxlength="120" autocomplete="email"></div>
<div class="field"><label for="fg-phone"><span data-i18n="phone">Phone</span></label><input id="fg-phone" name="phone" type="tel" maxlength="40" autocomplete="tel"></div></section>
<!-- Set data-sitekey on this form to YOUR_TURNSTILE_SITE_KEY. Required for attachments. -->
<div data-turnstile></div>
<button type="submit" data-i18n="submit">Envoyer</button>
<p data-status role="status"></p>
</form>
</main>
<script type="application/json" id="fg-labels">{"uk":{"title":"Форма запиту в підтримку","lede":"Клієнти описують проблему так, щоб її можна було вирішити з першої відповіді.","submit":"Надіслати","thanks":"Надіслано. Дякуємо.","file_too_big":"До 3 файлів, по 5 MiB, разом до 10 MiB.","error":"Не вдалося надіслати. Спробуйте ще раз.","section.issue":"Проблема","category":"З чим вам потрібна допомога?","category.account":"Акаунт або вхід","category.billing":"Оплата","category.bug":"Щось не працює","category.how_to":"Як мені…?","category.other":"Інше","urgency":"Наскільки це терміново?","urgency.blocking":"Блокує мою роботу","urgency.soon":"Скоро, але не блокує","urgency.later":"Коли зможете","details":"Опишіть проблему і кроки, що до неї призводять","screenshot":"Скриншот, до 5 MiB","screenshot_url":"Або посилання","section.contact":"Контакт","name":"Ім'я","email":"Електронна пошта","phone":"Телефон"},"en":{"title":"Support request form","lede":"Customers report a problem with enough detail to fix it on the first reply.","submit":"Send","thanks":"Sent. Thank you.","file_too_big":"Up to 3 files, 5 MiB each and 10 MiB combined.","error":"Could not send. Please try again.","section.issue":"Issue","category":"What do you need help with?","category.account":"Account or login","category.billing":"Billing","category.bug":"Something is broken","category.how_to":"How do I…?","category.other":"Other","urgency":"How urgent is it?","urgency.blocking":"It blocks my work","urgency.soon":"Soon, but not blocking","urgency.later":"Whenever you can","details":"Describe the problem and the steps that lead to it","screenshot":"Screenshot, up to 5 MiB","screenshot_url":"Or a link","section.contact":"Contact","name":"Name","email":"Email","phone":"Phone"},"pl":{"title":"Formularz zgłoszenia do pomocy technicznej","lede":"Klienci opisują problem na tyle dokładnie, by rozwiązać go w pierwszej odpowiedzi.","submit":"Wyślij","thanks":"Wysłano. Dziękujemy.","file_too_big":"Do 3 plików, po 5 MiB, łącznie 10 MiB.","error":"Nie udało się wysłać. Spróbuj ponownie.","section.issue":"Problem","category":"W czym potrzebujesz pomocy?","category.account":"Konto lub logowanie","category.billing":"Płatności","category.bug":"Coś nie działa","category.how_to":"Jak mam…?","category.other":"Inne","urgency":"Jak pilne to jest?","urgency.blocking":"Blokuje moją pracę","urgency.soon":"Wkrótce, ale nie blokuje","urgency.later":"Kiedy będzie można","details":"Opisz problem i kroki, które do niego prowadzą","screenshot":"Zrzut ekranu, do 5 MiB","screenshot_url":"Albo link","section.contact":"Kontakt","name":"Imię","email":"E-mail","phone":"Telefon"},"tr":{"title":"Destek talebi formu","lede":"Müşteriler sorunu ilk yanıtta çözülebilecek kadar ayrıntılı bildirir.","submit":"Gönder","thanks":"Gönderildi. Teşekkürler.","file_too_big":"En fazla 3 dosya, dosya başına 5 MiB, toplam 10 MiB.","error":"Gönderilemedi. Lütfen tekrar deneyin.","section.issue":"Sorun","category":"Hangi konuda yardıma ihtiyacınız var?","category.account":"Hesap veya giriş","category.billing":"Faturalandırma","category.bug":"Bir şey çalışmıyor","category.how_to":"Nasıl yaparım…?","category.other":"Diğer","urgency":"Ne kadar acil?","urgency.blocking":"İşimi engelliyor","urgency.soon":"Yakında, ama engellemiyor","urgency.later":"Müsait olduğunuzda","details":"Sorunu ve ona yol açan adımları anlatın","screenshot":"Ekran görüntüsü, en fazla 5 MiB","screenshot_url":"Ya da bağlantı","section.contact":"İletişim","name":"Ad","email":"E-posta","phone":"Telefon"},"ar":{"title":"نموذج طلب الدعم","lede":"يبلّغ العملاء عن المشكلة بتفاصيل كافية لحلها من الرد الأول.","submit":"إرسال","thanks":"تم الإرسال. شكرًا لك.","file_too_big":"حتى 3 ملفات، 5 MiB لكل ملف و10 MiB إجمالًا.","error":"تعذّر الإرسال. يُرجى المحاولة مرة أخرى.","section.issue":"المشكلة","category":"بماذا تحتاج إلى مساعدة؟","category.account":"الحساب أو تسجيل الدخول","category.billing":"الفوترة","category.bug":"هناك شيء معطل","category.how_to":"كيف أقوم بـ…؟","category.other":"أخرى","urgency":"ما مدى الاستعجال؟","urgency.blocking":"يعطّل عملي","urgency.soon":"قريبًا، لكنه لا يعطّل العمل","urgency.later":"متى استطعتم","details":"صف المشكلة والخطوات التي تؤدي إليها","screenshot":"لقطة شاشة، حتى 5 MiB","screenshot_url":"أو رابط","section.contact":"التواصل","name":"الاسم","email":"البريد الإلكتروني","phone":"الهاتف"},"he":{"title":"טופס פנייה לתמיכה","lede":"הלקוחות מתארים את הבעיה בפירוט שמאפשר לפתור אותה כבר בתשובה הראשונה.","submit":"שליחה","thanks":"נשלח. תודה.","file_too_big":"עד 3 קבצים, 5 MiB לכל קובץ ו-10 MiB בסך הכול.","error":"השליחה נכשלה. נסו שוב.","section.issue":"הבעיה","category":"במה אתם צריכים עזרה?","category.account":"חשבון או התחברות","category.billing":"חיוב","category.bug":"משהו לא עובד","category.how_to":"איך עושים…?","category.other":"אחר","urgency":"עד כמה זה דחוף?","urgency.blocking":"זה עוצר לי את העבודה","urgency.soon":"בקרוב, אבל לא עוצר","urgency.later":"מתי שאפשר","details":"תארו את הבעיה ואת הצעדים שמובילים אליה","screenshot":"צילום מסך, עד 5 MiB","screenshot_url":"או קישור","section.contact":"פרטי קשר","name":"שם","email":"אימייל","phone":"טלפון"},"es":{"title":"Formulario de solicitud de soporte","lede":"Los clientes describen el problema con el detalle suficiente para resolverlo en la primera respuesta.","submit":"Enviar","thanks":"Enviado. Gracias.","file_too_big":"Hasta 3 archivos, 5 MiB cada uno y 10 MiB en total.","error":"No se pudo enviar. Inténtalo de nuevo.","section.issue":"Problema","category":"¿Con qué necesitas ayuda?","category.account":"Cuenta o inicio de sesión","category.billing":"Facturación","category.bug":"Algo no funciona","category.how_to":"¿Cómo hago…?","category.other":"Otro","urgency":"¿Qué tan urgente es?","urgency.blocking":"Me impide trabajar","urgency.soon":"Pronto, pero no me bloquea","urgency.later":"Cuando puedas","details":"Describe el problema y los pasos que llevan a él","screenshot":"Captura de pantalla, hasta 5 MiB","screenshot_url":"O un enlace","section.contact":"Contacto","name":"Nombre","email":"Correo electrónico","phone":"Teléfono"},"fr":{"title":"Formulaire de demande d’assistance","lede":"Les clients décrivent le problème avec assez de détails pour le régler dès la première réponse.","submit":"Envoyer","thanks":"Envoyé. Merci.","file_too_big":"Jusqu’à 3 fichiers, 5 Mio chacun et 10 Mio au total.","error":"Envoi impossible. Veuillez réessayer.","section.issue":"Problème","category":"Pour quoi avez-vous besoin d’aide ?","category.account":"Compte ou connexion","category.billing":"Facturation","category.bug":"Quelque chose ne marche pas","category.how_to":"Comment faire… ?","category.other":"Autre","urgency":"Quelle est l’urgence ?","urgency.blocking":"Cela bloque mon travail","urgency.soon":"Bientôt, mais ce n’est pas bloquant","urgency.later":"Quand vous pourrez","details":"Décrivez le problème et les étapes qui y mènent","screenshot":"Capture d’écran, jusqu’à 5 Mio","screenshot_url":"Ou un lien","section.contact":"Contact","name":"Nom","email":"E-mail","phone":"Téléphone"},"pt":{"title":"Formulário de pedido de suporte","lede":"Os clientes descrevem o problema com detalhe suficiente para o resolver logo na primeira resposta.","submit":"Enviar","thanks":"Enviado. Obrigado.","file_too_big":"Até 3 ficheiros, 5 MiB cada e 10 MiB no total.","error":"Não foi possível enviar. Tente novamente.","section.issue":"Problema","category":"Em que precisa de ajuda?","category.account":"Conta ou início de sessão","category.billing":"Faturação","category.bug":"Algo não funciona","category.how_to":"Como faço…?","category.other":"Outro","urgency":"Qual é a urgência?","urgency.blocking":"Bloqueia o meu trabalho","urgency.soon":"Em breve, mas não bloqueia","urgency.later":"Quando puder","details":"Descreva o problema e os passos que levam a ele","screenshot":"Captura de ecrã, até 5 MiB","screenshot_url":"Ou uma ligação","section.contact":"Contacto","name":"Nome","email":"Email","phone":"Telefone"},"hi":{"title":"सपोर्ट अनुरोध फ़ॉर्म","lede":"ग्राहक समस्या इतनी जानकारी के साथ बताते हैं कि पहले जवाब में ही हल हो सके।","submit":"भेजें","thanks":"भेज दिया गया। धन्यवाद।","file_too_big":"अधिकतम 3 फ़ाइलें, हर फ़ाइल 5 MiB तक और कुल 10 MiB।","error":"भेजा नहीं जा सका। कृपया फिर से कोशिश करें।","section.issue":"समस्या","category":"आपको किस चीज़ में मदद चाहिए?","category.account":"अकाउंट या लॉगिन","category.billing":"बिलिंग","category.bug":"कुछ काम नहीं कर रहा","category.how_to":"मैं कैसे…?","category.other":"अन्य","urgency":"यह कितना ज़रूरी है?","urgency.blocking":"इससे मेरा काम रुका है","urgency.soon":"जल्द, पर काम रुका नहीं है","urgency.later":"जब भी हो सके","details":"समस्या और उस तक पहुँचने वाले कदम बताएँ","screenshot":"स्क्रीनशॉट, 5 MiB तक","screenshot_url":"या लिंक","section.contact":"संपर्क","name":"नाम","email":"ईमेल","phone":"फ़ोन"},"ja":{"title":"サポート依頼フォーム","lede":"最初の返信で解決できるだけの情報を添えて、お客様が問題を報告します。","submit":"送信","thanks":"送信しました。ありがとうございます。","file_too_big":"ファイルは3つまで、1つ5 MiB、合計10 MiBまでです。","error":"送信できませんでした。もう一度お試しください。","section.issue":"内容","category":"どのようなことでお困りですか?","category.account":"アカウント・ログイン","category.billing":"請求","category.bug":"不具合がある","category.how_to":"使い方を知りたい","category.other":"その他","urgency":"緊急度を教えてください","urgency.blocking":"業務が止まっている","urgency.soon":"早めに対応してほしいが支障はない","urgency.later":"手が空いたときで構わない","details":"問題の内容と、発生までの手順を書いてください","screenshot":"スクリーンショット(5 MiBまで)","screenshot_url":"またはリンク","section.contact":"連絡先","name":"お名前","email":"メールアドレス","phone":"電話番号"},"de":{"title":"Support-Anfrageformular","lede":"Kunden melden ein Problem so genau, dass es mit der ersten Antwort gelöst werden kann.","submit":"Senden","thanks":"Gesendet. Vielen Dank.","file_too_big":"Bis zu 3 Dateien, je 5 MiB und insgesamt 10 MiB.","error":"Senden fehlgeschlagen. Bitte versuchen Sie es erneut.","section.issue":"Problem","category":"Wobei brauchen Sie Hilfe?","category.account":"Konto oder Anmeldung","category.billing":"Abrechnung","category.bug":"Etwas funktioniert nicht","category.how_to":"Wie kann ich …?","category.other":"Sonstiges","urgency":"Wie dringend ist es?","urgency.blocking":"Es blockiert meine Arbeit","urgency.soon":"Bald, aber nicht blockierend","urgency.later":"Wann immer es passt","details":"Beschreiben Sie das Problem und die Schritte, die dazu führen","screenshot":"Screenshot, bis 5 MiB","screenshot_url":"Oder ein Link","section.contact":"Kontakt","name":"Name","email":"E-Mail","phone":"Telefon"}}</script>
<script>
function mountCaptcha(node, siteKey) {
if (!node || !siteKey) return () => {};
let disposed = false;
let widget;
function render() {
if (disposed || !window.turnstile) return;
window.turnstile.ready(() => {
if (disposed) return;
widget = window.turnstile.render(node, { sitekey: siteKey, language: node.dataset.language || document.documentElement.lang || "auto" });
node.dataset.widgetId = widget;
});
}
if (window.turnstile) render();
else {
let script = document.querySelector('script[src^="https://challenges.cloudflare.com/turnstile/v0/api.js"]');
if (!script) {
script = document.createElement("script");
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
script.async = true;
document.head.appendChild(script);
}
script.addEventListener("load", render, { once: true });
}
return () => { disposed = true; if (widget !== undefined) window.turnstile?.remove(widget); };
}
function resetCaptcha(form) {
const widget = form.querySelector("[data-turnstile]")?.dataset.widgetId;
if (widget !== undefined) window.turnstile?.reset(widget);
}
(function () {
var MAX = 5242880;
var form = document.getElementById("fg-form");
var packNode = document.getElementById("fg-labels");
if (!form || !packNode) return;
var pack = JSON.parse(packNode.textContent);
function code() {
var q = new URLSearchParams(location.search).get("lang") || "";
// ?lang= preview override, then the form language chosen when copying, then the page and browser.
var raw = (q || form.getAttribute("data-lang") || document.documentElement.lang || (navigator.language || "en")).slice(0, 2).toLowerCase();
return pack[raw] ? raw : "en";
}
function apply() {
var dict = pack[code()];
document.querySelectorAll("[data-i18n]").forEach(function (node) {
var key = node.getAttribute("data-i18n");
if (key && typeof dict[key] === "string") node.textContent = dict[key];
});
}
apply();
var status = form.querySelector("[data-status]");
form.addEventListener("submit", function (event) {
event.preventDefault();
var dict = pack[code()];
var body = new FormData(form);
var files = Array.from(body.values()).filter(function (value) { return value instanceof File && value.size; });
if (files.length > 3 || files.some(function (file) { return file.size > MAX; }) || files.reduce(function (sum,file) { return sum + file.size; },0) > 10 * 1024 * 1024) {
if (status) status.textContent = dict.file_too_big;
return;
}
var button = form.querySelector("button[type=submit]");
if (button) button.disabled = true;
fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: body })
.then(function (response) { return response.json(); }).then(function (result) {
if (status) status.textContent = result && result.success ? dict.thanks : ((result && result.message) || dict.error);
}).catch(function () { if (status) status.textContent = dict.error; })
.finally(function () { if (button) button.disabled = false; resetCaptcha(form); });
});
mountCaptcha(form.querySelector("[data-turnstile]"), form.dataset.sitekey);
})();
</script>
</body>
</html>
Code pour d’autres frameworks
Comment recevoir plus de demandes
- Indiquez sur la page de remerciement quand vous répondez, par exemple « sous un jour ouvré ».
- Ajoutez à côté du formulaire des liens vers vos pages d’aide pour les questions qui ont déjà une réponse.
- Répondez depuis une adresse à laquelle les clients peuvent répondre, pour que l’échange reste au même endroit.
Répondre à chaque demande
Envoyez les problèmes bloquants vers un groupe Telegram pour que quelqu’un les voie en quelques minutes. Les statuts montrent quelles demandes sont en cours de traitement, et le rappel quotidien liste les demandes que personne n’a encore prises en charge.
Questions et réponses
Les clients peuvent-ils joindre des captures d’écran ?
Oui. Activez les pièces jointes dans les paramètres du formulaire et ajoutez Turnstile à votre site. Les fichiers jusqu’à 5 Mio sont stockés de manière privée.
Les demandes peuvent-elles aller vers mon outil de support ?
Oui. Envoyez chaque demande avec un webhook signé vers votre outil de support, ou via Make, n8n ou Zapier.
Puis-je router les questions de facturation vers quelqu’un d’autre ?
Oui. Avec Pro, des règles de routage envoient les demandes vers un autre e-mail ou un autre chat selon le sujet.