Tienes un formulario de Google que funciona. Ahora lo quieres en tu propio sitio, e idealmente con el aspecto del resto de tu sitio y no con el de Google.
La vía de la incrustación se resuelve en dos minutos, y en algunas situaciones es la decisión correcta. Pero tiene un límite duro que no se salta con CSS, y conviene saberlo antes de pasarte una tarde peleándote con él.
Qué te da realmente la incrustación
En Google Forms, Enviar → <> te da un iframe:
<iframe
src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true"
width="640"
height="800"
frameborder="0"
></iframe>Pega eso en tu página y el formulario aparece. Funciona, los envíos van a tu hoja de cálculo y ya está.
Ahora la parte que merece entenderse: un iframe es un documento aparte. El CSS de tu página no puede alcanzar su interior. Ni con selectores descendentes, ni con !important, ni apuntando al propio elemento iframe. La política de mismo origen del navegador lo impide, y es una frontera de seguridad, no una limitación que alguien olvidó quitar.
Así que lo que puedes cambiar es lo que Google te ofrece en la interfaz de Forms: un color de tema, una imagen de cabecera y una de entre un puñado de tipografías. Lo que no puedes cambiar es la maquetación, el estilo de los campos, el diseño del botón, los espaciados ni el aviso de “Powered by Google”. Si tu sitio tiene una estética propia, el formulario no va a encajar con ella. Va a parecer un formulario de Google metido dentro de tu página, porque es exactamente lo que es.
Dos costes menores, fáciles de pasar por alto:
- Peso de la página. El iframe carga el CSS y el JavaScript propios de Google, totalmente aparte de los recursos de tu sitio. En una página estática rápida, suele ser lo más pesado de toda la página.
- Altura fija. Defines
heighten píxeles. Si es pequeña, el formulario hace scroll dentro de su propia caja y da sensación de estar roto. Si es grande, te queda un hueco en blanco. No puede ajustarse a su contenido, y en el móvil es donde peor se ve por esto.
Cuándo incrustar es de verdad la respuesta correcta
No es que incrustar esté siempre mal. Encaja bien cuando:
- Es interno. Una encuesta de equipo, una consulta de disponibilidad, el pedido de comida de la oficina. Nadie está juzgando tu marca y la hoja de cálculo es justo donde quieres las respuestas.
- Es temporal. Una inscripción puntual a un evento que borrarás en tres semanas. Rehacerla es esfuerzo perdido.
- Necesitas una hoja de cálculo como destino. Si las respuestas alimentan un flujo de trabajo en hojas de cálculo, Google Forms te lo da sin configurar nada.
- Necesitas los tipos de pregunta de Google. Escalas lineales, validación de respuestas, secciones con lógica de ramificación. Rehacer eso en HTML es trabajo de verdad.
Si estás en uno de esos casos, incrústalo y sigue adelante. El resto de este artículo es para cuando no lo estás.
Cuándo conviene rehacerlo como HTML
Rehazlo cuando el formulario da la cara ante clientes y alguna de estas cosas importa:
- Tiene que encajar con tu diseño. Este es el punto grande, y es justo el que la incrustación no puede resolver de ninguna manera.
- Está en una página cuya conversión te importa. Un formulario de contacto o de presupuesto que visiblemente pertenece a otra empresa añade fricción justo en el momento en que no la quieres.
- Quieres las respuestas en tu bandeja de entrada. Google Forms escribe filas en una hoja. Los avisos por correo son opcionales y no resumen la respuesta, así que tienes que volver a Forms para leer lo que alguien escribió.
- Estás recibiendo spam. Google Forms no tiene filtro de spam integrado. Frenar bots implica instalar un complemento de terceros del Workspace Marketplace.
Hay otro punto más sutil: el salto de URL. Un formulario de Google compartido vive en docs.google.com o forms.gle. Quien está leyendo tu sitio y hace clic hacia un dominio de Google lo nota, y la lectura más benévola es “esta empresa usa Google Forms”, lo cual está perfectamente bien para una votación interna y menos bien para un formulario de alta de clientes.
Traducir tus campos a HTML
Rehacerlo es sobre todo mecánico. Cada tipo de pregunta de Google Forms tiene un equivalente directo en HTML:
| Google Forms | HTML |
|---|---|
| Respuesta corta | <input type="text"> |
| Párrafo | <textarea> |
| Varias opciones | <input type="radio"> |
| Casillas de verificación | <input type="checkbox"> |
| Desplegable | <select> |
| Respuesta corta con validación de correo | <input type="email"> |
| Fecha | <input type="date"> |
| Subida de archivo | <input type="file"> |
| Escala lineal | <input type="range">, o radios para un 1 a 5 discreto |
Una pregunta de respuesta corta con “Obligatorio” activado queda así:
<div>
<label for="name">Tu nombre</label>
<input type="text" id="name" name="name" required />
</div>Dos cosas que conviene arrastrar y que es fácil perder al rehacerlo:
Elementos <label> reales, correctamente asociados. Google Forms se encarga de esto por ti. En HTML escrito a mano lo tienes que hacer tú: cada <label> necesita un for que coincida con el id del input. Sin eso, un lector de pantalla anuncia un campo sin etiqueta y hacer clic en el texto no enfoca el campo. El texto de placeholder no sustituye a una etiqueta.
Tus campos obligatorios. Un atributo required te da validación nativa del navegador sin una línea de JavaScript.
Las preguntas de varias opciones necesitan un name compartido en todo el grupo, y eso es lo que más gente hace mal:
<fieldset>
<legend>¿Cómo nos conociste?</legend>
<input type="radio" id="src-search" name="source" value="search" />
<label for="src-search">Buscador</label>
<input type="radio" id="src-friend" name="source" value="friend" />
<label for="src-friend">Por un conocido</label>
</fieldset>Mismo name, distintos value e id. El <fieldset> y el <legend> los agrupan para que la tecnología asistiva lea la pregunta junto con las opciones.
Dónde acaban las respuestas
Esta es la decisión de verdad, y merece tomarse a conciencia en lugar de dejarla en el valor por defecto.
Google Forms manda las respuestas a una hoja de cálculo, y el correo queda como algo secundario. Un backend de formularios lo invierte: el envío te llega por correo, normalmente con el reply-to apuntando a la persona que rellenó el formulario, así que respondes desde tu propia bandeja y esa persona recibe la respuesta de un humano y no de una dirección de no-responder.
Si de verdad quieres las dos cosas, puedes tenerlas. Formpaste tiene una sincronización con Google Sheets que añade cada envío como una fila nueva, así que el flujo de trabajo en hojas de cálculo sobrevive al cambio. Conviene saber que es una función de Pro, mientras que las notificaciones por correo funcionan en el plan gratuito.
El compromiso honesto en la dirección contraria: Google Forms es ilimitado y gratis. La mayoría de los backends de formularios tienen un tope mensual de envíos en su plan gratuito, Formpaste incluido con 250 al mes. Si estás recogiendo miles de respuestas y el aspecto del formulario te da igual, Google Forms gana en coste, y no por poco.
Una lista para la migración
Si vas a cambiar un formulario que ya está en producción, el orden importa:
- Exporta primero la hoja existente. La migración solo afecta a los envíos nuevos y tus respuestas antiguas se quedan donde están, pero haz la copia antes de cambiar nada.
- Rehaz el formulario en una página que aún no esté enlazada, o detrás de una URL de staging.
- Manda una prueba real y confirma que llega a tu bandeja de entrada, no solo que la página mostró un mensaje de éxito.
- Compruébalo en el móvil. Ahí es donde un formulario hecho a mano suele necesitar más atención, y donde el viejo iframe quedaba peor.
- Cambia el enlace o la incrustación por el formulario nuevo.
- Deja el formulario de Google en pie pero cerrado a respuestas una o dos semanas. Configúralo para que deje de aceptar respuestas con un mensaje que apunte a la página nueva, para que quien tenga el enlace antiguo no se quede colgado.
- Bórralo cuando lleve un tiempo sin recibir nada.
El paso 6 es el que casi todo el mundo se salta. Los enlaces antiguos siguen viviendo mucho tiempo en firmas de correo, PDFs y marcadores de otras personas.
La versión corta
Incrustar un formulario de Google está bien cuando nadie juzga el diseño y una hoja de cálculo es donde quieres los datos. No se puede conseguir que parezca tu sitio, porque un iframe es un documento aparte y tu CSS no puede cruzar esa frontera.
Si el formulario da la cara ante clientes, rehacerlo como HTML real suele llevar menos de una hora, y obtienes un formulario que encaja con tu sitio, llega a tu bandeja de entrada y se puede filtrar contra el spam.
Si quieres un marcado del que partir, la guía para añadir un formulario de contacto a un sitio estático tiene un formulario accesible completo. Y como un formulario público atrae bots, frenar el spam sin CAPTCHA cubre qué hacer al respecto. También hay una comparativa más completa con Google Forms si estás sopesando las dos opciones.