Slik bygger du en skjemabygger

En skjemabygger lar folk designe sine egne skjemaer – velge felt, sette regler og publisere en lenke – og samler så inn svarene. Under panseret består den av tre deler: en skjemadefinisjon lagret som data, en visningsdel som gjør definisjonen om til et fungerende skjema, og en lagring av innsendinger med varsler og eksport. Før du bygger en, sjekk om du faktisk trenger den. Hvis du bare trenger et kontaktskjema eller et søknadsskjema, bygg det skjemaet direkte og hopp over byggeren helt.

Trenger du egentlig en byggeverktøy?

Din situasjon	Bygg dette
Ett eller to skjemaer som sjelden endres	Skjemaene selv. Se slik legger du til et kontaktskjema.
Mange skjemaer, laget av ikke-utviklere på teamet ditt	En intern skjemabygger
Skjemaer er en del av produktet ditt (kunder lager dem selv)	En skjemabygger med kontoer, grenser og innbygging
Du vil først og fremst ha undersøkelsesresultater og diagrammer	En undersøkelsesapp

En byggeverktøy er et større prosjekt enn et skjema, fordi hver felttype må fungere i redigeringsverktøyet, i det offentlige skjemaet, i validering, lagring, varsler og eksport.

Hva en skjemabygger trenger

Skjemadefinisjoner

Lagre hvert skjema som en liste over felt, lagret som strukturerte data (JSON i en Postgres-kolonne fungerer godt). Et felt kan se slik ut:

id – en stabil ID som aldri endres, selv om ledeteksten gjør det
type – tekst, e-post, tall, langt tekstfelt, valg, avkrysningsboks, dato, fil
ledetekst og hjelpetekst
påkrevd, min / maks, tillatte filtyper
alternativer for valgfelt
rekkefølge, og eventuelt en betingelse («vis bare hvis felt X er Y»)

Redigeringsverktøyet redigerer denne listen; det offentlige skjemaet leser den. Det er hele tricket: ingen ny kode per skjema.

Innsendinger

Innsendinger – skjema, skjemaversjon, tidspunkt for innsending, svar knyttet til felt-ID, status (ny, lest, arkivert).
Filer – opplastede filer hører hjemme i fillagring, og innsendingen holder bare en referanse, aldri innholdet i databaseraden.

Sider

Skjemaliste med antall innsendinger.
Redigering – legg til, sorter og konfigurer felt, med en levende forhåndsvisning ved siden av.
Innstillinger – bekreftelsesmelding eller omdirigering, varselse-e-poster, åpnings- og stengingsdatoer, grense for antall innsendinger.
Offentlig skjema på egen lenke, og en versjon som kan bygges inn på andre nettsteder.
Tabell over innsendinger med søk, status, detaljvisning og CSV-eksport.

Valg og avveininger

Versjonering. Noen vil endre «Telefon» til «Mobilnummer» etter 200 innsendinger. Hvis svarene lagres etter felt-ID, og hver innsending registrerer skjemaversjonen, vises gamle innsendinger fortsatt riktig. Uten det blir dataene stille og rolig rotete.

Validering kjøres to ganger. Sjekk felt i nettleseren for rask tilbakemelding, og igjen på serveren, fordi hvem som helst kan sende data direkte til endepunktet ditt. Kontrollen på serveren er den som teller.

Filopplastinger. De gir lagringskostnader, størrelsesgrenser, kontroll av filtyper og personvernspørsmål (CV-er, ID-dokumenter, medisinske skjemaer). Begrens typer og størrelser, og gjør opplastede filer private som standard, slik at bare skjemaeierne kan lese dem. Se slik legger du til filopplasting i appen din.

Varsler. «Send meg en e-post når noen sender inn» forventes. Det krever en e-postleverandør og en API-nøkkel; se slik sender du e-post fra appen din.

Spam. Et offentlig skjema vil bli funnet av roboter. Bruk et skjult felt (skjult for mennesker, fylt ut av roboter), begrensninger per IP-adresse, validering på serveren og ved behov en CAPTCHA-tjeneste.

Innbygging. En iframe-innbygging er den enkleste og tryggeste måten å sette et skjema på en annen nettside. En script-innbygging ser mer innfødt ut, men er vanskeligere å bygge og sikre.

Betinget logikk. «Vis dette feltet bare hvis…» er populært, men det multipliserer testingen. Legg det til når det grunnleggende sitter godt.

En første prompt som fungerer

Bygg en skjemabygger-webapp for teamet mitt. Innloggede brukere lager skjemaer i et redigeringsverktøy med levende forhåndsvisning. Felttyper: kort tekst, langt tekstfelt, e-post, tall, dato, enkeltvalg, avkrysningsbokser og filopplasting. Hvert felt har en stabil ID, ledetekst, hjelpetekst, påkrevd-flagg og typespesifikke regler (min/maks, alternativer, tillatte filtyper og en grense på 10 MB). Lagre skjemadefinisjonen som JSON med et versjonsnummer som øker ved hver publisering. Hvert skjema får en offentlig lenke og en iframe-kode for innbygging. Valider innsendinger på serveren mot den publiserte versjonen, lagre svarene knyttet til felt-ID og skjemaversjon, og legg opplastede filer i privat fillagring. Legg til et skjult felt som lurer roboter, og en grense per IP-adresse for antall forespørsler. Skjemaeiere ser en tabell med innsendinger med status (ny, lest, arkivert), en detaljvisning og CSV-eksport. Lagre alt i en database. La betinget logikk og e-postvarsler vente til senere.

Byggetrinn

Redigeringsverktøy og definisjon. Bygg et skjema med alle felttyper og se på den lagrede JSON-en sammen med agenten. Er den ren og stabil?
Offentlig skjema. Fyll det ut på en telefon. Sjekk valideringsmeldingene og bekreftelsesskjermen.
Validering på serveren. Be agenten sende en innsending som bryter reglene rett til serveren, uten å gå via siden. Den skal avvises.
Versjonering. Gi nytt navn til og endre rekkefølgen på felt etter noen innsendinger. Gamle innsendinger skal fortsatt vise riktige svar.
Opplastinger. Prøv en fil som er for stor og en av feil type. Bekreft at en fremmed ikke kan åpne en opplastet fil ved å gjette lenken.
Tabell over innsendinger og eksport. Sjekk CSV-eksporten med komma, linjeskift og norske tegn som æ, ø og å i svarene.
Varsler, innbygginger, logikk. Legg til ett og ett.

Vanlige feil

Å lagre svar etter ledetekst. Ledetekster endres. Bruk stabile felt-ID-er.
Validering bare i nettleseren. Det er en bekvemmelighet, ikke beskyttelse.
Offentlig tilgjengelige opplastede filer. Skjemaer samler ofte inn dokumenter folk ikke vil ha eksponert.
Ingen spambeskyttelse. Et offentlig skjema kan fylles med søppel i løpet av få dager.
Å bygge en byggeverktøy for ett skjema. Bygg skjemaet.
Ubegrensede innsendinger på et offentlig produkt. Hvis kunder lager skjemaer, sett grenser per abonnement, ellers kan ett populært skjema gi en stor hostingregning.

Når et ferdig produkt er det bedre valget

Hostede skjematjenester er utmerkede og billige for de fleste behov. De har allerede løst innbygging, spam, betalinger, integrasjoner og tilgjengelighet for dusinvis av felttyper. Hvis teamet ditt bare trenger skjemaer, bruk en av dem – se alternativer til Typeform og alternativer til Google Forms.

Bygg din egen når innsendinger må ligge sammen med dine egne data (mates inn i et CRM eller en kundeportal du driver selv), når du trenger arbeidsflyt etter innsending som verktøyene ikke kan gjøre, når datalagring eller eierskap er et krav, eller når skjemaer er en funksjon i et produkt du selger.

Bygge det med Mythex

På Mythex beskriver du byggeverktøyet i chatten og tester redigeringsverktøyet og det offentlige skjemaet side om side i den levende forhåndsvisningen. Mythex legger til en dedikert database for skjemadefinisjoner og innsendinger, og aktiverer fillagring automatisk når appen din trenger opplastinger (begrenset til 1 GB på gratisplanen). Varselsepostene går gjennom en leverandør du kobler til med din egen nøkkel. Publiser appen til en mythex.ai-lenke, eller ditt eget domene på Pro, så fungerer de offentlige skjemalenkene derfra.

Spørsmål

Hvordan lagrer en skjemabygger skjemaene?

Vanligvis som en skjemadefinisjon: en liste over felt, der hvert felt har en type, en ledetekst, valideringsregler og en rekkefølge, lagret som strukturerte data, for eksempel JSON. Den samme definisjonen styrer både redigeringsverktøyet og det offentlige skjemaet, så det trengs ingen ny kode for å legge til et felt.

Hvordan bør skjemainnsendinger lagres?

Lagre hver innsending med en referanse til skjemaversjonen den ble laget mot, og svarene knyttet til felt-ID. Da blir det ikke noe galt med gamle innsendinger hvis du senere endrer navn på eller flytter et felt.

Hvordan stopper jeg spam på et offentlig skjema?

Kombiner et skjult felt som lurer roboter, begrensning av antall forespørsler per IP-adresse, validering på serveren og, hvis spammen fortsetter, en CAPTCHA-tjeneste. Stol aldri på kontroller som bare kjøres i nettleseren.

Trenger jeg en full skjemabygger, eller bare et skjema?

Hvis du trenger ett eller to faste skjemaer, bygg dem direkte – det er mye enklere. En skjemabygger er verdt det når folk uten teknisk bakgrunn må lage og endre mange skjemaer uten å spørre en utvikler.