Jak zbudować kreator formularzy

Kreator formularzy pozwala ludziom projektować własne formularze — wybierać pola, ustawiać reguły, publikować link — a następnie zbiera zgłoszenia. Pod spodem to trzy rzeczy: definicja formularza zapisana jako dane, renderer, który zamienia definicję w działający formularz, oraz magazyn zgłoszeń z powiadomieniami i eksportem. Zanim zaczniesz go budować, sprawdź, czy naprawdę go potrzebujesz: jeśli potrzebujesz tylko formularza kontaktowego lub formularza zgłoszeniowego, zbuduj po prostu ten formularz i całkowicie pomiń kreator.

Czy w ogóle potrzebujesz kreatora?

Kreator to większy projekt niż formularz, bo każdy typ pola musi działać w edytorze, w publicznym formularzu, w walidacji, w zapisie, w powiadomieniach i w eksporcie.

Czego potrzebuje kreator formularzy

Definicje formularzy

Zapisuj każdy formularz jako listę pól w postaci danych ustrukturyzowanych (dobrze sprawdza się JSON w kolumnie Postgres). Pole może wyglądać tak:

• id — stały identyfikator, który nigdy się nie zmienia, nawet jeśli zmienia się etykieta
• typ — tekst, e-mail, liczba, długi tekst, wybór z listy, pole wyboru, data, plik
• etykieta i tekst pomocniczy
• wymagane, min / max, dozwolone typy plików
• opcje dla pól wyboru z listy
• kolejność i opcjonalnie warunek („pokaż tylko, jeśli pole X ma wartość Y”)

Edytor modyfikuje tę listę, a publiczny formularz ją odczytuje. To cała sztuczka: nie potrzeba nowego kodu dla każdego formularza.

Zgłoszenia

• Zgłoszenia — formularz, wersja formularza, czas wysłania, odpowiedzi kluczowane identyfikatorem pola, status (nowe, przeczytane, zarchiwizowane).
• Pliki — przesłane pliki należą do magazynu plików, a zgłoszenie przechowuje tylko odniesienie do nich, nigdy nie trzyma pliku w wierszu bazy danych.

Strony

• Lista formularzy z liczbą zgłoszeń.
• Edytor — dodawanie, zmiana kolejności i konfiguracja pól, z podglądem na żywo obok.
• Ustawienia — wiadomość potwierdzająca lub przekierowanie, e-maile z powiadomieniami, daty otwarcia i zamknięcia, limit zgłoszeń.
• Publiczny formularz pod własnym linkiem oraz wersja do osadzenia na innych stronach.
• Tabela zgłoszeń z wyszukiwaniem, statusem, widokiem szczegółów i eksportem CSV.

Decyzje i kompromisy

Wersjonowanie. Ktoś zmieni nazwę pola „Telefon” na „Numer komórkowy” po 200 zgłoszeniach. Jeśli odpowiedzi są zapisywane według identyfikatora pola, a każde zgłoszenie rejestruje wersję formularza, stare zgłoszenia nadal wyświetlają się poprawnie. Bez tego Twoje dane po cichu się rozsypią.

Walidacja działa dwukrotnie. Sprawdzaj pola w przeglądarce, aby szybko informować użytkownika, i jeszcze raz na serwerze, bo każdy może wysłać dane bezpośrednio do Twojego endpointu. Liczy się tylko sprawdzenie po stronie serwera.

Przesyłanie plików. Wiąże się z kosztami przechowywania, limitami rozmiaru, sprawdzaniem typu pliku i kwestiami prywatności (CV, dokumenty tożsamości, formularze medyczne). Ograniczaj typy i rozmiary, a przesyłane pliki domyślnie czyń prywatnymi — czytelnymi tylko dla właścicieli formularza. Zobacz jak dodać przesyłanie plików do aplikacji.

Powiadomienia. Oczekuje się funkcji „wyślij mi e-mail, gdy ktoś wyśle formularz”. Potrzebuje to dostawcy poczty e-mail i klucza API; zobacz jak wysyłać e-maile z aplikacji.

Spam. Publiczny formularz zostanie znaleziony przez boty. Użyj pola-pułapki (honeypot — ukrytego przed ludźmi, wypełnianego przez boty), limitów na adres IP, walidacji po stronie serwera i w razie potrzeby usługi CAPTCHA.

Osadzanie. Osadzenie w iframe to najprostszy i najbezpieczniejszy sposób, by umieścić formularz na cudzej stronie. Osadzenie skryptem wygląda bardziej natywnie, ale trudniej je zbudować i zabezpieczyć.

Logika warunkowa. „Pokaż to pole tylko wtedy, gdy…” jest popularne, ale mnoży liczbę testów. Dodaj ją, gdy podstawy będą solidne.

Pierwszy prompt, który działa

Zbuduj aplikację webową — kreator formularzy dla mojego zespołu. Zalogowani użytkownicy tworzą formularze w edytorze z podglądem na żywo. Typy pól: krótki tekst, długi tekst, e-mail, liczba, data, pojedynczy wybór, pola wyboru i przesyłanie pliku. Każde pole ma stałe ID, etykietę, tekst pomocniczy, flagę wymagalności i reguły zależne od typu (min/max, opcje, dozwolone typy plików oraz limit rozmiaru 10 MB). Zapisuj definicję formularza jako JSON z numerem wersji, który rośnie przy każdej publikacji. Każdy formularz dostaje publiczny link i kod osadzenia iframe. Waliduj zgłoszenia po stronie serwera względem opublikowanej wersji, zapisuj odpowiedzi kluczowane ID pola wraz z wersją formularza, a pliki umieszczaj w prywatnym magazynie. Dodaj ukryte pole-pułapkę i limit zgłoszeń na IP. Właściciele formularzy widzą tabelę zgłoszeń ze statusem (nowe, przeczytane, zarchiwizowane), widok szczegółów i eksport CSV. Wszystko zapisuj w bazie danych. Logikę warunkową i powiadomienia e-mail zostaw na później.

Etapy budowy

1. Edytor i definicja. Zbuduj formularz z każdym typem pola i sprawdź z agentem zapisany JSON. Czy jest czysty i stabilny?
2. Publiczny formularz. Wypełnij go na telefonie. Sprawdź komunikaty walidacji i ekran potwierdzenia.
3. Walidacja po stronie serwera. Poproś agenta o wysłanie zgłoszenia łamiącego reguły wprost do serwera, z pominięciem strony. Musi zostać odrzucone.
4. Wersjonowanie. Zmień nazwy i kolejność pól po kilku zgłoszeniach. Stare zgłoszenia nadal powinny pokazywać właściwe odpowiedzi.
5. Przesyłanie plików. Spróbuj pliku zbyt dużego i pliku złego typu. Upewnij się, że obcy człowiek nie może otworzyć przesłanego pliku, zgadując jego link.
6. Tabela zgłoszeń i eksport. Sprawdź eksport CSV z przecinkami, znakami nowego wiersza i polskimi znakami diakrytycznymi w odpowiedziach.
7. Powiadomienia, osadzanie, logika. Dodawaj je pojedynczo.

Częste błędy

• Zapisywanie odpowiedzi według etykiety. Etykiety się zmieniają. Używaj stałych identyfikatorów pól.
• Walidacja tylko w przeglądarce. To wygoda, a nie ochrona.
• Publiczne przesłane pliki. Formularze często zbierają dokumenty, których ludzie nie chcieliby ujawniać.
• Brak ochrony przed spamem. Publiczny formularz może zapełnić się śmieciami w ciągu kilku dni.
• Budowanie kreatora dla jednego formularza. Zbuduj po prostu formularz.
• Nieograniczona liczba zgłoszeń w publicznym produkcie. Jeśli klienci tworzą formularze, ustaw limity w zależności od planu, bo jeden popularny formularz może podbić rachunek za hosting.

Kiedy lepszy jest gotowy produkt

Hostowane narzędzia do formularzy są świetne i tanie w większości zastosowań. Rozwiązały już osadzanie, spam, płatności, integracje i dostępność dla dziesiątek typów pól. Jeśli Twój zespół potrzebuje po prostu formularzy, skorzystaj z jednego z nich — zobacz alternatywy dla Typeform i alternatywy dla Google Forms.

Buduj własny kreator, gdy zgłoszenia mają żyć obok Twoich własnych danych (zasilając CRM lub portal klienta, który prowadzisz), gdy po wysłaniu potrzebujesz przepływów pracy, których narzędzia nie obsługują, gdy lokalizacja lub własność danych jest wymogiem, albo gdy formularze są funkcją produktu, który sprzedajesz.

Budowa z Mythex

W Mythex opisujesz kreator w czacie i testujesz edytor oraz publiczny formularz obok siebie w podglądzie na żywo. Mythex dodaje dedykowaną bazę danych dla definicji formularzy i zgłoszeń, a magazyn plików włącza automatycznie, gdy aplikacja potrzebuje przesyłania plików (na planie Free do 1 GB). Powiadomienia e-mail idą przez dostawcę, którego podłączasz własnym kluczem. Opublikuj aplikację pod linkiem mythex.ai lub pod własną domeną w planie Pro, a publiczne linki do formularzy będą działać stamtąd.

Pytania