Criando um formulário com o pacote Joomla

Joomla-3D-Vertical-logo-light-background-en-2.png

Visão geral

Com o pacote Joomla, você pode criar e usar formulários para aumentar sua lista de assinantes e adicionar automaticamente novos contatos diretamente à sua conta Sendinblue.

Neste tutorial, você vai aprender como:

  1. Criar um formulário
  2. Nomear seu formulário
  3. Selecionar a(s) lista(s) em que seus visitantes serão adicionados
  4. Configurar seus e-mails de confirmação
  5. Personalizar suas mensagens
  6. Adicionar blocos e campos ao seu formulário
  7. Adicionar o formulário recém-criado ao seu site 

 

Antes de começar

Antes de usar você precisará das seguintes informações:

1. Como criar um formulário

A partir do seu painel do administrador Joomla, clique em Componentes > Sendinblue. Selecione o ícone Formulários de assinatura. Para criar um novo formulário de assinatura, clique no botão Novo no canto superior esquerdo.

WsllPixKjBnCjgdseDxlCHnewD04o67WTzUMnhPXSaaob89j9nbFaGduWcj9uDeHP2Sypafz4zn2jkF4A06Eb-NMZvweQwIiVPchLQhKRlNf4zMlg_rXSkvBjdzarkppUlIBTp2O.png

Nesta página, você verá todos os seus formulários. Você pode usar os botão de edição padrão do Joomla para administrá-los.

2. Como nomear seu formulário

Comece nomeando seu formulário.

GRT2iRaUssIS3SmDn3ouBqlFPwREB4QTakTdeVKajbCby2g9Tl-alWKqdCTIgXPZVXd42h2f_knljEbAdg6QDG3DdNCep_rNB1Bkl3HUcSoQV0FlM3zBY9ynMFt1bB3V8tgxa4Rk.png

3. Como selecionar sua(s) lista(s)

Aqui você vai selecionar a(s) lista(s) Sendinblue à(s) qual(ais) o visitante será adicionado quando enviar o formulário. Você pode escolher qualquer quantidade de listas de pastas diferentes.

Dica: você precisa escolher pelo menos uma lista ou o formulário de assinatura não vai funcionar.

R73NBZ0bxCGH8PDJI_EdMt4FDhD_s5f7TqvqR8RVkAJDfBCwjt7UBQzeNFD8dWUByPghZdF-UfondIg1x9rTA0xZBxAaAu5VOHLAYSerqurHB3LKqy84W_f_IL3MaEEbnhF7ilcK.png

4. Como configurar o e-mail de confirmação

Acesse a aba Confirmação.

Quando um novo assinante envia um formulário, existem diversos modos de acompanhar:

  • Sem confirmação - o visitante será adicionado à(s) lista(s) selecionada(s) sem qualquer notificação
  • Confirmação simples - os visitantes serão adicionados à(s) lista(s) selecionada(s) e notificados por:
    • Um e-mail de acompanhamento - selecione um modelo de e-mail a partir de sua conta Sendinblue para enviar uma mensagem de boas-vindas aos novos assinantes.
    • Uma página de confirmação - ao selecionar "Sim", você pode especificar a página para a qual o visitante será redirecionado depois de enviar um formulário com sucesso. Simplesmente digite o URL no campo "Página de confirmação personalizada".

qodUok1tfmUz0qlWGOZRVACS7jrLLMVhCNM2zXtPrR8FhEO45JRMD2ERiH3ysZbZIYuJFUwG-0YJl-qHH_dxOy9PbW-8a8iHVoL_xmloEqqDNsCWOF2TFsXXfBhybc-EP9EwUqMe.png

  • Confirmação dupla - os visitantes que enviarem um formulário serão adicionados à lista Temp - DOUBLE OPTIN e um e-mail de confirmação pedindo que eles cliquem para confirmar a assinatura será enviado. Depois que tiverem feito isto, eles serão adicionados à(s) lista(s) Sendinblue selecionada(s).
    • E-mail opt-in - selecione um modelo de e-mail a partir de sua conta Sendinblue, o qual será usado pelo seu novo assinante para confirmar a assinatura. Observação: o modelo deve conter a tag double opt-in, uma vez que ela será substituída por um link de confirmação gerado.
    • Página de redirecionamento de formulário - ao selecionar  "Sim", você pode especificar a página para a qual o visitante será redirecionado depois de ter enviado o formulário com sucesso. Simplesmente digite o URL no campo "Página de redirecionado do formulário personalizado".
    • Confirmação final - ao selecionar "Sim", seu novo assinante receberá um e-mail de conformação final depois de ter confirmado o e-mail opt-in. Selecione um modelo de e-mail a partir de sua conta Sendinblue.
    • Página de confirmação - ao selecionar "Sim" seu novo assinante será redirecionado para uma página de confirmação depois de ter confirmado o e-mail opt-in. Simplesmente digite o URL no campo "Página de confirmação personalizada". Pode ser uma página de agradecimento ou uma landing page em que você fornece informações adicionais.

-shWR2rqz27mrYiUAiBnCRtd14Aa6YZEN2KdWgJk24GOj1G8wF3cqwLjiplr0y7QQU0ehG-BTPqXooJ-h9Ig-pHocx6EhDh48wWZWZT5pla9mxX1rDtjLQyNh6_620y2THXBUWVX.png

5. Como personalizar mensagens informativas

Acesse a aba Mensagens. Esta aba permite a personalização de mensagens básicas.

Dica: por padrão, no momento, o painel de administração de integração Joomla está disponível apenas em inglês. No entanto, mensagens personalizadas para o seu formulário podem ser criadas em qualquer idioma.

 

481B3kdsyWR-63kY-jBKKklz-JkXAmrvnqltukWGAiQgi7DKDDUZbuHFJ2LHSkMKsdt0ukXMwblJvcg_mJ4KkrCqL-F5yqOnI-9wYHR0pbhT98ayAMQ-pbbrVn4Z74Ywr8GauARF.png

6. Como adicionar blocos e campos ao formulário

Acesse a aba Blocos e campos do formulário para criar o seu formulário. Cada formulário é composto por blocos. Você pode personalizar cada bloco para ter diferentes opções e representações visuais.

  • Para criar o primeiro bloco, clique no ícone "+" no canto superior esquerdo de blocos do sub-formulário.
  • Para criar o próximo bloco, clique no ícone "+" no canto inferior direito do último bloco.
  • Para excluir um bloco, use o "X" vermelho no canto superior direito do bloco.
  • Ao usar o ícone dos três pontos ao lado esquerdo de cada bloco, você pode arrastar e soltar para reordenar os blocos.

dVwQ1iHEOrsT2ISnQ7pl6x0kABAR9LFdvF9-kI7kAXVMXR1QdKzBXw7xYIAn2CryBZpz0pydSHgIkmqA1ry9z-ucXd2fFjdlQJC1OT_SjGcyWyUjcv6SnZDfDmDBWGw123mskVwk9v3Z7BETCA.jpg

Existem dois grupos de base de tipos de blocos:

  1. Blocos do "tipo Atributo" - terão a palavra "atributo" como prefixo. Este tipo de bloco permite que os visitantes insiram dados específicos.
  2. Blocos do "tipo Específico" - são usados para criar elementos no formulário, ou seja, texto, imagens, separador, etc.

Dica: para que um bloco do tipo atributo funcione adequadamente, você deve ter atributos correspondentes dentro da sua conta Sendinblue. 

Tipos de blocos:

Blocos do tipo específico:

  • Texto e imagem:  usado para adicionar texto ou imagens personalizadas ao formulário ou adicionar conteúdo com o editor de texto. Certifique-se de ter um editor configurado em suas configurações de usuário.
  • Divisor:  usado para adicionar um divisor (separador), tornando o formulário mais legível.
  • Opt-in:  usado para adicionar uma caixa de verificação opt-in.  Visitantes não serão capazes de enviar um formulário a menos que esta caixa de verificação esteja selecionada.
  • Captcha:  usado para adicionar um captcha ao formulário. Para usar este tipo de bloco, você precisa ter o plug-in do captcha para seu site instalado e habilitado. É altamente recomendado que cada formulário tenha um campo captcha.

Blocos do tipo atributo:

  • E-mail:  usado para permitir que os visitantes insiram seus endereços de e-mail. Um endereço de e-mail válido é necessário e será marcado se não for inserido corretamente.
  • Atributo texto:  usado para permitir que os visitantes insiram um valor textual, como por exemplo, "Nome".
  • Atributo número:  usado para permitir aos visitantes inserirem um valor numérico. A entrada será validada quando for um valor numérico.
  • Atributo data:  usado para permitir aos visitantes inserirem uma data. Os visitantes terão um calendário para inserirem um valor, por exemplo "Data de nascimento".
  • Atributo de alternância:  usado para permitir aos visitantes inserirem um valor Sim/Não. O visitante verá a caixa de escolha.
  • Atributo única escolha:  usado para permitir aos visitantes fazerem uma seleção a partir de uma lista de opções. O visitante verá botões ou uma caixa de seleção.

Tanto os blocos do tipo específico quanto de atributos têm os seguintes parâmetros:

  • visível - com este alternador você pode facilmente tornar o bloco visível ou invisível.
  • classe do bloco - classe adicionada ao bloco.
  • estilo - regras de estilo específicas do CSS adicionadas a um bloco, ou atributo de estilo de elemento do bloco.
  • classe de controle do bloco - classe adicionada para controlar elementos dentro de um bloco.

A maioria dos blocos do tipo atributo tem os seguintes alternadores e parâmetros:

  • alternância exigida - os visitantes devem inserir um valor neste campo.
  • mostrar etiqueta com a opção para inserir texto da etiqueta - você pode configurar e selecionar se a etiqueta é mostrada próxima a um campo.
  • mostrar o alternador de ajuda com a opção de inserir o texto ajuda - você pode configurar e selecionar se uma explicação adicional será mostrada.

Dica: a ordem dos blocos no formulário finalizado será a mesma que aparece nesta aba.

Quando tiver terminado de criar seu formulário, clique no botão Salvar no campo superior esquerdo.

7. Como adicionar um formulário

Para exibir os formulários criados por você, entre em seu painel de administrador do Joomla:

  1. Vá em Extensões > Módulos.
  2. Clique no botão +Novo no menu superior esquerdo.
  3. Selecione formulário de assinatura Sendinblue.

hr7lGubYXnX0D_bBil0GoRJuy48c2V6djGoEhNwtfaBoU7kjmFP6VHXG8hPJGdxWfOhnYuNwfSLgk_Yd33Cp_b_1woGvcQgNnOSyKMnELobfRLhY6EBA-hiby7mXe1Sha5YV2Zc0xbCNPsIKUw.jpg

Comece adicionando um título.

dentro deste módulo você terá que selecionar o formulário de assinatura criado.

Também existem parâmetros adicionais para adicionar texto antes e depois do módulo. Se seu site não for em inglês, recomendamos ajustar o parâmetro do módulo para etiquetas de botão.

KR2F3qzorgA2Lz1BzLmWEpfu_PzpO2PP8rLdej3vtXChDX_ADv8xang-zFntwOANIIaChckcqLA-lS7iX6y2fuXzttGxIg61QdOfkIGxcnetBoenoTiYsB-BvBBZcK6-pdKpLq1i.png

Ajuste outros parâmetros padrões, tais como:

  • Exibir título - Se você selecionar "Exibir", o título será exibido em seu site.
  • Posição - Escolha o local do site onde o formulário irá aparecer.

37GAu5xO5UdCLavtmbB3zW-Xso6xHDA2Rba-35tON94UZjyMtGZgr__1iiZijgc0TZcsHv2iblkfllsjbZJesjLSWkNnshMUD8Ny00AWx7mmI35YqcBnUXi9Pey3p0enO25-dlhN.png

Dependendo do modelo Joomla usado pelo seu site e os outros estilos adicionais, é importante entender a representação visual do seu formulário finalizado.

O módulo está usando controles e classes padrões do formulário Joomla para renderização de formulário e existe a opção de adicionar classes e estilos para cada bloco do formulário. Por este motivo, seu formulário pode ser facilmente personalizado de acordo com as suas preferências.

Por exemplo, se você tiver um bloco do tipo "Atributo escolha única" em seu formulário e você estiver usando o modelo padrão "Protostar" do Joomla, então ao configurar o parâmetro "classe de controle do bloco" para "btn-group btn-group-yesno" para aquele grupo, você terá os botões de rádio renderizados com as classes de botão padrão Joomla, os quais também existem em muitos outros modelos.

O que vem a seguir?

Dúvidas?

Alguma dúvida? Sinta-se à vontade para abrir uma nova questão aqui.