Como adicionar um formulário de assinatura da Mailrelay no WordPress

Hoje em dia, adicionar um formulário de assinatura no WordPress é essencial se você quer alcançar clientes novos e em potencial.

Por quê? Basicamente porque ele permite captar os dados de pessoas interessadas nos produtos ou serviços que você oferece e manter contato com elas periodicamente.

Neste ponto, talvez você esteja pensando: me interessa, mas como implemento um formulário de assinatura no meu site WordPress? Não entendo de código HTML e preciso de algo simples e fácil.

Não se preocupe: neste tutorial vamos mostrar diferentes maneiras de integrar o código HTML dos formulários da Mailrelay no seu WordPress, com e sem plugins.

Interessante, não é?

Observação importante: neste tutorial, vamos partir do princípio de que já criamos nosso formulário na Mailrelay e temos o código HTML dele. Por isso, vamos nos concentrar em explicar como integrar corretamente esse código no WordPress.

Se você ainda não criou o formulário nem tem o código HTML dele, recomendamos dar uma olhada primeiro neste outro post e seguir os passos indicados nele: Mailrelay V3 formulários de assinatura

· Como integrar um formulário de assinatura da Mailrelay no WordPress sem plugins

Muitas vezes abusamos dos plugins do WordPress porque, sejamos sinceros, eles facilitam muito a nossa vida.

No entanto, é importante ter em mente que instalar complementos demais no nosso site aumenta o consumo de recursos.

Isso, em muitos casos, provoca um aumento no tempo de carregamento da página, algo que pode afetar diretamente o posicionamento SEO e a experiência do usuário.

Por tudo isso, se você quer evitar sobrecarregar seu site ou simplesmente não gosta de instalar mais plugins no WordPress, pode integrar seu código HTML diretamente na plataforma, sem nenhum extra. Como? Seguindo os passos abaixo:

Para começar, faça login no seu WordPress, vá até “Aparência” e clique em “Widgets”.

Já na seção de Widgets, vamos procurar o widget chamado “HTML personalizado” e arrastá-lo para a área de widgets em que queremos incluir nosso formulário de assinatura.

Por padrão, o WordPress tem habilitada uma área de widgets que corresponde à barra lateral da seção de blog do nosso site.

Podemos colocá-lo ali ou, se o nosso tema ou template tiver outras áreas de widgets habilitadas, integrá-lo nelas (no rodapé, por exemplo).

Neste caso, vamos colocá-lo na área de widgets mais comum, que todos os sites WordPress têm por padrão: a barra lateral do blog.

Arrastamos o widget para essa área, adicionamos um título e colamos nele o código do nosso formulário da Mailrelay. Lembre-se de que é o código que tínhamos deixado à mão para quando precisássemos dele.

Depois de dar um nome ao widget (no campo título) e inserir o código (no campo conteúdo), clique no botão “salvar”.

Em seguida, para verificar se está tudo certo, vá até a seção do blog e você verá que a sua barra lateral já tem o formulário de assinatura da Mailrelay. Simples, não é?

* É importante ter em mente que o formulário vai assumir os estilos (cores e formas) definidos no seu template ou tema.

Neste caso, vimos como integrar o formulário na barra lateral do blog. Se o seu site tiver qualquer outra área de widgets habilitada, você pode seguir os mesmos passos descritos acima, mas arrastando o widget para essa área.

O resultado será o mesmo; a única diferença é que nosso formulário aparecerá na área especificada em vez de na sidebar.

· Como integrar um formulário de assinatura da Mailrelay no WordPress com o Elementor (versão gratuita)

O Elementor é um dos construtores de páginas para WordPress mais famosos da atualidade; na verdade, é um dos mais usados.

Entre seus principais pontos fortes está uma versão gratuita com muitas funcionalidades, que permite a qualquer usuário criar seções chamativas e personalizadas sem precisar investir dinheiro nisso.

O Elementor é um plugin que está disponível atualmente em versão gratuita, com funções mais limitadas, e em versão paga/Premium, com alguns extras e maior controle sobre suas funcionalidades.

Mas, quer você tenha a versão gratuita ou a paga, pode integrar seu formulário da Mailrelay na seção e no lugar que quiser. Explicamos como fazer isso passo a passo:

O primeiro requisito é ter o plugin Elementor instalado no nosso site. Se não for o seu caso, vá até a aba de plugins e clique em “Adicionar novo”.

Procure “Elementor Page Builder” no repositório do WordPress e clique em Instalar.

Depois de instalado, lembre-se de ativá-lo e já estaremos prontos para integrar nosso código.

Para começar a integração, abra a página ou seção em que você quer inserir seu formulário de assinatura. Já dentro dessa seção, procure o módulo de código HTML.

Depois de encontrá-lo, coloque o módulo na coluna ou seção da página em que você quer que o formulário apareça. Quando ele estiver na área escolhida, cole o código HTML que tínhamos guardado anteriormente.

Depois de inserir o código HTML, você verá o formulário de assinatura aparecer na seção ou coluna escolhida. Verifique se está tudo do seu jeito e publique as alterações. O resultado seria algo parecido com isto:

Como comentamos antes, tanto neste caso como no anterior, é importante ter em mente que o formulário vai assumir os estilos definidos no seu template ou tema.

Para fazer mudanças ou alterações de estilo, será necessário editar o HTML ou usar plugins específicos que permitam personalizar nossos formulários de assinatura (o Bloom, por exemplo).

· Como integrar um formulário de assinatura da Mailrelay no WordPress com o Bloom

O Bloom é um dos plugins mais completos que podemos encontrar na hora de criar formulários de assinatura. Se você tem a sorte de já ter esse plugin instalado no seu WordPress ou está pensando em comprar a licença, explicamos como integrá-lo à sua conta da Mailrelay.

A primeira coisa a fazer, já no painel de administração do nosso WordPress, é ir até a seção Bloom/optin forms. Nesta aba ficam todos os formulários de assinatura que temos até o momento. Neste caso, vamos criar um novo do zero para aprender a integrá-lo facilmente com a Mailrelay.

Para criar um novo formulário, vamos até a parte de cima da tela e clicamos no botão azul “new optin” (novo formulário).

Vai se abrir um menu suspenso em que devemos escolher o tipo de formulário que queremos implementar. Escolhemos a opção “inline” para depois poder implementá-lo na seção ou página que quisermos.

Na janela seguinte, vamos começar a configurar o nosso formulário. A primeira coisa a fazer é dar um nome a ele para poder identificá-lo internamente (esse nome é só para nós; não será exibido ao público).

O próximo dado que ele vai pedir é o provedor de email. Neste caso, como temos o nosso código HTML da Mailrelay, vamos até o final do menu suspenso e selecionamos a opção “Custom HTML form”.

Logo depois de escolher essa opção, aparecerá uma caixa cinza. Ela serve para inserirmos o trecho de código que quisermos. Neste caso, colamos o código HTML do formulário que criamos na Mailrelay e clicamos no botão “Next, design your optin”.

Em seguida, serão exibidos vários formatos de formulário, com cores e estilos bem diferentes. Devemos selecionar a opção de que mais gostamos ou que melhor se encaixa no que procuramos. É importante ter em mente que, como já inserimos código, o visual não ficará 100% igual ao do exemplo, mas você verá que o resultado é bastante bom.

O próximo passo é personalizar os campos que queremos que apareçam no formulário. Em “optin title”, devemos escrever o título que aparecerá em destaque no cabeçalho do nosso formulário. Se você não quiser título, deixe esse campo em branco.

Depois disso, devemos preencher o texto do formulário. Se você pensa em explicar para que serve o formulário, o que oferece aos seus assinantes ou qualquer outro aspecto, este é o campo para dar todas essas informações.

Em seguida, encontramos as configurações de imagem. Muitos dos templates do Bloom trazem por padrão uma imagem na parte de cima; se você quiser alterá-la e/ou substituí-la pelo seu logo, por exemplo, é nesta seção que deve fazer isso.

Chegamos à seção de estilos. Se você quer personalizar ainda mais seu formulário de assinatura, definindo fontes, cores, fundos ou qualquer outro aspecto visual, este é o lugar. Nas seções Optin styling e Form styling, você pode escolher entre muitas opções e possibilidades.

Depois disso, encontramos mais algumas opções para personalizar o formulário. Podemos adicionar um texto no rodapé do formulário (ideal para esclarecimentos ou notas rápidas) e a mensagem de sucesso, que é a que aparece quando a pessoa se inscreve na newsletter com sucesso.

Quando todos os campos estiverem preenchidos e tudo estiver do nosso jeito, devemos clicar em “save” ou salvar. Veremos que o programa sai da tela em que estamos e volta ao resumo do Bloom com todos os formulários que temos ativos.

Pronto, já temos nosso formulário criado e configurado no Bloom. O próximo passo é integrá-lo corretamente na página ou seção do site que mais nos interessar.

Para isso, em Bloom/optin forms, procuramos o formulário que acabamos de criar e, à esquerda, encontramos este símbolo “[]”.

Clicamos nele e se abrirá uma janela com o shortcode desse formulário específico. Copie-o ou guarde-o em algum lugar, porque vamos precisar dele mais adiante.

Depois de copiar o shortcode, devemos colocá-lo na seção ou área que quisermos. Se tivermos um construtor visual como o Elementor ou o Divi, podemos integrá-lo onde quisermos por meio do módulo Código ou Shortcode.

Se, por outro lado, já estivermos trabalhando com o novo editor visual do WordPress, o Gutenberg, podemos integrar nosso shortcode usando o widget que ele traz especificamente para isso.

Portanto, devemos abrir a página ou seção que vamos editar. Já dentro dela, clicamos no botão “+” e, na seção de widgets, selecionamos o bloco Shortcode. Em seguida, veremos que ele nos pede para inserir o código ou shortcode. Colamos o conteúdo e salvamos as alterações.

Assim, seu novo formulário do Bloom já estará integrado na seção ou página do seu WordPress que você quiser. Interessante, não é?

· Conclusão

Como vimos ao longo de todo o artigo, existem inúmeras maneiras de integrar um formulário HTML da Mailrelay no WordPress. Neste post, quisemos focar nos métodos que consideramos mais simples, para que você perca o medo do código e comece a usá-lo sem preocupações.

Como vimos, é possível integrar a Mailrelay no WordPress sem plugins, pela seção de widgets ou até com o novo editor visual do WordPress, o “Gutenberg“.

Mas, se você já usa editores visuais como o Divi, o Elementor ou qualquer outro plugin de assinaturas, também pode usá-los para incluir seu formulário onde quiser. No caso do Bloom, a principal vantagem é que o plugin permite editar facilmente os estilos do formulário, dando a ele um toque chamativo e original.

No entanto, se você já está um pouco familiarizado com HTML e quer fazer algumas alterações no código, adicionando estilos ou cores, isso também é possível. Só lembre-se de ser prudente e ter cuidado ao aplicá-las para evitar possíveis erros ou falhas.

E agora, que tal integrar seu formulário da Mailrelay no WordPress?

Se, além disso, você acompanhar seu formulário com um bom lead magnet, vai aumentar ainda mais a taxa de conversão dos seus visitantes em assinantes.