Última Atualização:

Como Integrar formulários WordPress com o MailingBoss da BuilderAll

por | jan 30, 2019 | Artigos com DIcas BuilderAll, MailingBoss, Marketing Digital | 0 Comentários

Muita gente já tem o seu site ou blog implantado em WordPress. Em geral com formulários prontos, SEO feito, indexação perfeita no Google… Abandonar tudo isso para levar para a BuilderAll é trabalhoso e complicado.

Até porque nos dias correntes o Blog da Builderall é considerado um “legado“, por eles mesmos. Ou seja, não tem tido nenhuma atualização. Segundo, antes era possível definir subdomínios para os blogs – e essa funcionalidade aparentemente desapareceu ou está bem escondida. Terceiro: se a sua quantidade de posts cresce muito, vai ficando cada vez mais complicado administrá-los e atualizá-los.

Por outro lado, o MailingBoss da BuilderAll tem capacidades muito interessantes: programar sequências de e-mails (além de campanhas) e o Workflow, uma ferramenta visual tipo “arrasta-e-puxa” que permite montar toda a lógica de uma campanha complexa. Então, juntar uma coisa com outra é unir o útil ao agradável. Mas como fazer isso? E de forma que fique esteticamente agradável no seu WordPress?

Antes de qualquer coisa, crie sua lista no MailingBoss

abrir nova lista mailingboss

Ao criar uma lista no MailinBoss, você tem que usar obrigatoriamente o campo de e-mail e pode acrescentar outros campos, como nome, senha, etc.

Digamos que você crie uma lista muito simples, tendo o e-mail e o nome da pessoa. A tag para e-mail você pode deixar como [EMAIL] e o nome da pessoa você pode definir que é obrigatório e definir a tag como [FNAME] (pode ser qualquer outro).

criar campo nome mailingboss

Acerte os parâmetros da lista e depois clique em FORMULÁRIOS DA LISTA, em Links rápidos. Você verá 2 possibilidades, em duas janelas. Copie todo o formulário em HTML da PRIMEIRA janela. A segunda tem um código que não serve pois é IFRAME (que é incapaz de se comunicar com o código da página de WORDPRESS que vai ter o formulário.

Cole o código na página em quer ter o formulário. Coloque o editor no modo TEXTO e cole o código. Volte para visual. Ficou feinho, não é? Mas já dá para testar mesmo assim.

Salve a página e visualize.

 

Alterando o formulário para ficar bonito

Você deve escrever ou adaptar um o estilo dos campos de entrada e do botão de envio (submit), No meu caso escrevi o seguinte estilo, contendo os estilos:

buttom.mailing e

input[type=text].mailing

Você pode adaptar esse CSS para as cores e o estilo de seu site. Se você tem uma folha de estilos CHIELD, coloque lá na folha styles.css. Se não tem, ou nem tem ideia  do que é isso, instale um pluguin como Scripts n Styles que permite colocar CSS em qualquer página ou post.

/*MAILING BOSS*/
button.mailing {
background-color: #0274b3; /*Azul */
border: none;
color: white;
padding: 15px 32px;
text-align:center;
margin: 0 auto;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:80%;
cursor: pointer;
}

input[type=text].mailing{
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px;
text-align: left;
border-color: #CCCCCC;
border-style: solid;

}

<form action=”https://member.mailingboss.com/index.php/lists/cn186vrpg1222/subscribe” method=”post” accept-charset=”utf-8″ target=”_blank”>
<div class=”form-group”>
<label>First name</label>
<input type=”text” class=”form-control” name=”FNAME” placeholder=”” value=””/>
</div>
<div class=”form-group”>
<label>Email <span class=”required”>*</span></label>
<input type=”text” class=”form-control” name=”EMAIL” placeholder=”” value=”” required />
</div>

<div class=”clearfix”><!– –></div>
<div class=”actions”>
<button type=”submit” class=”btn btn-primary btn-submit”>Inscrever</button>
</div>
<div class=”clearfix”><!– –></div>
</form>

Adaptando o texto do formulário

Agora você vai trocar os estilos originais do formulário do MailingBoss, para usar os seus 2 estilos acima. Vai ficar algo assim:

<form action=”https://member.mailingboss.com/index.php/lists/cn186vrpg1222/subscribe” method=”post” accept-charset=”utf-8″ target=”_blank”>
<div class=”form-group”>
<label>Seu Nome com Sobrenome </label>
<input type=”text” class=”mailing” name=”FNAME” placeholder=”” value=”” required/>
</div>
<div class=”form-group”>
<label>Seu melhor E-mail <span class=”required”>*</span></label>
<input type=”text” class=”mailing” name=”EMAIL” placeholder=”” value=”” required />
</div>

<div class=”clearfix”><!– –></div>
<div class=”actions”>
<button type=”submit” class=”mailing btn btn-primary btn-submit”>Inscrever</button>
</div>
<div class=”clearfix”><!– –></div>
</form>

Testando e fazendo ajustes finais

Visualize sua página (ou post) e envie o formulário, preenchendo e-mail e nome. Note que os inputs contem REQUIRED nos dois campos, pois precisamos ter os 2 campos preenchidos antes de poder enviar e o controle está nessa página (ou post) e não com o MailingBoss.

Quando você cadastrou a lista, deve ter definido se ela é “single opt-in” (o e-mail já entra com status de confirmado mesma que seja falso). Ou “double opt in”, ou seja, o e-mail precisa ainda ser confirmado. A BuilderAll – se não tirou já – vai tirar em breve a opção single opt-in – de forma que sempre ao criar uma lista terá de usar o double opt-in. O que é ótimo para você, pois seus e-mails confirmados sempre serão verdadeiros. Envie o formulário.

Vai cair naquela página feinha do MailingBoss dizendo que você deve olhar a caixinha de entrada (ou mesmo SPAM) e clicar no link de confirmação. Não sei porque a BuilderAll não deixa habilitado o editor de HTML nessa página, seria possível produzir uma mensagem bem mais bonita. Se você ver essa página (que pode ser editada quando você cria a lista, mas só no modo texto), é sinal que o MailingBoss engoliu o Nome e o e-mail e ele está com status de Não Confirmado.

email nao confirmado mailingboss

Entre no MailingBoss e clique em contatos para conferir.

Agora vá na caixinha de entrada do e-mail que você cadastrou (ou no SPAM). Se caiu no SPAM provavelmente, na lista que você criou, o e-mail de REMETENTE não está no domínio que você tem cadastrado na BuilderAll (ou o remetente é um e-mail hotmail, yahoo ou gmail ou coisa que o valha – vai para SPAM garantido).

O ideal, na lista criada, é que o e-mail de REMETENTE tenha o MESMO domínio registrado na Builderall… (confira os domínios que você tem registrados/associados à BuilderAll no próprio MailingBoss, no menu que fica completamente à esquerda). Achando o e-mail de confirmação, clique no link para confirmar sua inscrição. Novamente, vai aparecer a telinha do MailingBoss de confirmação, Que é bem chucra. Volte para o MailingBoss, clique em Contatos da Lista e veja se agora o e-mail está como Confirmado.  

email confirmado mailingboss

 

Refinamentos

As duas coisas chatas que acontecem quando você envia o formulário e depois quando clica no e-mail de confirmação:

  • você cai fora de seu site e vai para as paginas do BuilderAll; tendo de dar back para VOLTAR so seu site;
  • O estilo dessas páginas provavelmente é completamente diferente do estilo do seu site.

Felizmente, você tem como contornar isso no MailingBoss. No lugar de usar as páginas dele, logo abaixo, há um botão de AVANÇADO, onde você pode cadastrar um link de um site externo, tanto para a página que PEDE a confirmação quanto para a página que CONFIRMA que tudo está OK.

Eu criei duas páginas no meu site e coloquei como Links. Dê uma olhadinha:

Assim o estilo é o mesmo do meu site e o lead permanece nele. Essas páginas podem ter um call to action também, oferecendo alguma outra coisa. Ou seja, fazendo essa integração você consegue montar FUNIS DE VENDAS também no seu próprio site. A partir do momento em que o lead CONFIRMA o e-mail na sua lista, o WORKFLOW do MailingBoss pode começar a disparar uma SEQUÊNCIA de e-mails programados com ações muito legais. Não há limites do que pode ser feito.

Colocando seus links na sua lista MailingBoss

Inscrição Pendente

Na última linha, com delay 0 (ou seja, imediatamente). Tem de clicar em AVANÇADO para abrir.

inscricao pendente mailingboss

Inscrição Confirmada

Coloque seu link também com delay 0. Não esqueça de clicar no botão de avançado para aparecer.

inscricao confirmada mailingboss

Mais uma dica legal para seus testes

Quando a gente está fazendo testes, muita coisa dá errado no caminho e já usamos todos nossos e-mails para testar a lista e saber o que acontece. Aí temos de entrar no MailingBoss e apagar os nossos próprios e-mails da lista para poder reenviá-los novamente num teste subsequente.

Isso acontecia comigo até que descobri o site mailinator.com 
Quando cadastrar um novo email, voce pode definir o nome que quiser: teste1@mailinator.com, teste2@mailinator.com…. Aí cadastra o email na sua lista nova.  Entra no MAILINATOR.COM e escreve somete teste1 (ou teste2 ou o diabo que você tiver inventado).  Você vai receber o e-mail aí, sem senha, sem nada. E o e-mail se auto-apaga depois de algumas horas. Qualquer pessoa do mundo pode acessar se souber o prefixo de e-mail que você registrou, mas se não são dados confidenciais não importa e o e-mail se auto-destruirá. Para testes é perfeito. E não precisa ficar apagando nada no MailingBoss

Resumindo: o Mailinator é um serviço de e-mail descartável que permite usar qualquer endereço de e-mail que você possa imaginar sob o domínio @mailinator.com e, em seguida, pegar o e-mail no site do Mailinator. Você pode usar seu endereço @mailinator para se inscrever em sites, registrar softwares, postar em fóruns ou em qualquer outra situação na qual você precise de um endereço de e-mail rapidamente, mas não queira fornecer seu endereço real. A vantagem aqui é que não há conexão com seu endereço de e-mail real, então quando as listas de e-mail de registro chegam às mãos de spammers – seja acidentalmente, por meio de hackers ou porque uma lista é intencionalmente vendida para spammers – você está protegido contra spam .

Carinha” do seu formulário: abaixo, como vai ficar no seu site:

Abaixo você pode ver como vai ficar e inclusive testar a solução proposta. Use um e-mail verdadeiro para poder receber o e-mail de confirmação:



Formulários em Widgets

Se você for usar formulários em WIDGETS (que ficam numa das laterais do site, esquerda ou direita), deverá incluir uma caixa de HTML Personalizado e colar todo texto do formulário lá.

Você poderá ter problemas como o que encontrei: um CSS reduzia o tamanho do formulário a 50% da largura, deixando praticamente sem espaço para digitar e sem espaço parao botão. Criei um css “mailingw”, só para usar nos widgets.

O formulário e o CSS ficaram assim:

Acesse já a mais poderosa plataforma de negócios online e digital marketing existente.

turbine seus negócios online

Share This