Formularz zgłoszenia do pomocy technicznej

Klienci opisują problem na tyle dokładnie, by rozwiązać go w pierwszej odpowiedzi.

Używasz Tildy? Wklej do bloku T123 (płatny plan) albo użyj webhooka bez kodu.

Włącz załączniki w ustawieniach formularza i zainstaluj Turnstile. PDF, JPEG i PNG do 5 MiB na plik są przechowywane prywatnie; pobieranie wymaga logowania właściciela.

Do czego służy ten formularz

Większość wątków w pomocy technicznej trwa trzy maile, bo w pierwszej wiadomości czegoś brakuje. Ten formularz pyta o temat, pilność i kroki prowadzące do problemu, więc pierwsza odpowiedź może od razu rozwiązać sprawę.

Zrzut ekranu często wyjaśnia więcej niż akapit tekstu. Szablon przyjmuje jeden obraz lub PDF do 5 MiB albo link, jeśli plik jest większy.

Pola, które mają znaczenie

W czym potrzebujesz pomocy?
Konto, płatności, błąd lub pytanie. Kieruje zgłoszenie do właściwej osoby.
Jak pilne to jest?
Pozwala najpierw odpowiedzieć klientom, którzy nie mogą pracować.
Opisz problem i kroki, które do niego prowadzą
Wymagane. Kroki pozwalają odtworzyć problem zamiast zgadywać.
Zrzut ekranu, do 5 MiB
Jeden plik do 5 MiB lub link. Pokazuje to, co widzi klient.

Podgląd

Problem

Kontakt

Kod formularza

HTML
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Formularz zgłoszenia do pomocy technicznej</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">Formularz zgłoszenia do pomocy technicznej</h1>
<p data-i18n="lede">Klienci opisują problem na tyle dokładnie, by rozwiązać go w pierwszej odpowiedzi.</p>


<form id="fg-form" action="https://formgong.com/submit" method="POST" enctype="multipart/form-data" data-sitekey="" data-lang="pl">
<input type="hidden" name="access_key" value="fk_your_access_key">
<input type="hidden" name="_lang" value="pl">
<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">Wyślij</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>

Kod dla innych frameworków

React
Vue
Svelte

Jak dostawać więcej zgłoszeń

  • Napisz na stronie podziękowania, kiedy odpowiadasz, np. „w ciągu jednego dnia roboczego”.
  • Umieść obok formularza linki do stron pomocy dla pytań, które mają już odpowiedź.
  • Odpowiadaj z adresu, na który klienci mogą odpisać, żeby wątek został w jednym miejscu.

Odpowiadaj na każde zgłoszenie

Wysyłaj blokujące problemy do grupy na Telegramie, żeby ktoś zobaczył je w ciągu minut. Statusy pokazują, które zgłoszenia są w toku, a codzienne przypomnienie wymienia zgłoszenia, których nikt jeszcze nie podjął.

Pytania i odpowiedzi

Czy klienci mogą dołączać zrzuty ekranu?

Tak. Włącz załączniki w ustawieniach formularza i dodaj Turnstile na swojej stronie. Pliki do 5 MiB są przechowywane prywatnie.

Czy zgłoszenia mogą trafiać do mojego helpdesku?

Tak. Wysyłaj każde zgłoszenie podpisanym webhookiem do helpdesku albo przez Make, n8n lub Zapier.

Czy mogę kierować pytania o płatności do kogoś innego?

Tak. W planie Pro reguły routingu wysyłają zgłoszenia na inny e-mail lub czat w zależności od tematu.