Byg en tilgængelig kontaktformular til træpleje med HTML og JavaScript

En god kontaktformular skal være nem at forstå.

Det lyder enkelt. Alligevel findes der mange formularer, hvor brugeren ikke ved, hvilke oplysninger der er nødvendige, eller hvorfor en fejl opstår.

Forestil dig en haveejer, der har opdaget en stor beskadiget gren. Personen vil gerne kontakte en arborist, men har ikke den store viden om træer.

Skal formularen kræve træart, præcis højde og en teknisk beskrivelse?

Nej. Brugeren skal kunne forklare problemet med sine egne ord.

I denne guide bygger vi en lille kontaktformular med HTML, CSS og JavaScript. Vi bruger træpleje som eksempel, men principperne kan også bruges til mange andre lokale servicevirksomheder.

Vi fokuserer på tre ting:

• Enkel og tydelig kommunikation
• Tilgængelighed for forskellige brugere
• Validering uden unødvendig kompleksitet

Eksemplet er en frontend-demo. Det sender ikke oplysninger til en virksomhed.

Start med brugerens behov

Før vi skriver kode, skal vi beslutte, hvilke oplysninger formularen faktisk har brug for.

En person, der ønsker hjælp til et træ, skal typisk kunne beskrive:

• Hvad der er galt med træet
• Hvilken type hjælp personen søger
• Hvor opgaven befinder sig
• Hvordan personen kan kontaktes

Vi behøver ikke bede om træets alder, højde eller art.

Den slags oplysninger er ikke altid kendt.

Et godt design accepterer, at brugeren ikke nødvendigvis er ekspert.

1. Byg formularen med HTML

Vi begynder med almindelige HTML-elementer.

Gem følgende som index.html.

<!doctype html>
<html lang="da">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">

  <title>Træpleje - Kontaktformular</title>

  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

<body>
  <main class="container">
    <h1>Beskriv dit træ</h1>

    <p>
      Fortæl kort, hvad du har brug for hjælp til.
      Du behøver ikke kende træarten.
    </p>

    <p id="privacy-note">
      Dette er en demo. Oplysningerne sendes
      ikke til en server.
    </p>

    <form id="treeForm" action="#">
      <div class="field">
        <label for="name">Navn *</label>
        <input
          id="name"
          name="name"
          type="text"
          autocomplete="name"
          maxlength="100"
          required>
      </div>

      <div class="field">
        <label for="email">E-mail *</label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required>
      </div>

      <div class="field">
        <label for="service">
          Hvad drejer henvendelsen sig om?
        </label>

        <select id="service" name="service">
          <option value="">Vælg en mulighed</option>
          <option value="beskaering">Beskæring</option>
          <option value="traepleje">Træpleje</option>
          <option value="traefaeldning">Træfældning</option>
          <option value="vurdering">Trævurdering</option>
          <option value="andet">Andet</option>
        </select>
      </div>

      <div class="field">
        <label for="description">
          Beskriv opgaven *
        </label>

        <textarea
          id="description"
          name="description"
          rows="5"
          minlength="10"
          maxlength="2000"
          aria-describedby="descriptionHelp"
          required></textarea>

        <p id="descriptionHelp" class="help">
          Beskriv problemet med dine egne ord.
          Skriv mindst 10 tegn.
        </p>
      </div>

      <button type="submit">
        Kontrollér oplysninger
      </button>

      <p id="feedback"
         role="status"
         aria-live="polite"></p>
    </form>
  </main>
</body>
</html>

Formularen bruger almindelige HTML-elementer, som browseren allerede forstår.

Bemærk især forbindelsen mellem label og input.

Hvert felt har et unikt id, og den tilhørende label bruger samme værdi i attributten for.

Det gør formularen lettere at bruge med både mus, tastatur og hjælpemidler.

2. Brug browserens indbyggede validering

HTML kan selv kontrollere flere almindelige fejl.

Vi bruger blandt andet:

required til obligatoriske felter.

type="email" til at kontrollere e-mailadressens format.

minlength til at kræve en minimumslængde.

maxlength til at begrænse tekstmængden.

Det er ofte bedre at begynde med browserens egne funktioner end at skrive al validering fra bunden.

En bruger, der glemmer at udfylde et obligatorisk felt, får dermed hjælp fra browseren.

Men validering i browseren er ikke en sikkerhedsløsning.

Hvis formularen senere forbindes til en server, skal alle oplysninger også valideres på serveren.

3. Gør designet roligt og læsbart

Nu giver vi formularen et enkelt layout.

Gem følgende som style.css.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f4f7f3;
  color: #24372d;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.container {
  width: min(100% - 32px, 650px);
  margin: 50px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 14px;
}

h1 {
  color: #07533e;
  line-height: 1.3;
}

.field {
  margin: 22px 0;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid #82978a;
  border-radius: 8px;
  background: #ffffff;
  color: #24372d;
  font: inherit;
}

textarea {
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #b36b18;
  outline-offset: 3px;
}

.help {
  margin-top: 6px;
  font-size: 14px;
  color: #485d50;
}

button {
  width: 100%;
  min-height: 48px;
  padding: 14px 20px;
  border: none;
  border-radius: 8px;
  background: #07533e;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  background: #06422f;
}

#feedback {
  margin-top: 18px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .container {
    margin: 15px auto;
    padding: 20px;
  }
}

Læg mærke til fokusmarkeringen.

Når brugeren bevæger sig gennem formularen med Tab-tasten, skal det være tydeligt, hvilket felt der er aktivt.

Vi bruger derfor :focus-visible.

Vi sørger også for god afstand mellem felterne og en tydelig knap.

Det kan gøre en stor forskel på mobiltelefoner.

4. Tilføj JavaScript uden at overtage hele formularen

Formularen har allerede grundlæggende validering.

JavaScript skal derfor kun forbedre oplevelsen.

I denne demo viser vi en besked, når de nødvendige felter er korrekt udfyldt.

Opret filen script.js.

const form = document.querySelector("#treeForm");
const feedback = document.querySelector("#feedback");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = form.elements.namedItem("name")
    .value.trim();

  const description = form.elements
    .namedItem("description")
    .value.trim();

  if (!name || description.length < 10) {
    feedback.textContent =
      "Udfyld venligst de nødvendige oplysninger.";

    return;
  }

  feedback.textContent =
    "Oplysningerne er klar. " +
    "Dette er kun en demo, " +
    "så intet er blevet sendt.";
});

Vi bruger preventDefault(), fordi demoen ikke har nogen backend.

Browserens almindelige formularvalidering bliver stadig brugt.

Hvis et obligatorisk felt mangler, stopper browseren normalt indsendelsen, før vores submit-handler kører.

Når felterne er udfyldt korrekt, viser vi blot en besked.

Ingen oplysninger bliver sendt eller gemt.

Det er vigtigt, at brugeren ikke får indtryk af, at der er oprettet en rigtig henvendelse.

5. Hvorfor er tilgængelighed vigtig?

En kontaktformular bliver brugt af mange forskellige mennesker.

Nogle bruger en mus. Andre bruger tastatur eller skærmlæser.

Nogle har svært ved at læse lange instruktioner.

Derfor er det nyttigt at holde teksten enkel.

I vores eksempel bruger vi synlige labels i stedet for kun placeholders.

Vi markerer obligatoriske felter med både tekst og HTML-attributten required.

Vi har også tilføjet aria-live="polite" til beskedområdet.

Det kan hjælpe skærmlæsere med at informere brugeren, når tekstindholdet ændrer sig.

Men tilgængelighed handler ikke kun om at tilføje ARIA-attributter.

Det handler også om logisk rækkefølge, tydelige beskeder og almindelige HTML-elementer.

6. Test formularen som en rigtig bruger

Inden man forbinder formularen til en backend, bør den testes.

Prøv eksempelvis følgende:

Test uden mus

Brug Tab-tasten til at bevæge dig gennem alle felter.

Kan du se, hvor fokus er?

Test med tomme felter

Tryk på knappen uden at udfylde formularen.

Viser browseren, hvilke oplysninger der mangler?

Test med forkert e-mail

Skriv en værdi, som ikke har et gyldigt e-mailformat.

Bliver den afvist?

Test på mobil

Åbn formularen på en lille skærm.

Er felterne lette at læse og bruge?

Test med længere beskrivelser

Skriv en tekst med danske bogstaver og tegnsætning.

Fungerer feltet stadig korrekt?

Det er også værd at teste med en skærmlæser. Automatiske værktøjer kan finde nogle problemer, men de kan ikke erstatte manuel brugertest.

7. Fra demo til en rigtig kontaktformular

Hvis vi senere vil gøre formularen klar til brug på en hjemmeside, skal der mere til.

Vi skal blandt andet vælge en sikker backend, beskytte mod spam og håndtere personoplysninger ansvarligt.

Serveren skal kontrollere input uafhængigt af browseren.

Der skal også være en tydelig privatlivsinformation, hvis der indsamles kontaktoplysninger.

En formular bør kun bede om de data, der faktisk er nødvendige.

Det gælder især ved lokale servicehenvendelser, hvor brugeren måske blot ønsker at beskrive et træ og få en vurdering.

Et praktisk eksempel fra arboristbranchen

En arborist arbejder med træers sundhed, beskæring, struktur og sikkerhed.

En kunde kan derfor have mange forskellige spørgsmål.

Nogle vil gerne vide, om et gammelt træ kan bevares.

Andre søger hjælp til en beskadiget gren eller professionel træfældning.

Det er en god grund til at bygge en fleksibel kontaktformular, hvor brugeren kan beskrive problemet uden at kende de faglige begreber.

Dansk Træpleje arbejder med træpleje, beskæring, sundhedsvurdering og træfældning i Vejle.

Hvis du vil forstå den faglige kontekst bag eksemplet, kan du læse om arboristarbejde i Vejle og de forskellige opgaver, en arborist kan hjælpe med.

Eksemplet i denne artikel er selvstændigt udviklet som en læringsøvelse. Det er ikke en kopi af virksomhedens eksisterende kontaktformular.

Små forbedringer giver en bedre oplevelse

En kontaktformular behøver ikke avancerede animationer eller mange JavaScript-biblioteker.

Den skal først og fremmest være forståelig.

Med semantisk HTML, synlige labels, tydelig fokusmarkering og browserens indbyggede validering har vi allerede et godt udgangspunkt.

JavaScript kan forbedre oplevelsen, men bør ikke gøre en enkel opgave unødigt kompliceret.

Den vigtigste læring er måske denne:

Byg formularen til personen, der skal bruge den – ikke kun til udvikleren, der skriver koden.