É possível preencher previamente os campos de formulário para contatos conhecidos com informações que você já tem em sua conta ActiveCampaign. Para preencher previamente os campos do formulário, você precisa anexar o caminho da URL da página da Web ou a URL do formulário com um parâmetro de consulta.
Observação
- Cada string de consulta adicionada a um caminho de URL será diferente com base nos campos que você quer preencher automaticamente em um formulário
- Os contatos podem editar as informações que veem pré-preenchidas em um formulário
- Não é possível usar essa solução com landing pages da ActiveCampaign. As landing pages não oferecem suporte nativo a parâmetros de consulta
- Não é possível usar essa solução com um formulário de centro de preferências. Os formulários do centro de preferências já têm o endereço de email e as assinaturas de lista pré-preenchidos
Como funciona
Anexar um caminho de URL a uma string de consulta é rápido e fácil. Você só precisa saber qual campo quer preencher previamente em um formulário e a tag de personalização correspondente do campo. Depois de identificar os campos que quer preencher previamente no formulário, você estará pronto para criar a string de consulta.
Após adicionar a string de consulta à página da Web ou à URL do formulário, os contatos conhecidos que chegarem à sua página verão suas próprias informações pré-preenchidas no formulário.
Como preencher previamente os campos do formulário
Essa solução funciona para os seguintes tipos de campos de formulário:
- Entrada de texto
- Área de texto
- Data
- Data e hora
- Oculto
Etapa 1: identificar campos de formulário e tags de personalização
A página Campos em sua conta lista todos os campos de contato padrão e personalizados. Para localizar a página Campos, clique em Contatos > Campos no menu à esquerda.
Na página Campos, você verá uma lista de seus campos padrão e personalizados. Cada campo tem uma tag de personalização. Copie a tag de personalização para cada campo que você quer preencher previamente no formulário e a cole na área de transferência ou em outro arquivo.
Como exemplo, preencheremos previamente os seguintes campos do formulário: Nome e Endereço de email. O campo Nome tem uma tag de personalização de %FIRSTNAME% e o campo de endereço de email tem uma tag de personalização de %EMAIL%.
Etapa 2: criar a string de consulta
Em seguida, você precisa criar a string de consulta usando o formato abaixo:
?fieldname=%PERSONALIZATION-TAG%
Para preencher previamente vários campos, sua string de consulta terá este formato (observe o "&" entre cada nome de campo):
?fieldname=%PERSONALIZATION-TAG%&fieldname=%PERSONALIZATION-TAG%
Continuando com o exemplo acima, aqui está uma string de consulta que preencherá previamente os campos de nome e endereço de email em um formulário:
?firstname=%FIRSTNAME%&email=%EMAIL%
Etapa 3: anexar a URL da página da Web ou do formulário com a string de consulta
Depois de criar a string de consulta, ela pode ser adicionada ao final do caminho da URL da página da Web ou da URL do formulário.
URL da página da Web
- Isso preencherá previamente os campos de qualquer tipo de formulário
- Você precisará trabalhar com seu provedor de hospedagem na Web para adicionar a string de consulta ao final do caminho da URL da página da Web na barra de endereços
- Um exemplo de uma página da Web com uma string de consulta poderia ser assim:
www.activecampaign.com/support?Firstname=%FIRSTNAME%&email=%EMAIL%
URL do formulário
- Isso funciona apenas com formulários em linha
- Você pode adicionar a string de consulta ao final do caminho da URL do formulário e, em seguida, compartilhar ou usar a URL do formulário como quiser. Por exemplo, você pode preencher previamente os campos de um formulário de várias páginas ou adicionar a string de consulta ao final do link do formulário quando ele é compartilhado
Para recuperar a URL do formulário em linha:
- Na sua conta ActiveCampaign, clique em Site da web.
- Clique no botão "Editar design" do formulário com o qual quer trabalhar.
- Clique no botão "Integrar".
-
Clique na guia "Link".
O link do formulário terá a seguinte aparência:https://youracaccountname.activehosted.com/f/213
- Em seguida, o site adiciona a string de consulta ao final do link do formulário.
Por exemplo, quero preencher previamente o endereço de email em meu formulário da ActiveCampaign. Para isso, eu formataria a URL do formulário da seguinte forma:
https://youracaccountname.activehosted.com/f/213?email=%EMAIL%
Depois que a string de consulta for adicionada ao link do formulário, ela poderá ser compartilhada em qualquer lugar que quiser.
Avançado: usar JavaScript para preencher previamente campos de seleção única e múltipla
Antes de começar:
- Isso é apenas para usuários avançados
- A equipe de experiência do cliente da ActiveCampaign não pode ajudar você a implementar ou solucionar problemas de códigos que você adicionar à sua página da web
- Os exemplos abaixo usam código JavaScript padrão. Há outras maneiras de escrever esse código
Se você se sentir à vontade para codificar suas próprias soluções, poderá usar o JavaScript para selecionar previamente opções de resposta para campos de formulário de caixa de seleção e menu suspenso. Esse JavaScript precisa ser adicionado ao código-fonte de sua página da Web.
Os exemplos mostrados abaixo são para os tipos de campo de menu suspenso e botão de opções. No entanto, você deve conseguir usar o JavaScript para selecionar previamente opções de resposta para os seguintes tipos de campo:
- Menu suspenso
- Botão de opções
- Caixa de seleção
Clique em cada link abaixo para ver exemplos.
Para carregar automaticamente nosso JavaScript assim que a página for carregada, usamos o método window.onload, como este:
<script>
window.onload = () => {
...
}
</script>
Para definir a seleção automática em um elemento específico, procuramos por ele usando o método document.querySelector().
Para selecionar automaticamente um botão de opções específico no carregamento da página, inspecione o botão que quer selecionar automaticamente e observe o atributo de valor:
<input type="radio" value="blue">
Para selecionar automaticamente o azul, escrevemos nosso JavaScript da seguinte forma:
<script>
window.onload = () => {
/** Selecionar o valor "blue" ao carregar a página */
document.querySelector('input[value="blue"]').checked = true;
}
</script>
Para selecionar automaticamente uma opção específica no menu suspenso, contamos a primeira opção começando em zero:
<select id="food">
<option> --- </option>
<option>Pizza</option>
<option>Spaghetti</option>
<option>Cheeseburger</option>
</select>
Para selecionar automaticamente Espaguete, escrevemos nosso JavaScript da seguinte forma, em que o valor de índice 2 é escrito usando o colchete [2]:
<script>
window.onload = () => {
/** Select the Spaghetti option on page load */
document.querySelector('[id="food"]')[2].selected = true;
}
</script>
Uma maneira alternativa e mais avançada de selecionar automaticamente um valor do menu suspenso é escrever uma função personalizada sem reutilizar o método document.querySelector():
/**
* Auto-select the option value from the drop down menu
*
* @param {string} node The node data-name to set the selection
* @param {number} value The option index value to select on page load
* @return {void}
*/
function setSelectedValue(node, value) {
var elem = document.querySelector(node);
for (var i = 0; i < elem.options.length; i++) {
// Count by index
var nodeIndex = elem.options[i].index;
// Select the intended option
if (nodeIndex == value) {
// Set the option to 'selected'
elem.options[value].selected = true;
return;
}
}
}
e chamar no carregamento da página:
window.onload = () => {
/** Select the 'Spaghetti' option on page load */
setSelectedValue('[id="food"]', 2);
}
<script>
window.onload = () => {
/** Select the 'Spaghetti' option on page load */
setSelectedValue('[id="food"]', 2);
}
/**
* Auto-select the option value from the drop down menu
*
* @param {string} node The node data-name to set the selection
* @param {number} value The option index value to select on page load
* @return {void}
*/
function setSelectedValue(node, value) {
var elem = document.querySelector(node);
for (var i = 0; i < elem.options.length; i++) {
// Count by index
var nodeIndex = elem.options[i].index;
// Select the intended option
if (nodeIndex == value) {
// Set the option to 'selected'
elem.options[value].selected = true;
return;
}
}
}
</script>