System
Menu

Componenten / Uitgebreid / Formulier

Contactformulier

Compleet formulier met native validatie, foutoverzicht en Netlify Forms-attributen (werkt zonder backend).

UitgebreidFormulier2 instellingenform

Voorbeeld

Instellingen

Laden…

<form class="gx-form gx-form--two-col gx-panel" name="contact" method="post" data-netlify="true" netlify-honeypot="bot" data-gx="form">
  <p hidden>
    <label>Niet invullen 
      <input name="bot">
    </label>
  </p>
  <div class="gx-form__grid">
    <div class="gx-field">
      <label class="gx-label" for="c-name">Naam</label>
      <input class="gx-input" id="c-name" name="name" autocomplete="name" required>
    </div>
    <div class="gx-field">
      <label class="gx-label" for="c-mail">E-mailadres</label>
      <input class="gx-input" id="c-mail" name="email" type="email" autocomplete="email" inputmode="email" required>
    </div>
    <div class="gx-field gx-form__full">
      <label class="gx-label" for="c-msg">Bericht</label>
      <textarea class="gx-input gx-textarea" id="c-msg" name="message" rows="4" required></textarea>
    </div>
  </div>
  <label class="gx-check">
    <input type="checkbox" name="consent" required>
    <span class="gx-check__box" aria-hidden="true">
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M5 12.5l4.5 4.5L19 7"/>
      </svg>
    </span>
    <span>Ik ga akkoord met de privacyverklaring</span>
  </label>
  <div class="gx-row">
    <button class="gx-btn gx-btn--primary" type="submit">Verstuur
      <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M5 12h14M13 6l6 6-6 6"/>
      </svg>
    </button>
  </div>
</form>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

SleutelInstellingWaardenStandaard
layoutOpbouwtwo-col stackedtwo-col
boxedIn vlakaan / uittrue

Richtlijnen

Toegankelijkheid

  • Fouten verschijnen naast het veld na verzenden, focus naar het eerste foute veld (runtime).
  • Honeypot in plaats van captcha.

Wel

  • Alleen vragen wat je nodig hebt.

Niet

  • Placeholder als label.

Verwant

TekstveldInvoerveld met zichtbaar label, hulptekst en foutmelding direct onder het veld.
TekstvakMeerregelige invoer die meegroeit met de inhoud (field-sizing waar de browser het kent).
KeuzelijstNative select met eigen pijl: werkt overal, ook met toetsenbord en op mobiel.
SelectievakjeEén of meer keuzes aan of uit. Eigen vinkje, native input eronder.