Incorporar Formulários

Os formulários NueForm podem ser incorporados diretamente em qualquer site. Este guia cobre todos os métodos de incorporação, de iframes simples a integrações com domínio personalizado.

Tela de Boas-vindas do Formulário — Uma tela de boas-vindas de formulário conforme exibida aos respondentes.

Início Rápido: Incorporação via iframe

A maneira mais simples de incorporar um formulário é com um <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>

Substitua your-form-slug pelo slug do seu formulário, que você encontra nas configurações do formulário ou na URL pública do formulário.

Métodos de Incorporação

iframe de Página Inteira

Para um formulário que ocupa a página inteira ou uma grande seção dela:

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>

Isso dá ao formulário a altura total da viewport, o que funciona bem para formulários de várias etapas com transições suaves.

iframe Inline

Para incorporar um formulário dentro de uma área de conteúdo (por exemplo, dentro de um post de blog ou de uma seção de uma landing page):

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>

Incorporação via Tag de Script

Para uma experiência mais integrada, use uma tag de script que cria e dimensiona o iframe automaticamente:

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>

Essa abordagem mantém seu HTML limpo e facilita trocar de formulário alterando o atributo data-form.

Incorporação com Domínio Personalizado

Se você tem um plano Pro ou Enterprise com um domínio ou subdomínio personalizado configurado, incorpore os formulários usando sua URL personalizada:

html

<!-- Using a custom subdomain -->
<iframe
  src="https://acme.nueform.io/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<!-- Using a fully custom domain -->
<iframe
  src="https://forms.acme.com/f/your-form-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Domínios personalizados removem a marca NueForm da URL, oferecendo aos respondentes uma experiência totalmente white label.

Consulte Domínios Personalizados para instruções de configuração.

Dimensionamento Responsivo da Incorporação

Altura Fixa com Rolagem

A abordagem mais simples. O formulário rola internamente se o conteúdo for mais alto que o iframe:

html

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

Altura Baseada na Viewport

Faz o iframe preencher a viewport do navegador:

html

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

Contêiner com Proporção Fixa

Mantém uma proporção consistente em diferentes tamanhos de tela:

html

<div style="position: relative; width: 100%; padding-bottom: 75%; /* 4:3 ratio */">
  <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>

Incorporação Responsiva para Mobile

Use media queries de CSS para ajustar a altura do iframe com base no tamanho da tela:

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>

Você pode preencher campos ocultos automaticamente ou passar dados de rastreamento para formulários incorporados via parâmetros de URL. Quaisquer parâmetros de URL no src do iframe ficam disponíveis para o formulário como valores de campos ocultos.

Campos Ocultos

Se o seu formulário tem variáveis configuradas (por exemplo, utm_source, user_id), passe-as como parâmetros 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>

Esses valores são capturados no objeto metadata.hiddenFields da resposta e ficam acessíveis via API e nas exportações CSV.

Parâmetros Dinâmicos

Use JavaScript para injetar valores dinâmicos:

html

<script>
  var formUrl = 'https://app.nueform.com/f/your-form-slug';
  var params = new URLSearchParams({
    user_id: getUserId(),           // Your function
    email: getUserEmail(),          // Your function
    utm_source: getUTMSource(),     // Your function
    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>

Exemplos 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"
    />
  );
}

// Usage
<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>Contact Us</h1>
      <iframe
        src="https://app.nueform.com/f/contact-form"
        width="100%"
        height="600"
        frameBorder="0"
        allow="camera; microphone"
        style={{ border: 'none' }}
        title="Contact Form"
      />
    </div>
  );
}

Permissões e Recursos

Alguns tipos de pergunta do NueForm exigem permissões específicas do navegador quando incorporados. Use o atributo allow no iframe para concedê-las:

Recurso	Valor de `allow`	Tipos de Pergunta
Câmera	`camera`	Recording (modo de vídeo)
Microfone	`microphone`	Recording (modo de áudio/vídeo)

html

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

Se o seu formulário não usa perguntas de gravação, essas permissões não são necessárias.

Solução de Problemas

Problema	Solução
O formulário não carrega no iframe	Verifique se o formulário está publicado. Formulários não publicados retornam um 404.
O formulário aparece muito pequeno ou cortado	Aumente o `height` do iframe ou use `height: 100vh`.
Os parâmetros de URL não são capturados	Verifique se o formulário tem variáveis configuradas com nomes que correspondam às chaves dos parâmetros.
O navegador bloqueia o iframe	Alguns navegadores bloqueiam cookies de terceiros. Isso normalmente não afeta a renderização do formulário, mas pode impactar o rastreamento de analytics.
Câmera/microfone não funcionam	Adicione `allow="camera; microphone"` à tag do iframe.

Relacionado

Domínios Personalizados --- Configure a incorporação com domínio personalizado
Temas e Estilos --- Personalize a aparência do seu formulário incorporado
Exportar para React --- Para uma integração nativa sem iframes