Menu
Componenten / Uitgebreid / Formulier
Contactformulier
Compleet formulier met native validatie, foutoverzicht en Netlify Forms-attributen (werkt zonder backend).
UitgebreidFormulier2 instellingen
formInstellingen
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.
| Sleutel | Instelling | Waarden | Standaard |
|---|---|---|---|
layout | Opbouw | two-col stacked | two-col |
boxed | In vlak | aan / uit | true |
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.