Widget de formulário (código incorporado)

Introdução

O código incorporado são algumas linhas de HTML e javascript que você pode usar para incorporar um formulário iform4u em seu próprio site. Esta é a maneira mais fácil de exibir um formulário em 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ê fizer uma alteração em seu formulário no construtor de formulários, o formulário incorporado será atualizado automaticamente.

O Form Widget foi projetado para funcionar em qualquer página da web. Nosso Form Widget basicamente cria um iFrame dinamicamente e o formulário será carregado nele. Então, como ele cria o iFrame, ele também pode redimensioná-lo e isso significa que não há necessidade de atualizar o código toda vez que você fizer alguma alteração. Além disso, ao manter um formulário dentro de um iFrame, você também evita que ele entre em conflito com elementos JavaScript ou CSS existentes em sua página.

Qual código de incorporação de formulário devo usar

No momento, o iform4u oferece duas opções para publicar um formulário em 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 que você tenha aplicado um ao seu formulário.

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

Como preencher um campo com uma Querystring

Você pode preencher um campo com parâmetros de URL. Apenas certifique-se de usar o Field ID ou Field Alias ​​como chave do parâmetro, então o valor atribuído a este parâmetro aparecerá no campo.

Nota: Se estiver usando um formulário de várias etapas, você pode ir para uma página específica anexando o número da página ao URL, por exemplo, para ir para a segunda página, adicione a string de consulta "p=2".

Como ouvir postMessages enviadas pelo Form Widget

Para poder ouvir as mensagens enviadas pelo Form Widget, basta adicionar um event listener à sua página web. Por exemplo, se você precisar saber um ID de envio de sua própria página da web, poderá adicionar este código abaixo do código incorporado 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 de widget de formulário

O Form Widget (código incorporado) tem 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 desabilitado em seu navegador. Por padrão, um link para o seu formulário dentro de um elemento DIV é exibido.
2. Um código Javascript responsável por exibir o formulário e inicializar o Form Tracker (se o Analytics estiver habilitado).

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

• Id : ID do formulário na aplicação. Por exemplo:'id': 132
• Sid : ID de envio. Use esta opção para editar um envio de formulário coletado anteriormente. Para encontrar o ID de envio, vá para o Gerenciador de envios . Por exemplo:'sid': 964
• Container : ID do elemento HTML onde será inserido o iframe do formulário. Por padrão, aponta para o ID DIV que contém o link para o formulário. Por exemplo:'container': 'c132'
• Largura : especifica a largura do iframe do formulário. Por exemplo:'width': '100%'
• Altura : especifica a altura do iframe do formulário. Normalmente, o código de incorporação vem definido com um valor em pixels. Este valor é calculado pelo Form Builder no momento de sua criação. Por exemplo:'height': '846px'
• Redimensionamento automático : por padrão, está ativado. Indica se o iframe pode ser redimensionado automaticamente para a altura real do formulário. Por exemplo, quando mensagens de validação são mostradas. Se definido como falso, o formulário não será redimensionado e sua altura será definida na opção “altura”. Por exemplo:'autoResize': !0
• Tema : Por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite ativar ou desativar um tema instantaneamente. Por exemplo:'theme': 1
• personalizado : por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite ativar ou desativar o carregamento de arquivos javascript externos dinamicamente. Por exemplo:'customJS': 1
• Gravar : Por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite ativar ou desativar o Form Tracker instantaneamente. Por exemplo:'record': 1
• Redefinir : por padrão, está habilitado. É um valor inteiro (1 ou 0) que permite ativar ou desativar a redefinição do formulário quando o formulário é enviado. Por exemplo:'reset': 0
• Página : Em um formulário de várias etapas, esta opção especifica a página que queremos exibir por padrão. Por exemplo, para exibir a segunda página:'page': 2
• Formulário : especifica o caminho para incorporação do formulário. Não contém parâmetros.
• addToOffsetTop : por padrão, é 0. Adicione ou subtraia um número de pixels ao OffsetTop antes de calcular a localização do formulário. Isso permite corrigir a localização do formulário quando os elementos html do site (como um cabeçalho) possuem a propriedade CSS: "fixed". Por exemplo:'addToOffsetTop': '-60'
• Valores padrão : se desejar preencher previamente os campos do formulário com valores padrão, você pode usar esta opção. Valores padrão é 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': 'This is my default value'}

Observe que as caixas de seleção e os botões de opção serão selecionados com valores booleanos. Por exemplo:

'defaultValues': {    'text_0': 'This is my default value',    'checkbox_0': true}

O Form Widget 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 em Formulários -> Ações -> Configurações -> Configurações de UI.

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

$( document ).ready(function() {  // Here we can interact with the Form});

O elemento Formulário

O elemento Form - formEl - é um objeto jQuery ao qual você pode acessar para obter informações e/ou manipulá-las diretamente. Por exemplo, saberemos o máximo do nosso formulário com as seguintes linhas de código:

$( document ).ready(function() {  console.log('The form height is', formEl.height());});

Ouvindo Eventos

Certos eventos são acionados quando o Form faz alguma coisa.

• 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, preencha um campo de texto ou selecione um botão de opção.
• erro : Este evento será acionado quando o servidor gerar um erro de validação.
• sucesso : Este evento será acionado quando o formulário for enviado com sucesso.
• nextStep : Este evento será acionado sempre que você avançar para a próxima etapa em um formulário de várias etapas.
• previousStep : Este evento será acionado cada vez que você voltar uma etapa em um formulário de várias etapas.

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

$( document ).ready(function() {    formEl.on('error', function(event) {        /* Track a server validation error */          /* What happens here would be dependent on your analytics product! */    });});

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

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

• ef.shown : Este evento será acionado quando um campo for mostrado.
• ef.hidden : Este evento será acionado quando um campo for oculto.

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("This text field has been shown.")  });  $('#text_1').on('ef.hidden', function(e) {    console.log("This text field has been hidden.")  });});

Os manipuladores de eventos: previousStep e nextStep

Além dos eventos, o iform4u oferece dois manipuladores de eventos que permitem retroceder e avançar uma página em um formulário Multi-Step pronto para uso usando JavaScript. Por exemplo, agora veremos como encaminhar uma página sem pressionar o botão "Avançar" usando o recurso de avanço automático.

Avanço automático em formulários de várias etapas

Por padrão, quando você cria um formulário de várias 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 normalmente é colocado o botão Enviar.

Nota: iform4u permite adicionar vários 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 faremos uso do manipulador de eventos “nextStep”.

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

Por exemplo, com as seguintes linhas de código, diremos ao nosso Form que cada vez que um botão de opção for selecionado, o formulário irá encaminhar para a próxima página:

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

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

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

Faça upload de vários arquivos JavaScript e CSS em nosso formulário

Por ter o objeto jQuery, podemos usar jQuery.when().done() para carregar vários objetos javascript e utilizá-los quando estiverem prontos para uso. Vejamos o exemplo a seguir.

Exibir um DatePicker jQuery UI em um campo Data

Por exemplo, com as seguintes linhas de código mostraremos um DatePicker jQuery UI nos campos 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 for show the datepicker        $('input[type=date]').each(function () {            $(this).attr('type', 'text').after(                $(this).clone().attr('id', this.id + '_alt').attr('name', this.id + '_alt')                    .datepicker({                        // Consistent format with the HTML5 picker                        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 “ data ” e converta cada campo “ data ” em “ texto ”.
  2. Clone cada campo de data em um campo de texto que exibe o DatePicker.
  3. Oculta o campo Data, pois seu valor será estabelecido automaticamente pelo DatePicker, pelos atributos: altField e altFormat .