Pular para o conteúdo principal

Visão Geral do Código Incorporado

Fernanda Matias
Atualizado

A SharpSpring permite criar diferentes tipos de formulários. Estes formulários podem ser adicionados à sua página ou à sua landing page inserindo o código de rastreamento do formulário direto no HTML. Entretanto, para que os formulários sejam exibidos de forma adequada, você precisará garantir que o seu código incorporado seja corretamente implementado. Este artigo fornece informações sobre como implementar o seu formulário em um site ou em uma landing page na SharpSpring.

 

Usuários com acesso:

  • Administradores
  • Gerentes de Empresa
  • Gerentes de Marketing

 

Formulários Suportados

A SharpSpring suporta três tipos de formulários:

Tanto formulários nativos quanto de terceiros exigem que os seus campos sejam mapeados na SharpSpring, mas apenas os nativos e os da SharpSpring requerem um script incorporado. É de grande importância que o código não seja alterado após ter sido implemetado na página desejada, pois qualquer alteração pode fazer com que o formulário não seja renderizado ou rastreado adequadamente.

Atualmente, formulários nativos podem rastrear somente um formulário por página. Se você possui mais de um formulário por página, você deverá fornecer um ID para o formulário, para que este possa ser rastreado.

Além disso, o CSS associado aos formulários SharpSpring devem a configuração padrão.

 

 

Utilizando Códigos Incorporados

  1. Na barra de ferramentas superior da SharpSpring, clique em Conteúdo > Formulários.

  2. No painel à esquerda, clique em Opções > Gerenciar Formulários.

  3. Clique no nome do formulário desejado.

  4. No lado direito da página do formulário, clique em Opções > Código Incorporado.

  5. Copie o código.

  6. Cole o código no seu site.

  7. Clique em Fechar.

 

 

Sobre os Códigos Incorporados

  • A localização do código varia de acordo com o site. Não há um local padrão para o formulário no site. Por isso, cada implementação é um processo único em que você precisa implementar o código incorporado logo abaixo da porção de código que exibe o seu formulário.

  • Cada formulário da SharpSpring possui um código incorporado único. Não existe um código incorporado igual para todos os formulários criados na SharpSpring. Tenha certeza de que o código correto está sendo utilizado.

  • Garanta que você está implementando os códigos da forma correta. Ao incorporar códigos, algumas edições precisam ser feitas, por isso analise o código fonte da sua página para ver se o código está sendo incorporado corretamente. Se você usa um CMS como o Wordpress, garanta estar no modo de Texto ao colar o código no editor.

  • Alguns plugins externos podem tentar e reescrever ou simplificar os códigos incorporados dos formulários. Por exemplo, o Wordpress possui um plugin chamado Autoptimize, que reescreve e move blocos de script para o final da página. Você precisará alterar as configurações ou desativar o plugin, nesses casos.

Exemplo de Código

O código abaixo é um exemplo de código incorporado. Os valores account, formID e domain variam de acordo com o formulário:

<!-- SharpSpring Form for (your form's name here) -->

<script type="text/javascript">

var ss_form = {'account': 'yyyyyyyyyyyyyyy', 'formID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'};

ss_form.width = '100%';

ss_form.height = '1000';

ss_form.domain = 'app-zzzzzzzzzz.marketingautomation.services';

// ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values

// ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id

// ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.

</script>

<script type="text/javascript" src="https://koi-zzzzzzzzzz.marketingautomation.services/client/form.js?ver=2.0.1"></script>

 

 

Campos ocultos

Você pode utilizar campos ocultos para passar instruções ao formulário da SharpSpring no momento da renderização. Esse é o código padrão para um campo oculto: 

ss_form.hidden = {'Company': 'Anon'};

Qualquer campo do formulário pode ser fornecido um valor para sobrescrever qualquer valor fornecido por usuários. Dessa forma, os campos podem ser ocultados.

Veja o seguinte exemplo:

ss_form.hidden = {'Company': 'Acme Co.'};

Isso irá garantir que o campo Empresa seja definido para Acme Co. quando o formulário for enviado. O visitante que preenche o formulário não irá nem poder visualizar o campo, apenas poderá inserir texto no campo. Isso ajuda em evitar que bots escrevam dados em um formulário. 

 

 

Texto de Placeholder

O texto de placeholder é o texto cinza que aparece em um campo de formulário. Ele dará instruções sobre a ação esperada no campo, para a pessoa que estiver preenchendo o formulário. Por exemplo, em um campo de nome pode haver um texto que diz o seguinte: Insira o seu nome aqui.

Você pode habilitar texto de placeholder nos campos, definindo o parâmetro _usePlaceholders como true. Exemplo:

ss_form.hidden = {'Company': 'Acme Co.', '_usePlaceholders': true};

Essa configuração precisa estar em conjunto com alterações no seu arquivo .CSS, a fim de evitar que labels apareçam duas vezes. Para os campos de inserção de texto, defina as etiquetas como display: none;

 

 

Códigos Incorporados de Formulários Nativos

Os códigos incorporados de formulários nativos ou de terceiros precisam ser colocados de acordo com a localização do seu formulário. Isso porque o formulário precisa existir na página, antes do carregamento do código de rastreamento da SharpSpring.

Os códigos incorporados dos formulários nativos aparecerão de forma similar ao seguinte exemplo de código, apesar dos valores baseURI , endpoint e src variarem, já que são diferentes para cada formulário.

<script type="text/javascript">

   var __ss_noform = __ss_noform || ;

   __ss_noform.push(['baseURI', 'http://app.sharpspring.com/webforms/receivePostback/MwYA/']);

   __ss_noform.push(['endpoint', '70bbd19b-4f2c-45af-a25f-0a6aa2b55a19']);

</script>

<script type="text/javascript" src="http://app.sharpspring.com/client/noform.js?ver=1.0" ></script>

 

 

Opções de Códigos Incorporados para Formulários Nativos

Alguns formulários irão precisar que parâmetros especiais sejam adicionados ao código incorporado para funcionar corretamente. Por definição, os códigos incorporados de formulários nativos irão pegar o primeiro formulário na página que estiver usando POST para enviar dados.

Ao adicionar parâmetros especiais, faça o seguinte:

  • Especifique o formulário pelo ID. Isso é de grande utilidade se houver mais de um formulário na página.

  • Defina a propriedade do ID. No código, o formID é a propriedade ID na etiqueta do formulário. Adicione-o imediatamente após o endpoint ter sido definido: 

__ss_noform.push(['form', 'formID']);

  • Especifique uma função. Isso valida o formulário antes de enviá-lo à SharpSpring.

  • Defina uma função válida. No código, validar é o nome da função que retorna o verdadeiro ou falso, dependendo se o formulário possui ou não uma entrada válida do usuário. Se o formulário falhar na validação, o formulário não poderá enviar a informação do lead para a SharpSpring. Adicione o seguinte trecho de código, após o endpoint ser definido no código incorporado:

 __ss_noform.push(['validate', validateThis]);

 

Artigos relacionados

Comentários

0 comentário

Artigo fechado para comentários.