Como adicionar um formulário de subscrição utilizando o criador de formulários do Elementor Pro

O criador de formulários visual Elementor é uma ferramenta poderosa para criar formulários online completos e bonitos sem utilizar qualquer código.

Arraste e solte widgets de formulário

em primeiro lugarWidget de formulárioArraste-o para a página. O widget Formulário cria imediatamente um formulário básico que já contém oCampo de nome, campo de endereço de correio eletrónico, área de texto da mensagemresponder com cânticosBotão Enviar.

Conteúdo > Campos de formulário

existirPainel de opções do formulárioemcampo do formulárioComece por nomear o formulário com uma secção como "Formulário de subscrição".

De seguida, vemos os 3 campos que são gerados automaticamente quando o widget é inserido:Nome completo, correio eletrónicoresponder com cânticosmensagens.

Para um formulário típico de geração de leads, o campo de mensagem não é obrigatório, pelo que pode ser utilizado clicando na opção de campo mais à direita noX remove-o, deixando apenas os campos de nome e e-mail. Se pretender adicionar um novo campo, basta clicar no botão"Adicionar projeto"é suficiente, mas para este exemplo específico, só precisamos de dois campos.

Agora vamos ver mais de perto as opções disponíveis para cada campo.

Conteúdo do separador dos campos

tipologia: o domínioelementoNo separador, pode selecionar os campostipologia. Por exemplo, o campo de nome écópiasque apenas permite ao utilizador introduzir qualquer texto padrão num campo de uma linha. Por outro lado, o campo de correio eletrónico é do tipocorreio eletrónicoSó aceita texto com a formatação de correio eletrónico adequada, incluindo @ e pontos.

separador (de uma janela) (informática)A seguir.separador (de uma janela) (informática)Opções. Não é obrigatório, mas recomendamos que forneça a etiqueta, mesmo que decida ocultá-la para visualização, uma vez que este texto será apresentado no e-mail recebido quando alguém submete o formulário.

marcador de posiçãoA seguir.marcador de posiçãoOpções. Trata-se de um texto opcional que ajuda os visitantes a perceberem o que devem colocar neste campo.

campo obrigatórioAgora, se quiser que o campo seja obrigatório, defina o parâmetrocampo obrigatórioO interrutor basculante está definido paraSim.se nãodefina o interrutor de alternância obrigatório para não. Para a maioria dos formulários de subscrição, os campos de nome e e-mail são normalmente obrigatórios, por isso, defina ambos os campos comoser. Na parte inferior da secção dos campos do formulário, pode optar por mostrar ou ocultar oscampo obrigatório. Se quiser que o típico asterisco vermelho apareça junto à etiqueta do campo, defina-o paraMostrar. Acima da marcação obrigatória, as opções são mostrar ou ocultarseparador (de uma janela) (informática)como uma opção. Naturalmente, se a etiqueta estiver oculta, as etiquetas necessárias também estarão ocultas, uma vez que estão ligadas à etiqueta.

largura da colunaEm muitos casos, um formulário de subscrição mais estreito é o ideal, por isso, em vez de ocupar muito espaço vertical, coloque os campos de nome e e-mail na mesma linha. Para o fazer, clique no campo do nome(matemática) géneroIsto abre-lhe as opções para o campo. Definir o campoA largura da coluna foi alterada de 100% para 50%.correio eletrónicoOs campos efectuam a mesma operação. Depois de definir a largura da coluna de ambos os campos para 50%, os dois campos devem ser colocados lado a lado numa única linha.

Separador avançado para campos

Agora vamos dar uma olhadela rápida ao campo "nível elevado". Na maioria dos casos, não precisa de fazer quaisquer ajustes aqui.

No entanto, há que ter em conta que, neste caso, oIDO campo nunca deve estar vazio. Se, por alguma razão, estiver vazio, introduza o nome do ID manualmente. Sem o ID, o formulário não funcionará corretamente. Note-se que o shortcodeabrangerNome do ID. Se pretender enviar dados de campos específicos, pode copiar/colar este código curto na mensagem de correio eletrónico a enviar. Por defeito, as mensagens de correio eletrónico utilizam o código curto gerado automaticamente[all-fields]Envie todos os dados do campo. No entanto, em alguns casos, não é desejável enviar dados para cada campo numa mensagem de correio eletrónico. Neste caso, pode introduzir manualmente os códigos curtos para os campos que pretende incluir.

Para formulários de subscrição normais, estas opções avançadas podem ser mantidas, desde que seja atribuído um ID a cada opção.

Conteúdo > Botões

Agora, defina as opções para os botões do formulário. A maioria dos formulários simples (como este) tem apenas um botão - o botãoapresentar (um relatório, etc.)Botões. No entanto, se pretender criar um formulário com várias etapas, cada etapa também deve ter um botão. 

Primeiro, selecione o botão de envio do formulário para omagnitude. Esta opção fornece alguns "pressuporEstilo", que define principalmente o tamanho da fonte e o preenchimento do botão. Estes podem ser ajustados mais tarde no separador Estilos do widget, mas para uma configuração rápida, este é o local onde deve fazer as suas selecções.

De seguida, defina o botãoamplitude. Para formulários pequenos, a opção 20% é normalmente uma boa escolha, mas é bom utilizar a largura que funciona melhor para o seu estilo específico.

Uma vez que este formulário não é um formulário de várias etapas, pode ignorar a opção do botão de várias etapas. Na secçãoapresentar (um relatório, etc.)para introduzir o texto do botão. A predefinição é Enviar, mas outras opções comuns podem ser Subscrever, Iniciar, Registar, etc.

Em seguida, se desejar, selecione umícone (informática)Apresentado no botão "apresentar (um relatório, etc.)" ao lado do texto. Se optar por apresentar o ícone, aparecem duas novas opções.Localização do íconePermite a opção de colocar o ícone no ícone "apresentar (um relatório, etc.)"Antes ou depois do texto.Espaçamento dos íconesPermite ajustar o espaçamento entre o ícone e o texto "Submeter".

Em alguns casos, se pretender adicionar umID do botãopara ser utilizado em código personalizado quando necessário. Normalmente, este item é deixado em branco e, no caso desta demonstração, é deixado em branco.

Índice > Funcionamento após a apresentação

Esta secção permite adicionar acções que serão executadas depois de um visitante submeter um formulário. A principal ação predefinida é enviar a alguém um e-mail com os dados do formulário. Outras acções típicas podem ser redirecionar o utilizador para uma página específica ou ligar-se a uma plataforma de marketing de terceiros (por exemplo, Mailchimp). Neste exemplo, vamos executar cada uma destas acções.

Ação por e-mail

Como mencionado acima, foi adicionada a predefinição para que possamosOperações de correio eletrónico. Isto pode ser feito no"Adicionar operação"para o ver. Se não pretender enviar os dados de submissão do formulário por correio eletrónico a ninguém, pode fazê-lo clicando em junto a Email na áreaXpara remover esta ação. Claro que, normalmente, queremos enviar dados por correio eletrónico, por isso, deixe esta ação em vigor. Agora repare que existe um separador E-mail no separador Acções após a submissão. Cada ação adicionada criará o seu próprio separador de opções sob este separador. 

O separador E-mail tem várias opções.

Acções do MailChimp

Depois de se certificar de que estas definições estão em ordem, está na altura de adicionar outra ação. Desta vez, abra a ação"Operações pós-submissão"e, em seguida, clique no campo ao lado de E-mail para abrir as opções do menu suspenso. Neste exemplo, selecione Mailchimp, o que irá adicionar um novo campo no separador E-mail chamadoMailChimpO novo separador do Clique no separador para o abrir.

Esta mensagem é recebida se a integração com o MailChimp não tiver sido configurada:

Defina a sua chave da API do MailChimp nas definições de integração. Também pode definir uma chave de API do MailChimp diferente selecionando Personalizar.

Basta clicar no botão"Definições de integração"A ligação abre um novo separador do navegador onde pode introduzir a sua chave de API do MailChimp. 

Assim que a chave tiver sido definida, poderá selecionar uma na lista pendente no separador MailChimp do formuláriopúblicoListas. Se o fizer, adicionará automaticamente o nome e o endereço de e-mail do utilizador à sua lista do MailChimp quando o utilizador submeter o formulário.

operação de redireccionamento

Por fim, vamos acrescentar um último "Operações pós-submissão" Abrir"Operações pós-submissão", clique no campo e selecione-o na lista pendente"Redireccionamento". Isto irá adicionar um novo separador "Redireccionamento" abaixo.

clicar (utilizando um rato ou outro dispositivo apontador)"redireccionamentos"para ativar as suas opções e, em seguida, introduza a página para a qual pretende redirecionar o utilizador depois de o formulário ser submetido comoURL. Pode ser qualquer página criada anteriormente para este fim. Para este exemplo, seria uma página que agradece ao utilizador por se ter inscrito e lhe fornece o brinde oferecido ou informações sobre como descarregá-lo.

Conteúdo > Opções adicionais

Uma vez que não se trata de um formulário com várias etapas, pode saltá-lo diretamente"Configuração de passos"e abra o separador"Outras opções"Tab.ID do formulárioé opcional, mas se precisar de utilizar o ID de algum código personalizado para localizar este formulário, pode introduzir um ID único aqui; caso contrário, deixe-o em branco.

Coloque uma mensagem personalizada nodefinido comoserPara poder introduzir a redação específica necessária para cada mensagem que possa ser enviada ao utilizador. Se pretender alterar "Ocorreu um erro" para "Lamentamos, mas ocorreu um erro".
tomar nota deAs mensagens personalizadas são mensagens de reserva para quando o browser não apresenta os seus próprios erros. Muitas vezes, o utilizador nunca verá estas mensagens específicas.

penteado

Agora que o formulário está a funcionar corretamente, pode adicionar-lhe alguns estilos. Clique no botão"tipo"Tab.

Cada secção do formulário pode ser estilizada, incluindo oformulário (documento)por si só,campo do formulário,apresentar (um relatório, etc.)responder com cânticosBotões multi-passo,mensagensresponder com cânticosdeslocação(se utilizado).

Teste a sua forma!

Quando tiver configurado o estilo do formulário a seu gosto, está pronto. Publique ou actualize a página e preencha o formulário para se certificar de que funciona como esperado.