Sådan bygger du en formularbygger

En formularbygger gør det muligt for folk at designe deres egne formularer — vælge felter, sætte regler, offentliggøre et link — og derefter indsamler den besvarelserne. Under motorhjelmen består den af tre ting: en formulardefinition gemt som data, en renderer, der omdanner definitionen til en fungerende formular, og et lager for besvarelser med notifikationer og eksport. Før du bygger en, skal du tjekke, om du virkelig har brug for den: Hvis du bare har brug for en kontaktformular eller en ansøgningsformular, så byg den formular direkte og spring builderen helt over.

Har du overhovedet brug for en bygger?

Din situation	Byg dette
En eller to formularer, der sjældent ændres	Selve formularerne. Se sådan tilføjer du en kontaktformular.
Mange formularer, oprettet af ikke-udviklere i dit team	En intern formularbygger
Formularer er en del af dit produkt (kunderne opretter dem)	En formularbygger med konti, grænser og indlejring
Du primært vil have surveyresultater og diagrammer	En survey-app

En bygger er et større projekt end en formular, fordi hver feltype skal virke i redigeringsværktøjet, i den offentlige formular, i validering, lagring, notifikationer og eksport.

Hvad en formularbygger skal kunne

Formulardefinitioner

Gem hver formular som en liste over felter, gemt som struktureret data (JSON i en Postgres-kolonne fungerer godt). Et felt kan se sådan ud:

id — et stabilt ID, der aldrig ændres, selv om labelen gør
type — tekst, e-mail, tal, langt tekstfelt, valgliste, afkrydsningsfelt, dato, fil
label og hjælpetekst
påkrævet, min / maks, tilladte filtyper
valgmuligheder for valglister
rækkefølge og eventuelt en betingelse ("vis kun hvis felt X er Y")

Redigeringsværktøjet redigerer denne liste; den offentlige formular læser den. Det er hele tricket: ingen ny kode pr. formular.

Besvarelser

Besvarelser — formular, formularversion, indsendelsestidspunkt, svar nøglet efter felt-ID, status (ny, læst, arkiveret).
Filer — uploadede filer hører hjemme i fillagring, hvor besvarelsen indeholder en reference, aldrig inde i databaserækken.

Sider

Formularliste med antal besvarelser.
Redigeringsværktøj — tilføj, flyt og konfigurer felter, med en live-forhåndsvisning ved siden af.
Indstillinger — bekræftelsesbesked eller omdirigering, notifikations-e-mails, åbnings- og lukkedatoer, grænse for antal besvarelser.
Offentlig formular på sit eget link og en version, der kan indlejres på andre hjemmesider.
Tabel over besvarelser med søgning, status, detaljevisning og CSV-eksport.

Beslutninger og afvejninger

Versionering. Nogen vil omdøbe "Telefon" til "Mobilnummer" efter 200 besvarelser. Hvis svarene gemmes efter felt-ID, og hver besvarelse registrerer formularversionen, vises de gamle besvarelser stadig korrekt. Uden det bliver dine data stille og roligt forvirrede.

Validering kører to gange. Tjek felterne i browseren for hurtig feedback, og igen på serveren, fordi alle kan sende data direkte til dit endpoint. Det er serverkontrollen, der tæller.

Filuploads. De medfører lageromkostninger, størrelsesgrænser, kontrol af filtyper og privatlivsspørgsmål (CV'er, ID'er, lægeerklæringer). Begræns typer og størrelser, og gør uploadede filer private som standard, så kun formularens ejere kan læse dem. Se sådan tilføjer du filuploads til din app.

Notifikationer. "Send mig en e-mail, når nogen indsender" forventes. Det kræver en e-mailudbyder og en API-nøgle; se sådan sender du e-mails fra din app.

Spam. En offentlig formular vil blive fundet af bots. Brug et honeypot-felt (skjult for mennesker, udfyldt af bots), hastighedsgrænser pr. IP, validering på serveren og om nødvendigt en CAPTCHA-tjeneste.

Indlejring. En iframe-indlejring er den enkleste og sikreste måde at putte en formular på andres hjemmeside. En script-indlejring virker mere indbygget, men er sværere at bygge og sikre.

Betinget logik. "Vis dette felt kun hvis…" er populært og multiplicerer antallet af tests. Tilføj det, når det grundlæggende er på plads.

En første prompt, der virker

Byg en webapp med formularbygger til mit team. Indloggede brugere opretter formularer i et redigeringsværktøj med live-forhåndsvisning. Feltyper: kort tekst, langt tekstfelt, e-mail, tal, dato, enkeltvalg, afkrydsningsfelter og filupload. Hvert felt har et stabilt ID, label, hjælpetekst, et påkrævet-flag og typespecifikke regler (min/maks, valgmuligheder, tilladte filtyper og en størrelsesgrænse på 10 MB). Gem formulardefinitionen som JSON med et versionsnummer, der stiger ved hver offentliggørelse. Hver formular får et offentligt link og en iframe-indlejringskode. Valider besvarelser på serveren mod den offentliggjorte version, gem svar nøglet efter felt-ID med formularversionen, og læg uploadede filer i privat fillagring. Tilføj et skjult honeypot-felt og en grænse for forespørgsler pr. IP. Formularens ejere ser en tabel med besvarelser med status (ny, læst, arkiveret), en detaljevisning og CSV-eksport. Gem alt i en database. Lad betinget logik og e-mailnotifikationer vente.

Byggetrin

Redigeringsværktøj og definition. Byg en formular med alle feltyper, og kig på den gemte JSON sammen med agenten. Er den ren og stabil?
Offentlig formular. Udfyld den på en telefon. Tjek valideringsbeskederne og bekræftelsesskærmen.
Validering på serveren. Bed agenten om at sende en besvarelse, der bryder reglerne, direkte til serveren uden om siden. Den skal afvises.
Versionering. Omdøb og flyt felter efter nogle få besvarelser. Gamle besvarelser skal stadig vise de rigtige svar.
Uploads. Prøv en fil, der er for stor, og en af den forkerte type. Bekræft, at en fremmed ikke kan åbne en uploadet fil ved at gætte dens link.
Tabel over besvarelser og eksport. Tjek CSV-eksporten med kommaer, linjeskift og danske tegn i svarene.
Notifikationer, indlejringer, logik. Tilføj dem én ad gangen.

Almindelige fejl

At gemme svar efter label. Labels ændres. Brug stabile felt-ID'er.
Validering kun i browseren. Det er en bekvemmelighed, ikke beskyttelse.
Offentligt tilgængelige uploadede filer. Formularer indsamler ofte dokumenter, folk ikke ønsker skal være synlige.
Ingen spambeskyttelse. En offentlig formular kan fyldes med skrald i løbet af få dage.
At bygge en bygger til én formular. Byg formularen.
Ubegrænsede besvarelser i et offentligt produkt. Hvis kunder opretter formularer, så sæt grænser pr. abonnement, ellers kan én populær formular løbe op i din hostingregning.

Hvornår et færdigt produkt er det bedre valg

Hostede formularværktøjer er fremragende og billige til de fleste behov. De har allerede løst indlejring, spam, betalinger, integrationer og tilgængelighed på tværs af dusinvis af feltyper. Hvis dit team bare har brug for formularer, så brug et af dem — se Typeform-alternativer og Google Forms-alternativer.

Byg din egen, når besvarelser skal ligge sammen med dine egne data (f.eks. et CRM eller en kundeportal, du driver), når du har brug for arbejdsgange efter indsendelse, som værktøjerne ikke kan klare, når placering eller ejerskab af data er et krav, eller når formularer er en funktion i et produkt, du sælger.

Byg det med Mythex

På Mythex beskriver du builderen i chatten og tester redigeringsværktøjet og den offentlige formular side om side i live-forhåndsvisningen. Mythex tilføjer en dedikeret database til formulardefinitioner og besvarelser, og aktiverer automatisk fillagring, når din app har brug for uploads (begrænset til 1 GB på Free-planen). Notifikations-e-mails sendes via en udbyder, du forbinder med din egen nøgle. Publicér appen til et mythex.ai-link, eller dit eget domæne på Pro, så fungerer de offentlige formularlinks derfra.

Spørgsmål

Hvordan gemmer en formularbygger formularer?

Typisk som en formulardefinition: en liste over felter, hvert med en type, en label, valideringsregler og en rækkefølge, gemt som struktureret data såsom JSON. Den samme definition styrer både redigeringsværktøjet og den offentlige formular, så et nyt felt kræver ingen ny kode.

Hvordan bør formularbesvarelser gemmes?

Gem hver besvarelse med en reference til den formularversion, den blev udfyldt mod, og svarene nøglet efter felt-ID. Så ødelægger det ikke gamle besvarelser, hvis du senere omdøber eller flytter et felt.

Hvordan stopper jeg spam på en offentlig formular?

Kombinér et skjult honeypot-felt, begrænsning af antal forespørgsler pr. IP-adresse, validering på serveren og, hvis spam fortsætter, en CAPTCHA-tjeneste. Stol aldrig på kontroller, der kun kører i browseren.

Har jeg brug for en fuld formularbygger, eller bare en formular?

Hvis du har brug for en eller to faste formularer, så byg dem direkte — det er meget enklere. En formularbygger er umagen værd, når ikke-tekniske personer skal oprette og ændre mange formularer uden at spørge en udvikler.