Caso já possua formulários em sua página, basta utilizar o script a seguir.

Ele irá integrar todos os formulários que existem em seu site que tenham um botão do tipo submit.

Adicione em todas as páginas do seu site que existirem formulários, antes do fechamento da tag body.

Esse script deve ficar sempre depois do formulário que você quer integrar. De preferência deve ser o último código do seu site.

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
new BulldeskFormIntegration({
token: 'TOKEN',
identifier: 'Identificador da Conversão'
});
</script>


Lembre de substituir o TOKEN pelo seu token e definir o identificador da conversão.

Para conseguir integrar todos os formulários, o script de integração de formulários deve ficar sempre no final de sua página, antes do fechamento da tag body.

Identifique formulários

Se tiver mais de um formulário na página, remova a opção identifier do código e adicione um campo escondido em cada formulário com um identificador único:

<input type="hidden" name="identifier" value="Identificador do Formulário">

Mapear campos

Caso seu formulário seja gerado automaticamente ou por algum outro motivo você não consiga alterar o atributo name, é possível mapear os campos dentro da integração.

Para mapear basta ver o atributo name do campo de seu formulário e verificar qual é o correspondente a ele nos campos padrões do Bulldesk.

Caso tenha algum campo que não seja padrão do Bulldesk, basta criar campos customizados.

Veja o exemplo em um formulário gerado automaticamente:

<form class="et_pb_contact_form" method="post">
<p class="et_pb_contact_field" data-id="nome" data-type="input">
<label for="et_pb_contact_nome_1" class="et_pb_contact_form_label">SEU NOME</label>
<input type="text" name="et_pb_contact_nome_1" id="et_pb_contact_nome_1" class="input et_contact_error" value="" data-required_mark="required" data-field_type="input" data-original_id="nome" placeholder="SEU NOME COMPLETO">
</p>

<p class="et_pb_contact_field" data-id="email" data-type="email">
<label for="et_pb_contact_email_1" class="et_pb_contact_form_label">SEU EMAIL</label>
<input type="text" name="et_pb_contact_email_1" id="et_pb_contact_email_1" class="input et_contact_error" value="" data-required_mark="required" data-field_type="email" data-original_id="email" placeholder="SEU EMAIL">
</p>

<div class="et_contact_bottom_container">
<button type="submit" class="et_pb_contact_submit et_pb_button">ENVIAR</button>
</div>
</form>


Nesse caso o campo nome está com o atributo name="et_pb_contact_nome_1" e o campo email está como name="et_pb_contact_email_1".

Para mapear esses campos com nomes diferentes para os campos padrões do Bulldesk, precisamos definir esse map no código da integração:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
new BulldeskFormIntegration({
token: 'TOKEN',
identifier: 'Formulário de Contato',
map: {
'et_pb_contact_nome_1': 'name',
'ep_pb_contact_email_1': 'email',
}
});
</script>


No código acima, mapeamos o campo et_pb_contact_nome_1 para name e pt_pb_contact_email_1 para email.

Vejamos outro exemplo do mapeamento, agora em um formulário gerado pelo Contact Form 7 do Wordpress:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
new BulldeskFormIntegration({
token: 'TOKEN',
identifier: 'Formulário de Contato',
map: {
'your-name': 'name',
'your-email': 'email',
'your-company': 'company'
}
});
</script>


Nesse exemplo mapeamos os campos:

your-name para name
your-email para email
your-company para company
your-message para message

Lembre de substituir o TOKEN pelo seu token e definir o identificador da conversão.

Essa opção não serve para mandar dados adicionais na integração. Caso queira enviar dados adicionais que não aparecem no formulário, basta criar um campo com o type hidden.

Dica

Para saber quais são os nomes dos campos do seu formulário, abra o formulário, clique na tecla F12 do seu teclado. Em seguida, siga os passos mostrados a seguir:



Campos padrões do Bulldesk

Estes são os campos padrões do Bulldesk. Caso queira enviar algo que não está nesta lista, basta criar campos customizados.



Campos customizados

Você pode enviar qualquer campo que quiser para o Bulldesk.

Primeiro crie seus campos no Bulldesk em Configurações → Campos Customizados. Saiba como criar clicando aqui.

O ID do campo customizado é o mesmo nome que você deve usar no atributo name dos campos do seu formulário.

Basta colocar o mesmo nome que o campo será enviado normalmente para o Bulldesk.

Integrar formulários específicos

Caso queira integrar um formulário específico ou o tipo de botão do seu formulário não seja submit, defina o seletor do botão do formulário na integração.

Exemplo:

<form method="post" action="...">
...
<button id="btn-submit">Enviar</button>
</form>

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
new BulldeskFormIntegration({
token: 'TOKEN',
identifier: 'Formulário de Contato',
selector: '#btn-submit'
});
</script>


Validação HTML5

Para validar e exibir mensagens de erro de validação do HTML5, adicione a opção validate na integração:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
new BulldeskFormIntegration({
token: 'TOKEN',
identifier: 'Formulário de Contato',
validate: true
});
</script>


Ignorar formulários na página

Caso tenha um formulário na página que não deva ir para o Bulldesk, basta adicionar o atributo data-bulldesk-skip como true na tag do form.

Exemplo:

<form method="post" action="..." data-bulldesk-skip="true">
...
</form>


Callbacks

É possível definir 2 callbacks, um de sucesso e outro de falha. Basta definir no código da integração:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
new BulldeskFormIntegration({
token: 'TOKEN',
identifier: 'Formulário de Contato',
success: function (response, form, inputs) {
console.log(response);
console.log(form);
console.log(inputs);
},
fail: function (response) {
console.log(response);
}
});
</script>


Lista de Parâmetros da Integração



Ainda tem alguma dúvida? Entre em contato no e-mail suporte@bulldesk.com.br.
Esse artigo foi útil?
Cancelar
Obrigado!