Mapaprop

Insertar un formulario

Este tutorial le enseña a crear un formulario personalizado con Google Forms e insertarlo en una página de su sitio web. Sirve para recolectar información de visitantes: solicitudes de tasación, consultas específicas, encuestas, suscripciones a newsletter, etc.

Este tutorial usa Google Forms porque es gratis, fácil de usar y guarda las respuestas automáticamente en una planilla. El mismo procedimiento funciona con otros servicios (Typeform, Jotform, Microsoft Forms): basta con que el servicio le dé un código <iframe> para embeber.

Lo que va a lograr

Una página de su sitio web con un formulario funcional donde los visitantes pueden completar campos y enviarle la información. Cada envío llega a una planilla de Google (y opcionalmente a su email).

Parte 1 — Crear el formulario en Google Forms

Paso 1.1 — Acceda a Google Drive

  1. Abra drive.google.com en su navegador.
  2. Inicie sesión con su cuenta de Google (si no tiene, créese una gratis).

Paso 1.2 — Cree un formulario nuevo

  1. Presione el botón + Nuevo (arriba a la izquierda).
  2. Elija Más > Formularios de Google.
  3. Se abre un editor con un formulario vacío.

Paso 1.3 — Configure los campos

  1. Título del formulario: por ejemplo, "Solicitud de tasación".
  2. Descripción: una línea explicando para qué es.
  3. Agregue preguntas: presione el botón + del panel lateral para sumar campos. Los tipos de campo más útiles son:
    • Respuesta corta: para nombre, email, teléfono.
    • Párrafo: para mensajes largos.
    • Casillas de verificación: para opciones múltiples.
    • Desplegable: para una sola opción de una lista.
  4. Campos obligatorios: active el toggle "Obligatorio" en cada campo importante (típicamente email y nombre).

Si tiene dudas sobre cómo configurar Google Forms, busque en Google "cómo crear un formulario en Google Forms" — hay tutoriales en video muy claros.

Parte 2 — Obtener el código para insertar

Paso 2.1 — Acceda a la opción "Insertar"

  1. En el formulario creado, presione el botón Enviar (arriba a la derecha).
  2. En el diálogo, elija la pestaña con el ícono < > (Insertar HTML).
  3. Aparece el código <iframe ...> listo para copiar.

Paso 2.2 — Configure el tamaño (opcional)

Dentro del mismo diálogo, ajuste Ancho y Alto en píxeles. Recomendación:

  • Ancho: 100% (se adapta al contenedor en su sitio).
  • Alto: entre 600 y 800 px (depende de cuántos campos tenga).

Paso 2.3 — Copie el código

Presione Copiar. El código tendrá esta forma:

<iframe src="https://docs.google.com/forms/d/e/.../viewform?embedded=true" width="640" height="800" frameborder="0" marginheight="0" marginwidth="0">Cargando…</iframe>

Parte 3 — Insertar el formulario en su sitio web

Paso 3.1 — Cree o edite la página

Desde Menú > Sitio Web > su sitio > Mis Páginas:

  • Para una sección nueva: presione Agregar y configure el título (por ejemplo, "Tasación online").
  • Para una sección existente: presione el ícono lápiz.

Paso 3.2 — Active el Modo HTML

  1. Vaya a la solapa Edición de contenido.
  2. Ubique el cursor donde quiere que aparezca el formulario (puede ser después de un texto introductorio).
  3. Presione el botón </> del toolbar (último grupo).
  4. Confirme la advertencia.

Paso 3.3 — Pegue el código del formulario

Pegue el <iframe> que copió de Google Forms. Puede combinarlo con texto antes y después:

<h2>Solicite una tasación gratuita</h2>
<p>Complete el siguiente formulario y nos pondremos en contacto en 24 horas.</p>

<iframe src="https://docs.google.com/forms/d/e/.../viewform?embedded=true" width="100%" height="800" frameborder="0">Cargando…</iframe>

<p>También puede llamarnos al <strong>(011) 4444-5555</strong>.</p>

Paso 3.4 — Guarde

  1. Presione Guardar.
  2. Abra su sitio web en una pestaña nueva y verifique que el formulario aparezca y funcione (envíe una prueba).

Parte 4 — Configurar notificaciones por email (opcional)

Por defecto, las respuestas se guardan en una planilla de Google. Si quiere recibir un email cada vez que alguien envía el formulario:

Paso 4.1 — Active la planilla de respuestas

  1. Vuelva a su formulario en Google Forms.
  2. Vaya a la pestaña Respuestas.
  3. Presione el ícono planilla verde ("Ver respuestas en Hojas de cálculo").
  4. Elija Crear hoja de cálculo nueva y confirme.

Paso 4.2 — Active las notificaciones

Desde la planilla de respuestas:

  1. Vaya a Herramientas > Reglas de notificación.
  2. Elija "Se envía un formulario" como evento.
  3. Elija "Correo electrónico — al instante" (o "resumen diario" si recibe muchas respuestas).
  4. Presione Guardar.

A partir de ese momento, cada respuesta llegará a su email registrado en Google.

Si quiere notificaciones a múltiples emails (su equipo, por ejemplo), agregue los demás como editores de la planilla y cada uno configura su propia regla de notificación.

Solución de problemas comunes

ProblemaCausa probable
El formulario no apareceEl código <iframe> quedó cortado al pegar. Vuelva al Modo HTML y verifique que esté completo, con cierre </iframe>.
El formulario aparece pero queda chicoAumente el valor de height="..." en el código.
Aparece "Cargando..." y nunca terminaEl formulario está privado. En Google Forms vaya a Configuración y permita "Cualquier persona con el enlace".
Las respuestas no lleganVerifique que activó la planilla de respuestas en el Paso 4.1.

Ayudas relacionadas