Can I create a contact form with just HTML?

Yes. You can build the entire form with HTML markup. To receive submissions without a backend server, point the form action at a hosted form endpoint like FormsFort, Formspree, or Getform.

How do I make my HTML form send emails?

Add an action attribute pointing to a form backend service. The service receives the submission, processes spam checks, and delivers the data via email, webhook, or spreadsheet.

What is the best way to prevent spam on an HTML contact form?

Use a combination of a hidden honeypot field, a CAPTCHA challenge, rate limiting by IP, and allowed domain restrictions. A honeypot field catches most bots without affecting user experience.

Do I need JavaScript for an HTML contact form?

No. A standard HTML form with method='POST' and an action URL works without JavaScript. You can add JavaScript for AJAX submission and custom validation, but it is not required.

How do I add file uploads to an HTML contact form?

Set the form enctype to multipart/form-data and add an input with type='file'. The form backend must support file uploads and scanning.

Cómo crear un formulario de contacto en HTML

Un formulario de contacto es una de las funcionalidades más comunes en cualquier sitio web. Si su sitio está creado con un generador de sitios estáticos como Astro, Hugo, exportación estática de Next.js o HTML simple, podría pensar que necesita un servidor backend para procesar los envíos del formulario. No lo necesita.

Esta guía explica cómo crear un formulario de contacto HTML completo y listo para producción desde cero, incluido el marcado accesible, la validación del lado del cliente, la protección antispam y la entrega de correo electrónico a través de un endpoint de formulario alojado.

El formulario de contacto HTML básico

Every HTML form needs three things: a <form> element, input fields with name attributes, and a submit button.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="name">Name</label>
5
  <input type="text" id="name" name="name" required />
6

7
  <label for="email">Email</label>
8
  <input type="email" id="email" name="email" required />
9

10
  <label for="message">Message</label>
11
  <textarea id="message" name="message" rows="5" required></textarea>
12

13
  <button type="submit">Send message</button>
14
</form>

The action attribute tells the browser where to send the form data. The method="POST" attribute sends the data as a POST request. Each field needs a name attribute so the backend knows what each value represents.

The hidden access_key field identifies your form to the backend service. Replace YOUR_ACCESS_KEY with the key from your form backend dashboard.

Agregar etiquetas y estructura accesibles

Accessible forms help all users, including those using screen readers. Every input should have a visible <label> associated via the for attribute matching the input id.

Group related fields with <fieldset> and <legend> when appropriate:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <fieldset>
5
    <legend>Your information</legend>
6

7
    <label for="name">Full name</label>
8
    <input type="text" id="name" name="name" autocomplete="name" required />
9

10
    <label for="email">Email address</label>
11
    <input type="email" id="email" name="email" autocomplete="email" required />
12
  </fieldset>
13

14
  <label for="message">How can we help?</label>
15
  <textarea id="message" name="message" rows="5" maxlength="2000" required></textarea>
16

17
  <button type="submit">Send message</button>
18
</form>

The autocomplete attribute helps browsers fill in known values. The maxlength attribute prevents excessively long submissions.

Agregar validación HTML5

HTML5 proporciona atributos de validación integrados que funcionan sin JavaScript:

Atributo	Propósito
`required`	El campo no debe estar vacío
`type="email"`	Debe ser un formato de correo electrónico válido
`type="url"`	Debe ser una URL válida
`type="tel"`	Optimiza el teclado móvil para números de teléfono
`minlength`	Recuento mínimo de caracteres
`maxlength`	Recuento máximo de caracteres
`pattern`	Validación de expresiones regulares personalizada
`min` / `max`	Límites de rango numérico

Ejemplo con validación:

1
<label for="email">Work email</label>
2
<input
3
  type="email"
4
  id="email"
5
  name="email"
6
  required
7
  pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$"
8
  title="Enter a valid email address"
9
/>
10

11
<label for="phone">Phone (optional)</label>
12
<input
13
  type="tel"
14
  id="phone"
15
  name="phone"
16
  pattern="[0-9\-\+\(\)\s]{7,20}"
17
  title="Enter a valid phone number"
18
/>

The title attribute provides the validation message shown when the pattern does not match.

Agregar protección antispam con un campo honeypot

Los bots que rastrean la web y completan formularios generalmente llenan todos los campos visibles. Un campo honeypot es una entrada oculta que los usuarios legítimos nunca ven ni completan. Si el campo tiene un valor cuando se envía el formulario, el envío proviene de un bot.

1
<input
2
  type="text"
3
  name="botcheck"
4
  style="position: absolute; left: -9999px; opacity: 0;"
5
  tabindex="-1"
6
  autocomplete="off"
7
/>

Place this inside your <form> element. Do not use display: none or type="hidden" because sophisticated bots check for those. The CSS positioning approach hides the field visually while keeping it in the DOM.

La mayoría de los servicios backend de formularioss, incluido FormsFort, rechazan automáticamente los envíos donde el campo honeypot tiene un valor.

Agregar un CAPTCHA para una mayor protección antispam

Para formularios con mucho tráfico, agregue un desafío CAPTCHA junto al honeypot. FormsFort admite Turnstile, hCaptcha y reCAPTCHA:

1
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
2
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

El token de respuesta CAPTCHA se incluye automáticamente en el envío del formulario. El backend de su formulario lo verifica en el lado del servidor antes de procesarlo.

Manejar carga de archivos

To accept file attachments, set the form enctype to multipart/form-data and add a file input:

1
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="resume">Upload your resume</label>
5
  <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" />
6

7
  <button type="submit">Submit application</button>
8
</form>

The accept attribute restricts the file picker to specific file types. Your form backend should also validate MIME types and scan files for malware.

Envío a través de AJAX con JavaScript

Para una experiencia de usuario más fluida, envíe el formulario sin recargar la página completa:

1
<form id="contactForm" action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="email">Email</label>
4
  <input type="email" id="email" name="email" required />
5
  <label for="message">Message</label>
6
  <textarea id="message" name="message" required></textarea>
7
  <button type="submit">Send</button>
8
  <p id="formStatus" aria-live="polite"></p>
9
</form>
10

11
<script>
12
  document.getElementById("contactForm").addEventListener("submit", async (e) => {
13
    e.preventDefault();
14
    const form = e.target;
15
    const status = document.getElementById("formStatus");
16
    status.textContent = "Sending...";
17

18
    try {
19
      const response = await fetch(form.action, {
20
        method: "POST",
21
        body: new FormData(form),
22
      });
23
      if (response.ok) {
24
        status.textContent = "Message sent. We will be in touch.";
25
        form.reset();
26
      } else {
27
        status.textContent = "Something went wrong. Please try again.";
28
      }
29
    } catch {
30
      status.textContent = "Network error. Please check your connection.";
31
    }
32
  });
33
</script>

The aria-live="polite" attribute ensures screen readers announce the status change.

Redirigir después del envío

To redirect users to a thank-you page after a successful standard (non-AJAX) submission, add a hidden _redirect field:

1
<input type="hidden" name="_redirect" value="https://example.com/thanks" />

Formulario de contacto completo y listo para producción

Aquí hay un formulario de contacto completo que combina todas las técnicas anteriores:

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="_redirect" value="https://example.com/thanks" />
4
  <input type="hidden" name="_subject" value="New contact form submission" />
5

6
  <input
7
    type="text"
8
    name="botcheck"
9
    style="position: absolute; left: -9999px; opacity: 0;"
10
    tabindex="-1"
11
    autocomplete="off"
12
  />
13

14
  <label for="name">Name</label>
15
  <input type="text" id="name" name="name" autocomplete="name" required />
16

17
  <label for="email">Email</label>
18
  <input type="email" id="email" name="email" autocomplete="email" required />
19

20
  <label for="message">Message</label>
21
  <textarea id="message" name="message" rows="5" maxlength="2000" required></textarea>
22

23
  <button type="submit">Send message</button>
24
</form>

Elegir un backend de formularios

Si aloja un sitio estático, necesita un servicio para recibir y procesar envíos. Las opciones populares incluyen:

Servicio	Nivel gratuito	Carga de archivos	Webhooks	Google Sheets
FormsFort	100/mo	Sí	Sí	Sí
Formspree	50/mo	Sí	Sí	No
Getform	50/mo	Sí	Sí	No
Basin	100/mo	Sí	Sí	No

Elija según el volumen de envío, las necesidades de integración y los requisitos de protección antispam.

Resumen

La creación de un formulario de contacto HTML no requiere código de backend. Estructura tu marcado con etiquetas accesibles, agrega atributos de validación HTML5, protégete contra el spam con un campo honeypot y dirige la acción del formulario a un endpoint alojado. El resultado es un formulario listo para producción que funciona en cualquier sitio web estático.

Cómo crear un formulario de contacto en HTML: guía completa