Formulário Contato HTML

Contact forms that actually convert

A contact form is usually the single highest-leverage conversion point on a small site — it is how leads, support requests and partnership inquiries reach you. The math is brutal: industry studies put form abandonment rates around 67–81%, and the most consistent predictor is field count. Cutting one optional field can lift completions by double-digit percentages. Start from the smallest possible form (name, email, message) and only add fields you will actually act on.

A reasonable HTML5 baseline looks like this:

<form action="/contact" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" required autocomplete="name">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email" inputmode="email">
  <label for="msg">Message</label>
  <textarea id="msg" name="message" required minlength="20"></textarea>
  <button type="submit">Send</button>
</form>

Where the form sends data

If you do not run a backend, plug into a form-to-email service. Popular options: Netlify Forms (drop a netlify attribute, zero code), Formspree, Getform, Web3Forms, Basin and Formcarry. With a real backend (Express, Rails, Laravel, Next.js Route Handler), POST to your own endpoint and validate again server-side — client validation is for UX, server validation is for trust.

Spam prevention without ruining UX

reCAPTCHA v3 (invisible) is the historical default, but it ships Google tracking and is increasingly being replaced by Cloudflare Turnstile (privacy-friendly, free) and hCaptcha. Even simpler: a honeypot field hidden via CSS that bots fill and humans never see, plus a minimum time-on-page check (less than 2 seconds = bot). These two techniques alone block 80–95% of automated spam without a single CAPTCHA challenge for legitimate users.

Accessibility and mobile UX

• Every input needs a real <label for> — placeholder is not a label.
• Use aria-required="true" and toggle aria-invalid="true" on validation errors.
• Set autocomplete attributes (name, email, tel) — autofill alone improves completion rates.
• Set inputmode="email", inputmode="tel" or inputmode="numeric" for the right mobile keyboard.
• Inline error messages right below the field, not in a list at the top of the form.
• Move focus to the first error after submit so keyboard and screen-reader users land on it.

Privacy, GDPR and LGPD

Display a short consent message linking to your privacy policy near the submit button. A newsletter opt-in must be a separate, unchecked-by-default checkbox — bundling marketing consent with the contact request is illegal under GDPR and LGPD. Storage of the submission falls under data processing rules: spell out the retention period and the user's right to deletion in your policy.

FAQ

Do I need reCAPTCHA? No. Honeypot plus time-on-page covers most spam; Turnstile or hCaptcha are better than reCAPTCHA when you do need a challenge.

How many fields are too many? Each extra field measurably lowers conversion. Start at three (name, email, message) and add fields only when removing them would make your follow-up impossible.

Is newsletter opt-in mandatory? No — and bundling it with the contact form violates GDPR/LGPD. Keep marketing consent as a separate, opt-in checkbox.

Should I auto-save drafts to localStorage? For long forms (5+ fields) yes; for a quick contact form it is overkill and can leak previously typed content on shared computers.