Incrustar Formularios | NueForm Docs

Los formularios de NueForm pueden incrustarse directamente en cualquier sitio web. Esta guia cubre todos los metodos de incrustacion, desde iframes simples hasta integraciones con dominios personalizados.

Pantalla de Bienvenida del Formulario — Una pantalla de bienvenida del formulario tal como se muestra a los encuestados.

Inicio Rapido: Incrustacion con iframe

La forma mas sencilla de incrustar un formulario es con un <iframe> HTML:

html

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  allow="camera; microphone"
  style="border: none;"
></iframe>

Reemplaza your-form-slug con el slug de tu formulario, que puedes encontrar en la configuracion del formulario o en la URL publica del formulario.

Metodos de Incrustacion

iframe de Pagina Completa

Para un formulario que ocupe toda la pagina o una seccion grande:

html

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  height="100vh"
  frameborder="0"
  allow="camera; microphone"
  style="border: none; min-height: 100vh;"
></iframe>

Esto le da al formulario la altura completa del viewport, lo cual funciona bien para formularios de multiples pasos con transiciones suaves.

iframe en Linea

Para incrustar un formulario dentro de un area de contenido (por ejemplo, dentro de un articulo de blog o una seccion de una pagina de aterrizaje):

html

<div style="max-width: 720px; margin: 0 auto;">
  <iframe
    src="https://app.nueform.com/f/your-form-slug"
    width="100%"
    height="500"
    frameborder="0"
    allow="camera; microphone"
    style="border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
  ></iframe>
</div>

Incrustacion con Etiqueta de Script

Para una experiencia mas integrada, usa una etiqueta de script que crea y dimensiona automaticamente el iframe:

html

<div id="nueform-container" data-form="your-form-slug"></div>
<script>
  (function() {
    var container = document.getElementById('nueform-container');
    var slug = container.getAttribute('data-form');
    var iframe = document.createElement('iframe');
    iframe.src = 'https://app.nueform.com/f/' + slug;
    iframe.width = '100%';
    iframe.height = '600';
    iframe.frameBorder = '0';
    iframe.allow = 'camera; microphone';
    iframe.style.border = 'none';
    container.appendChild(iframe);
  })();
</script>

Este enfoque mantiene tu HTML limpio y facilita el intercambio de formularios cambiando el atributo data-form.

Incrustacion con Dominio Personalizado

Si tienes un plan Pro o Enterprise con un dominio o subdominio personalizado configurado, incrusta formularios usando tu URL personalizada:

html

<!-- Usando un subdominio personalizado -->
<iframe
  src="https://acme.nueform.io/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<!-- Usando un dominio completamente personalizado -->
<iframe
  src="https://forms.acme.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Los dominios personalizados eliminan la marca de NueForm de la URL, brindando a los encuestados una experiencia completamente de marca blanca.

Consulta Dominios Personalizados para instrucciones de configuracion.

Dimensionamiento Responsivo

Altura Fija con Desplazamiento

El enfoque mas simple. El formulario se desplaza internamente si el contenido es mas alto que el iframe:

html

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Altura Basada en el Viewport

Hace que el iframe llene el viewport del navegador:

html

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  width="100%"
  frameborder="0"
  style="border: none; height: 100vh;"
></iframe>

Contenedor con Relacion de Aspecto

Mantiene una relacion de aspecto consistente en diferentes tamanos de pantalla:

html

<div style="position: relative; width: 100%; padding-bottom: 75%; /* relacion 4:3 */">
  <iframe
    src="https://app.nueform.com/f/your-form-slug"
    frameborder="0"
    allow="camera; microphone"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Incrustacion Responsiva para Movil

Usa media queries CSS para ajustar la altura del iframe segun el tamano de pantalla:

html

<style>
  .nueform-embed {
    width: 100%;
    border: none;
    height: 700px;
  }

  @media (max-width: 768px) {
    .nueform-embed {
      height: 500px;
    }
  }

  @media (max-width: 480px) {
    .nueform-embed {
      height: 100vh;
      min-height: 400px;
    }
  }
</style>

<iframe
  class="nueform-embed"
  src="https://app.nueform.com/f/your-form-slug"
  frameborder="0"
  allow="camera; microphone"
></iframe>

Pasar Parametros de URL

Puedes prellenar campos ocultos o pasar datos de seguimiento a formularios incrustados mediante parametros de URL. Cualquier parametro de URL en el src del iframe esta disponible para el formulario como valores de campos ocultos.

Campos Ocultos

Si tu formulario tiene variables configuradas (por ejemplo, utm_source, user_id), pasalas como parametros de consulta:

html

<iframe
  src="https://app.nueform.com/f/your-form-slug?utm_source=website&utm_campaign=spring_sale&user_id=12345"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Estos valores se capturan en el objeto metadata.hiddenFields de la respuesta y son accesibles a traves de la API y en exportaciones CSV.

Parametros Dinamicos

Usa JavaScript para inyectar valores dinamicos:

html

<script>
  var formUrl = 'https://app.nueform.com/f/your-form-slug';
  var params = new URLSearchParams({
    user_id: getUserId(),           // Tu funcion
    email: getUserEmail(),          // Tu funcion
    utm_source: getUTMSource(),     // Tu funcion
    timestamp: Date.now().toString()
  });

  var iframe = document.createElement('iframe');
  iframe.src = formUrl + '?' + params.toString();
  iframe.width = '100%';
  iframe.height = '600';
  iframe.frameBorder = '0';
  iframe.style.border = 'none';

  document.getElementById('form-container').appendChild(iframe);
</script>

Ejemplos Especificos por Framework

React

jsx

function NueFormEmbed({ slug, params = {} }) {
  const queryString = new URLSearchParams(params).toString();
  const src = `https://app.nueform.com/f/${slug}${queryString ? '?' + queryString : ''}`;

  return (
    <iframe
      src={src}
      width="100%"
      height="600"
      frameBorder="0"
      allow="camera; microphone"
      style={{ border: 'none' }}
      title="NueForm"
    />
  );
}

// Uso
<NueFormEmbed
  slug="customer-feedback"
  params={{ user_id: '12345', utm_source: 'app' }}
/>

Vue

vue

<template>
  <iframe
    :src="formSrc"
    width="100%"
    height="600"
    frameborder="0"
    allow="camera; microphone"
    style="border: none;"
  />
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  slug: String,
  params: { type: Object, default: () => ({}) }
});

const formSrc = computed(() => {
  const query = new URLSearchParams(props.params).toString();
  return `https://app.nueform.com/f/${props.slug}${query ? '?' + query : ''}`;
});
</script>

Next.js

tsx

export default function FormPage() {
  return (
    <div className="max-w-3xl mx-auto py-8">
      <h1>Contactanos</h1>
      <iframe
        src="https://app.nueform.com/f/contact-form"
        width="100%"
        height="600"
        frameBorder="0"
        allow="camera; microphone"
        style={{ border: 'none' }}
        title="Formulario de Contacto"
      />
    </div>
  );
}

Permisos y Funcionalidades

Algunos tipos de preguntas de NueForm requieren permisos especificos del navegador cuando se incrustan. Usa el atributo allow en el iframe para otorgarlos:

Funcionalidad	Valor de `allow`	Tipos de Pregunta
Camara	`camera`	Grabacion (modo video)
Microfono	`microphone`	Grabacion (modo audio/video)

html

<iframe
  src="https://app.nueform.com/f/your-form-slug"
  allow="camera; microphone"
  ...
></iframe>

Si tu formulario no usa preguntas de grabacion, estos permisos no son necesarios.

Solucion de Problemas

Problema	Solucion
El formulario no carga en el iframe	Verifica que el formulario este publicado. Los formularios no publicados devuelven un 404.
El formulario aparece muy pequeno o recortado	Aumenta la `height` del iframe o usa `height: 100vh`.
Los parametros de URL no se capturan	Verifica que el formulario tenga variables configuradas con nombres que coincidan con las claves de los parametros.
El navegador bloquea el iframe	Algunos navegadores bloquean cookies de terceros. Esto normalmente no afecta la renderizacion del formulario pero puede impactar el seguimiento de analitica.
La camara/microfono no funciona	Agrega `allow="camera; microphone"` a la etiqueta del iframe.

Relacionado

Dominios Personalizados --- Configurar incrustacion con dominio personalizado
Temas y Estilos --- Personalizar la apariencia de tu formulario incrustado
Exportar a React --- Para una integracion nativa sin iframes