Consentimiento y RGPD para una web pequeña: cómo cumplir sin comprar plugin

Hace dos años, una gestora administrativa de Salamanca recibió una carta de la AEPD: multa de 3.000 euros. El motivo no era un ataque, ni una fuga de datos. Había cogido un formulario de contacto gratuito de internet, lo pegó en su web, y no tenía aviso de cookies. No recopilaba datos sensibles. Pero sí recopilaba datos. Sin consentimiento. Eso es.

La historia se repite. Una web pequeña, un responsable que sabe HTML pero no legislación, y de repente hay que "cumplir RGPD" sin saber por dónde empezar. Y claro, lo primero que ves en Google es un anuncio: "Solución RGPD todo en uno, 29 euros/mes".

No hace falta. Una política de privacidad, un banner de cookies, un formulario que pide consentimiento, y código HTML limpio que se puede escribir en una tarde. Esto es lo que necesitas, sin plugin, sin suscripción, sin jerga legal que nadie entiende.

Qué dice la ley (de verdad)

El RGPD es el Reglamento General de Protección de Datos. Entró en vigor en mayo de 2018 en toda la UE. La AEPD, que es la Agencia Española de Protección de Datos, es quien lo vigila aquí.

El punto clave: si tu web recopila datos de personas (nombres, correos, comportamiento en la web), tienes que decirles qué haces con eso, y debes pedir permiso.

No es una sugerencia. Es obligatorio.

Las multas varían. La AEPD puede sancionar desde 100 euros hasta 20 millones o el 4% de facturación anual, según el caso. Para una pyme de 100.000 euros de facturación, 4% son 4.000 euros. Para una de un millón, son 40.000.

¿Por qué se multa? No siempre es por mala intención. La gestora de Salamanca no era criminal. Simplemente copió código sin verificar qué pasaba con los datos.

Hay cuatro obligaciones:

1. Avisar que usas cookies o rastreadores.
2. Pedir consentimiento antes de instalar cookies no esenciales.
3. Tener una política de privacidad que explique qué haces con datos.
4. Dejar borrar datos si alguien lo pide.

Eso es. No necesitas un DPA negociado, no necesitas auditoría externa, no necesitas consultor de 15.000 euros. Necesitas claridad. Y eso sale gratis.

Cookies: qué son y cuáles necesitan consentimiento

Una cookie es un archivo minúsculo que el navegador guarda. Tiene un nombre, un valor, una fecha de expiración. Nada más.

Ejemplos:

• Cookie de sesión: recordar que estás logueado.
• Cookie de análisis: contar cuántas personas visitan.
• Cookie de publicidad: mostrar anuncios según qué viste antes.

La AEPD distingue entre dos tipos.

Cookies esenciales: son obligatorias para que la web funcione. Sesión, carrito de compra, preferencias de idioma. No necesitan consentimiento.

Cookies no esenciales: Google Analytics, Meta Pixel, Intercom, cualquier script de terceros. Estas sí necesitan consentimiento previo. El usuario debe aceptarlas antes de instalarlas.

¿Cómo saber si una cookie es esencial o no? Pregunta: "¿Si desactivo esta cookie, deja de funcionar la web?" Si la respuesta es sí, es esencial. Si es no, necesita consentimiento.

Google Analytics no es esencial. La web funciona sin ella. Luego necesita consentimiento.

Un formulario de contacto es esencial, porque sin él no puedes recibir mensajes. Luego no necesita consentimiento de cookies. Pero sí de tratamiento de datos personales (nombre, correo, teléfono).

Estructura mínima: aviso, política, formulario

Cualquier web pequeña necesita tres cosas:

1. Un banner o aviso que diga "usamos cookies".
2. Una página de política de privacidad que explique qué haces.
3. Formularios que pidan consentimiento explícito.

No es complicado. Veamos cada una.

1. Banner de cookies que cumple

El banner tiene que estar visible cuando el usuario llega. Debe tener dos botones de tamaño igual: "Aceptar" y "Rechazar". No vale ocultar el botón de rechazar ni hacer que el botón de aceptar sea más grande. La AEPD lo vigila.

El texto del banner debe ser claro. Algo como:

"Esta web usa cookies de análisis (Google Analytics) para contar visitantes y mejorar la experiencia. También usamos cookies de sesión para que funcione el formulario de contacto. Aceptar significa que permites guardar una pequeña información en tu navegador. Puedes rechazar o cambiar preferencias en cualquier momento."

Y luego dos botones lado a lado, mismo tamaño, mismo color (o colores distintos pero que visualmente sean iguales).

Aquí está el código HTML y JavaScript que necesitas:

<!-- Banner de cookies -->
<div id="cookie-banner" class="cookie-banner">
  <div class="cookie-content">
    <h2>Cookies y privacidad</h2>
    <p>Esta web usa cookies de análisis (Google Analytics) para entender cómo la usas. También cookies de sesión para que funcione el formulario. Puedes aceptar, rechazar o cambiar preferencias en cualquier momento.</p>
    <div class="cookie-buttons">
      <button id="cookie-reject" class="btn-secondary">Rechazar</button>
      <button id="cookie-accept" class="btn-primary">Aceptar</button>
    </div>
    <a href="/politica-privacidad" class="cookie-link">Ver política de privacidad</a>
  </div>
</div>

<style>
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 20px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.cookie-content {
  max-width: 600px;
  margin: 0 auto;
}

.cookie-content h2 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.cookie-content p {
  margin: 0 0 15px 0;
  line-height: 1.5;
  color: #333;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border: 1px solid #333;
  background: white;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  flex: 1;
}

.btn-primary {
  background: #333;
  color: white;
}

.btn-secondary {
  background: white;
  color: #333;
}

.btn-primary:hover {
  background: #555;
}

.btn-secondary:hover {
  background: #f0f0f0;
}

.cookie-link {
  display: inline-block;
  font-size: 12px;
  color: #666;
  text-decoration: underline;
}

.hidden {
  display: none !important;
}
</style>

<script>
// Gestión de cookies de consentimiento
(function() {
  const banner = document.getElementById('cookie-banner');
  const acceptBtn = document.getElementById('cookie-accept');
  const rejectBtn = document.getElementById('cookie-reject');

  // Verifica si el usuario ya decidió
  function checkConsentStatus() {
    const consent = localStorage.getItem('cookie-consent');
    if (consent) {
      banner.classList.add('hidden');
      if (consent === 'accepted') {
        loadAnalytics();
      }
    }
  }

  // Acepta cookies
  acceptBtn.addEventListener('click', function() {
    localStorage.setItem('cookie-consent', 'accepted');
    localStorage.setItem('cookie-date', new Date().toISOString());
    banner.classList.add('hidden');
    loadAnalytics();
    // Recarga página para que Google Analytics se inicie
    location.reload();
  });

  // Rechaza cookies
  rejectBtn.addEventListener('click', function() {
    localStorage.setItem('cookie-consent', 'rejected');
    localStorage.setItem('cookie-date', new Date().toISOString());
    banner.classList.add('hidden');
  });

  // Carga Google Analytics solo si el usuario aceptó
  function loadAnalytics() {
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXX';
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'G-XXXXX');
  }

  // Ejecuta al cargar
  checkConsentStatus();
})();
</script>

Nota: reemplaza G-XXXXX con tu ID de Google Analytics.

El flujo es simple:

1. La página carga. El banner aparece.
2. El usuario hace clic en "Aceptar" o "Rechazar".
3. La elección se guarda en localStorage (el navegador del usuario).
4. Si aceptó, Google Analytics se carga. Si rechazó, no.
5. La próxima vez que visite, el banner no aparece.

Eso es todo. Sin plugin de terceros. Sin servicios externos. Sin suscripción.

2. Política de privacidad: plantilla mínima

Aquí es donde muchas pymes fallan. O ponen un PDF de 20 páginas que parece contrato de fusión bancaria, o no ponen nada.

La política debe tener estos puntos:

• Quién es responsable (tú, tu empresa).
• Qué datos recopilas (nombre, correo, IP).
• Por qué los recopilas (procesar formularios, mejorar web).
• Con quién los compartes (Google Analytics, nadie más).
• Cuánto tiempo los guardas.
• Derechos del usuario (acceso, rectificación, borrado).
• Cómo contactar si hay un problema.

Aquí está la plantilla completa, adaptada para una web pequeña:

# Política de Privacidad

## 1. Responsable

[Tu nombre] ([Tu empresa]), con domicilio en [Tu dirección] y CIF [Tu CIF/NIF], es responsable del tratamiento de tus datos personales.

Contacto: [Tu correo] | Teléfono: [Tu teléfono]

## 2. Datos que recopilamos

Recopilamos datos que tú nos das voluntariamente:
- Nombre
- Correo electrónico
- Teléfono (opcional)
- Mensaje o consulta
- Asunto

No recopilamos datos automáticos excepto:
- Dirección IP: para gestionar el servidor y detectar abuso.
- Referrer: para ver desde dónde llegas (Google, redes sociales).
- User-Agent: para saber qué navegador usas (Chrome, Firefox).

## 3. Por qué recopilamos datos

Usamos los datos que nos envías para:
- Responderte a tu consulta.
- Contactarte si es necesario aclarar algo.
- Mejorar la web según cómo la usas.
- Cumplir obligaciones legales (facturas, archivos fiscales).

No hacemos perfilado ni segmentación. No vendemos datos. No los compartimos con terceros para marketing.

## 4. Cookies y rastreadores

### Cookies esenciales (no necesitan consentimiento)
- Sesión: para que funcione el formulario.
- Preferencia de idioma: para recordar qué idioma elegiste.

### Cookies no esenciales (necesitan consentimiento)
- Google Analytics (ID: G-XXXXX): contar visitantes, ver qué páginas son populares.
- Cloudflare: proteger la web de ataques DDoS.

Si rechazas cookies no esenciales, la web funciona normalmente, solo sin análisis.

## 5. Con quién compartimos datos

- Google Analytics: Google procesa datos de visitas.
- Cloudflare: Cloudflare procesa datos de seguridad.
- Nadie más.

Ambos tienen acuerdos RGPD. Google y Cloudflare no usan tus datos para publicidad.

## 6. Cuánto tiempo guardamos datos

- Datos del formulario: 12 meses. Después, borrado.
- Cookies de sesión: caducan cuando cierras el navegador.
- Cookies de análisis: Google Analytics retiene 14 meses.

Si pides borrado explícito, borramos en 30 días.

## 7. Tus derechos

Tienes derecho a:
- Acceso: saber qué datos tenemos de ti.
- Rectificación: corregir datos incorrectos.
- Borrado: pedir que los eliminemos ("derecho al olvido").
- Limitación: pedir que no procesemos algunos datos.
- Portabilidad: recibir tus datos en formato descargable.
- Oposición: rechazar cualquier proceso de datos.

Para ejercer estos derechos, envía un email a [tu correo] con asunto "Derechos RGPD" y tu solicitud. Respondemos en 30 días.

## 8. Seguridad

Usamos HTTPS (la conexión está encriptada). No almacenamos contraseñas. Los datos del formulario se guardan en [dónde: Google Drive, base de datos privada, correo]. No hay acceso público.

## 9. Cambios en esta política

Si cambiamos algo importante, lo anunciamos en la web. Esta política se actualiza regularmente. Última actualización: [fecha hoy].

## 10. Contacto AEPD

Si tienes una reclamación sobre cómo tratamos tus datos, puedes contactar con la AEPD:
- Web: www.aepd.es
- Teléfono: 900 100 100
- Dirección: Paseo de la Castellana 141, Madrid

Eso es. Una página. Descargable. Entendible sin abogado. Cumple.

3. Formulario de contacto que pide consentimiento

Aquí empieza el tratamiento de datos. Un formulario de contacto recibe nombre, correo, teléfono. Eso son datos personales. Tienes que pedir permiso explícito.

Mucha gente confunde esto: "Si alguien me manda un formulario, ¿necesito que consienta?" Sí. El acto de enviar el formulario no es consentimiento automático. Tienes que tener un checkbox que diga "Acepto que proceses mi información según la política de privacidad".

Aquí está el código:

<form id="contact-form" class="contact-form">
  <div class="form-group">
    <label for="name">Nombre *</label>
    <input type="text" id="name" name="name" required aria-label="Tu nombre">
  </div>

  <div class="form-group">
    <label for="email">Correo electrónico *</label>
    <input type="email" id="email" name="email" required aria-label="Tu correo">
  </div>

  <div class="form-group">
    <label for="phone">Teléfono</label>
    <input type="tel" id="phone" name="phone" aria-label="Tu teléfono">
  </div>

  <div class="form-group">
    <label for="message">Mensaje *</label>
    <textarea id="message" name="message" required rows="5" aria-label="Tu mensaje"></textarea>
  </div>

  <div class="form-group checkbox">
    <input type="checkbox" id="consent" name="consent" required>
    <label for="consent">
      Acepto que proceses mi nombre, correo y teléfono según la 
      <a href="/politica-privacidad" target="_blank">política de privacidad</a>. *
    </label>
  </div>

  <button type="submit" class="btn-submit">Enviar</button>
  <div id="form-message" class="form-message"></div>
</form>

<style>
.contact-form {
  max-width: 500px;
  margin: 30px auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.form-group.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-group.checkbox input {
  width: auto;
  margin-top: 3px;
}

.form-group.checkbox label {
  margin: 0;
  font-size: 14px;
}

.form-group.checkbox a {
  color: #333;
}

.btn-submit {
  padding: 12px 30px;
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-submit:hover {
  background: #555;
}

.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.form-message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  display: none;
}

.form-message.success {
  background: #d4edda;
  color: #155724;
  display: block;
}

.form-message.error {
  background: #f8d7da;
  color: #721c24;
  display: block;
}
</style>

<script>
document.getElementById('contact-form').addEventListener('submit', async function(e) {
  e.preventDefault();

  const form = this;
  const messageDiv = document.getElementById('form-message');
  const submitBtn = form.querySelector('.btn-submit');

  // Validación básica
  if (!form.consent.checked) {
    messageDiv.textContent = 'Debes aceptar la política de privacidad.';
    messageDiv.classList.remove('success');
    messageDiv.classList.add('error');
    return;
  }

  // Prepara los datos
  const formData = new FormData(form);
  const data = {
    name: formData.get('name'),
    email: formData.get('email'),
    phone: formData.get('phone') || 'No proporcionado',
    message: formData.get('message'),
    consent: true,
    timestamp: new Date().toISOString()
  };

  // Envía a tu servidor
  submitBtn.disabled = true;
  submitBtn.textContent = 'Enviando...';

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });

    if (response.ok) {
      messageDiv.textContent = 'Gracias. Nos pondremos en contacto pronto.';
      messageDiv.classList.remove('error');
      messageDiv.classList.add('success');
      form.reset();
      submitBtn.disabled = false;
      submitBtn.textContent = 'Enviar';
    } else {
      throw new Error('Error en el servidor');
    }
  } catch (error) {
    messageDiv.textContent = 'Error al enviar. Intenta de nuevo.';
    messageDiv.classList.remove('success');
    messageDiv.classList.add('error');
    submitBtn.disabled = false;
    submitBtn.textContent = 'Enviar';
  }
});
</script>

Puntos clave:

• El checkbox está marcado como required. No se puede enviar el formulario sin aceptar.
• El texto dice explícitamente qué datos se procesan (nombre, correo, teléfono).
• Hay un enlace a la política de privacidad.
• Al enviar, se registra timestamp y consentimiento para auditoría.

En el backend, cuando recibas los datos, guarda también:

• IP del usuario
• Fecha y hora exacta
• Que aceptó consentimiento

Así, si la AEPD audita, puedes demostrar: "El usuario envió nombre, correo, teléfono, Y marcó que aceptaba la política. Todo documentado."

Gestión de derechos: acceso, borrado, rectificación

La gente tiene derecho a pedirte que borre sus datos. O que les muestres qué tienes guardado.

No es complicado si planificas desde el principio. En tu formulario, además de nombre/correo/mensaje, guarda:

• ID único (número que no se repite).
• Timestamp (fecha y hora exacta).
• IP del usuario (para auditoría, opcional).
• Estado del consentimiento (aceptado/rechazado).

Cuando alguien envíe un email diciendo "Quiero que borreis mis datos", tienes 30 días para:

1. Identificar todos los registros con su correo.
2. Borrarlos.
3. Confirmar que está hecho.

Un script simple en tu base de datos (si usas una):

-- Ejemplo con SQLite o similar
DELETE FROM formulario_contacto
WHERE email = 'usuario@example.com'
AND timestamp < date('now', '+30 days');

Si solo usas Google Forms o un servicio que almacena datos, tienes que ir manually a borrar. Por eso conviene tener control: descarga los datos periódicamente, borralos cuando se cumpla el plazo.

Qué hace que una web pequeña cumpla

Resumido:

1. Banner visible: aparece al llegar, dos botones iguales, explica qué cookies usas.
2. Política de privacidad: una página con qué datos recopilas, por qué, con quién, cuánto tiempo.
3. Consentimiento explícito en formularios: checkbox obligatorio que diga qué datos se tratan.
4. Documentación: guarda copias de consentimiento, timestamps, IPs. Si auditan, demuestras que pediste permiso.
5. Derecho al borrado: tienes un proceso para borrar datos si alguien lo pide.
6. Borrado automático: después de 12 meses (o el plazo que uses), borra datos antiguos.

Eso vale para una web pequeña. Si después creces, añades más rigor. Pero esto es el mínimo que necesitas.

Errores que ves constantemente

Error 1: ignorar cookies de terceros

Instalaste un widget de chat (Intercom, Drift), un popup de descuentos (Privy), Google Analytics. Todos cargan cookies. No basta con tu banner. Cada servicio tercero también tiene que respetar consentimiento.

La solución es verificar que cada servicio tiene su propia política de privacidad y que respeta el estándar RGPD. La mayoría lo hace. Google Analytics, por ejemplo, no carga si rechazas consentimiento (si lo configuras bien).

Error 2: guardar datos eternamente

"Bueno, los datos están aquí, por si acaso." Mal. La ley dice "tiempo limitado". Para un formulario de contacto, 12 meses es razonable. Después, borra.

Error 3: no dejar rechazar fácilmente

El botón de rechazar está escondido, es pequeño, o requiere hacer clic en 5 lugares. La AEPD vigila esto. Los dos botones deben ser igual de accesibles.

Error 4: pre-marcar cookies

Antiguamente, algunos banners venían con checkboxes ya marcados ("Si no haces nada, aceptas"). No vale. Tiene que ser opt-in: el usuario marca voluntariamente.

Error 5: no actualizar la política

Tu política dice "No usamos Google Analytics" pero ahora sí lo usas. Eso es incumplimiento. Cada vez que cambies, actualiza la política y avisa.

Herramientas gratuitas que completan

No necesitas plugin, pero hay servicios gratuitos que ayudan:

• Termly: generador automático de política de privacidad. Haces un cuestionario, genera el texto. Gratis para webs pequeñas.
• Privacy Policy Generator: parecido a Termly.
• Google Analytics (versión conforme a RGPD): si configuraste bien, Google Analytics respeta consentimiento.

Ninguno es imprescindible. Todas las herramientas aquí son de código abierto o pueden replicarse con HTML/JavaScript básico.

Checklist de implementación (paso a paso)

Semana 1:

• Escribe política de privacidad (usa la plantilla, personaliza con tus datos).
• Pública en una página visible (ej: /politica-privacidad).
• Actualiza términos de servicio si tienes (declara que usas cookies).

Semana 2:

• Instala el banner de cookies (copia el código HTML/JS, ajusta los estilos).
• Verifica que Google Analytics solo se carga si el usuario aceptó.
• Test: rechaza cookies, recarga, verifica que Google Analytics no cargó.
• Test: acepta cookies, verifica que carga.

Semana 3:

• Revisa formularios (añade checkbox de consentimiento a todos).
• Verifica que guardan timestamp y consentimiento (auditoría).
• Crea proceso de borrado de datos antiguos (script automático o manual cada 30 días).

Semana 4:

• Haz copia de seguridad de política y código (por si auditan).
• Documenta dónde almacenas datos (Google Drive, base de datos, correo).
• Configura alertas: si alguien pide "borrar mis datos", sabes dónde actuar.

Esto es realista para una web pequeña. No es complejo. Es organización.

Costes reales

• Hosting: 5-20 euros/mes (tengas RGPD o no).
• Dominio: 10 euros/año.
• Plugin de cookies: 0 euros (usas JavaScript propio).
• Consultor legal: 500-2.000 euros si contratas. Opcional.
• Seguro de responsabilidad civil: 200-500 euros/año si tienes datos sensibles.

Si haces esto tú mismo: 150-240 euros/año. Si contratas consultor para revisar: +500 euros, una sola vez.

Mucho menos que 29 euros/mes forever.

Links y referencias

Aquí está todo verificado:

• Guía oficial de cookies AEPD
• AEPD: contacto y recursos
• EDPB Guidelines on Cookie Walls
• Artículo 4.11 RGPD: definición de consentimiento
• Derechos RGPD (acceso, borrado, portabilidad)

Conclusión (si la necesitas)

Cumplir RGPD no es comprar un plugin de 29 euros al mes. Es decirle a la gente qué haces con sus datos, pedirle permiso y respetarlo.

Para una web pequeña: una política clara, un banner honesto, un formulario que pide consentimiento. Eso es 80% del trabajo.

El 20% restante es disciplina: actualizar cuando cambies servicios, borrar datos viejos, responder si alguien pide acceso o borrado.

La gestora de Salamanca pudo haber evitado los 3.000 euros. Solo necesitaba un banner, una política, y un checkbox. Tres horas de trabajo.

Ahí está todo. Sin plugin. Sin suscripción. Sin humo legal.