Widget de Formulário (Código de Incorporação)

Introdução

Códigos de incorporação são algumas linhas de HTML e JavaScript que você pode usar para incorporar um formulário do iform4u no seu próprio site. Este é o método mais fácil para exibir um formulário no seu site e o método menos suscetível a erros. Além disso, uma das coisas mais importantes sobre o widget de formulário é que toda vez que você faz uma alteração no seu formulário no construtor de formulários, o formulário incorporado será atualizado automaticamente.

O Widget de Formulário foi projetado para funcionar em qualquer página web. Nosso Widget de Formulário basicamente cria um iFrame na hora, e o formulário será carregado nele. Em seguida, como ele cria o iFrame, ele também pode redimensioná-lo, o que significa que não há necessidade de atualizar o código toda vez que você fizer alguma alteração. Além disso, quando você mantém um formulário dentro de um iFrame, você também evita que ele conflite com elementos JavaScript ou CSS existentes na sua página.

Qual Código de Incorporação de Formulário Devo Usar

Atualmente, o iform4u oferece duas opções para publicar um formulário no seu site:

1. Incorporar com Design: Permite publicar o formulário com o tema que foi aplicado ao formulário.
2. Incorporar sem Design: Permite publicar o formulário sem nenhum tema, mesmo se você tiver aplicado um ao seu formulário.

Geralmente, a primeira opção é a que você deve usar.

Como Preencher um Campo com uma Querystring

Você pode preencher um campo com parâmetros de URL. Basta certificar-se de usar o ID do Campo ou o Alias do Campo como a chave do parâmetro, então o valor atribuído a esse parâmetro aparecerá no campo.

Nota: Se você estiver usando um Formulário de Múltiplas Etapas, você pode ir para uma página específica adicionando o número da página à URL, por exemplo, para ir para a segunda página adicione a query string "p=2".

Como Ouvir postMessages Enviados pelo Widget de Formulário

Para poder ouvir as mensagens enviadas pelo Widget de Formulário, você simplesmente precisa adicionar um ouvinte de eventos à sua página web. Por exemplo, se você precisar saber um ID de submissão a partir da sua própria página web, você pode adicionar este código abaixo do código de incorporação colado:

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {    
  if (event.data) {        
    var data = JSON.parse(event.data);        
    if (typeof data.action !== "undefined" && data.action === "success") {            
      console.log("Submission saved with ID", data.data.id);        
    }    
  }
}

Configuração do Widget de Formulário

O Widget de Formulário (código de incorporação) possui duas partes:

1. Um código HTML que exibe o conteúdo padrão se o usuário acessar o formulário quando o JavaScript estiver desativado no navegador dele. Por padrão, um link para o seu formulário dentro de um elemento DIV é exibido.
2. Um código JavaScript que é responsável por exibir o formulário e inicializar o Form Tracker (se a Análise estiver habilitada).

O widget de formulário permite que você defina algumas opções do formulário em tempo real:

• Id: ID do formulário na aplicação. Por exemplo: 'id': 132
• Sid: ID da Submissão. Use esta opção para editar uma submissão de formulário previamente coletada. Para encontrar o ID da Submissão, vá para o Gerenciador de Submissões. Por exemplo: 'sid': 964
• Container: ID do elemento HTML onde o iFrame do formulário será inserido. Por padrão, aponta para o ID da DIV que contém o link para o formulário. Por exemplo: 'container': 'c132'
• Width: Especifica a largura do iFrame do formulário. Por exemplo: 'width': '100%'
• Height: Especifica a altura do iFrame do formulário. Geralmente, o código de incorporação vem com um valor em pixels. Este valor é calculado pelo Construtor de Formulários no momento de sua criação. Por exemplo: 'height': '846px'
• Auto Resize: Por padrão, está habilitado. Indica se o iFrame pode redimensionar automaticamente para a altura real do formulário, por exemplo, quando mensagens de validação são exibidas. Se definido como false, o formulário não redimensiona e sua altura será definida na opção "height". Por exemplo: 'autoResize': !0
• Theme: Por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite habilitar ou desabilitar um tema em tempo real. Por exemplo: 'theme': 1
• Custom JS: Por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite habilitar ou desabilitar o carregamento de arquivos JavaScript externos em tempo real. Por exemplo: 'customJS': 1
• Record: Por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite habilitar ou desabilitar o Form Tracker em tempo real. Por exemplo: 'record': 1
• Reset: Por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite habilitar ou desabilitar o reset do formulário quando ele é enviado. Por exemplo: 'reset': 0
• Page: Em um Formulário de Múltiplas Etapas, esta opção especifica a página que queremos exibir por padrão. Por exemplo, para exibir a segunda página: 'page': 2
• Form: Especifica o caminho para a incorporação do formulário. Não contém parâmetros.
• addToOffsetTop: Por padrão, é 0. Adiciona ou subtrai um número de pixels do OffsetTop antes de calcular a localização do formulário. Isso permite corrigir a localização do formulário quando elementos HTML no site (como um cabeçalho) possuem a propriedade CSS: "fixed". Por exemplo: 'addToOffsetTop': '-60'
• Default Values: Se você quiser pré-preencher campos do formulário com valores padrão, pode usar esta opção. Default Values é um objeto JSON onde sua chave é o ID do campo do formulário e seu valor é o conteúdo do campo. Por exemplo:

'defaultValues': {    'text_0': 'Este é meu valor padrão'}

Observe que checkboxes e botões de rádio serão selecionados com valores booleanos. Por exemplo:

'defaultValues': {    'text_0': 'Este é meu valor padrão',    'checkbox_0': true}

Interagindo com o Formulário via JavaScript

O Widget de Formulário contém muitos recursos e opções que podem ser configurados dentro de um Arquivo JavaScript externo.

Nota: Para carregar um Arquivo JavaScript você deve ir para Formulários -> Ações -> Configurações -> Configurações de UI.

Por padrão, um objeto jQuery está disponível. Então você pode interagir com o Formulário de uma maneira muito simples usando as seguintes linhas de código:

$( document ).ready(function() {  // Aqui podemos interagir com o Formulário});

O Elemento do Formulário

O elemento do Formulário - formEl - é um objeto jQuery ao qual você pode acessar para obter informações e/ou manipulá-lo diretamente. Por exemplo, vamos saber a altura do nosso formulário com as seguintes linhas de código:

$( document ).ready(function() {  console.log('A altura do formulário é', formEl.height());});

Ouvindo Eventos

Certos eventos são acionados quando o Formulário faz algo.

• view: Este evento será acionado quando um formulário for visualizado.
• fill: Este evento será acionado na primeira vez que você interagir com o formulário. Por exemplo, preenchendo um campo de texto ou selecionando um botão de rádio.
• error: Este evento será acionado quando o Servidor lançar um erro de validação.
• success: Este evento será acionado quando o Formulário for enviado com sucesso.
• nextStep: Este evento será acionado cada vez que você avançar para a próxima etapa em um formulário de múltiplas etapas.
• previousStep: Este evento será acionado cada vez que você voltar uma etapa em um formulário de múltiplas etapas.

Um exemplo muito básico para detectar quando um formulário falha seria:

$( document ).ready(function() {    
    formEl.on('error', function(event) {        
      /* Rastrear um erro de validação do servidor */          
      /* O que acontece aqui dependeria do seu produto de análise! */    
    });
});

O Motor de Regras também aciona os seguintes eventos quando um campo é mostrado ou ocultado usando regras condicionais:

Para implementar esse recurso, o motor de regras acionará os seguintes eventos:

• ef.shown: Este evento será acionado quando um campo for exibido.
• ef.hidden: Este evento será acionado quando um campo for ocultado.

Então, para interagir com esses eventos, basta escrever os ouvintes de eventos. Por exemplo:

$( document ).ready(function() {  
    $('#text_1').on('ef.shown', function(e) {    
      console.log("Este campo de texto foi exibido.");  
    });  
    $('#text_1').on('ef.hidden', function(e) {    
      console.log("Este campo de texto foi ocultado.");  
    });
});

Os Manipuladores de Eventos: previousStep e nextStep

Além dos eventos, o iform4u oferece dois manipuladores de eventos que permitem voltar e avançar uma página em um formulário de múltiplas etapas prontos para uso usando JavaScript. Por exemplo, agora vamos ver como avançar uma página sem pressionar o botão "Próximo" usando o recurso de avanço automático.

Avanço Automático em Formulários de Múltiplas Etapas

Por padrão, quando você cria um Formulário de Múltiplas Etapas, dois botões de navegação são adicionados automaticamente: "Anterior" e "Próximo" na parte inferior do formulário. Esses botões permitem que você navegue pelo formulário até chegar à última página onde geralmente o botão Enviar é colocado.

Nota: o iform4u permite que você adicione múltiplos botões Enviar em diferentes páginas ou partes do formulário.

No entanto, em certos casos de uso, você pode querer avançar diretamente para a próxima página sem pressionar nenhum botão. Para isso, usaremos o manipulador de eventos "nextStep".

Nota: Alguns casos de uso nos quais esse recurso é útil são pesquisas e/ou testes onde não é permitido alterar a resposta e permite completar a pesquisa o mais rápido possível.

Por exemplo, com as seguintes linhas de código, vamos dizer ao nosso Formulário que cada vez que um botão de rádio for selecionado, o formulário avançará para a próxima página:

$( document ).ready(function() {    
    $('input[type=radio]').on('change', nextStep);
});

Finalmente, se você quiser ocultar os botões de navegação, pode adicionar as seguintes linhas no Tema CSS atribuído ao seu formulário:

.previous, .next {    
    display: none !important;
}

Carregar Múltiplos Arquivos JavaScript e CSS no Nosso Formulário

Tendo o objeto jQuery, podemos fazer uso de jQuery.when().done() para carregar múltiplos objetos JavaScript e fazer uso deles assim que estiverem prontos para uso. Vamos ver o seguinte exemplo.

Exibir um DatePicker do jQuery UI em um Campo de Data

Por exemplo, com as seguintes linhas de código vamos mostrar um DatePicker do jQuery UI nos campos de Data do formulário:

$( document ).ready(function() {    
    $.when(        
      $('head').append('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" />'),        
      $.getScript("//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"),        
      $.Deferred(function(deferred) {            
        $( deferred.resolve );        
      })    
    ).done(function() {        
      $('body').css('padding-bottom', '200px'); // Padding para mostrar o datepicker        
      $('input[type=date]').each(function () {            
        $(this).attr('type', 'text').after(                
          $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    
            .datepicker({                        
              // Formato consistente com o picker HTML5                        
              dateFormat: "mm/dd/yy",                        
              changeMonth: true,                        
              changeYear: true,                        
              altField: this,                        
              altFormat: "yy-mm-dd"                    
            })            
        ).hide();        
      });    
    });
});

Como você pode ver:

• Estamos carregando 2 arquivos dentro da função when(): jquery-ui.css e jquery-ui.min.js.
• Inserimos uma função que será executada quando os dois arquivos anteriores forem carregados na página dentro da função done().
• A função basicamente executa 3 instruções:
  1. Encontre todos os campos do tipo "date" e converta cada campo "date" em "text".
  2. Clone cada campo de Data em um campo de Texto que exibe o DatePicker.
  3. Oculta o campo de Data, pois seu valor será estabelecido automaticamente pelo DatePicker, pelas propriedades: altField e altFormat.