Quer saber como criar um formulário de contato em Elementor?
A página de contato é uma das páginas cruciais de um site. Muitas vezes é usado como um parâmetro se um site é aprovado ou não. Elementor vem com um widget nativo - o widget Form - para permitir que você adicione um formulário a uma página. Este artigo mostrará como.
O próprio widget de formulário está disponível apenas no Elementor Pro. O que significa que você deve atualizar para a versão pro se ainda estiver usando a versão gratuita. Você não só pode usar o widget de formulário para criar um formulário de contato, mas você também pode usá-lo para criar outros tipos de formulários, incluindo formulário de registro de e-mail, formulário de registro de usuário, o formulário de upload de arquivoEtc ...
Como criar um formulário de contato no Elementor
Quando você cria um formulário de contato Usando o widget Form do Elementor, você pode definir o local para onde os dados do formulário serão enviados. Seja na sua conta de e-mail ou no gerenciador de envio de formulários padrão do Elementor.
Neste artigo, vamos pular direto para adicionar o widget Form à caixa de edição do Elementor. Basta adicionar o widget Form do painel do widget à caixa de edição da seguinte maneira:
Como você pode ver, o widget Form cria automaticamente um formulário que consiste em três campos.
Leia também: Como adicionar uma grade de preços no Elementor
Para editar um campo existente, você pode simplesmente abri-lo. Você pode alterar o tipo de campo, substituir o rótulo padrão e o espaço reservado e defini-lo como um campo obrigatório, se desejar.
Para excluir um campo existente, você pode simplesmente clicar no X do campo que você deseja excluir.
Para adicionar um novo campo, você pode simplesmente clicar no botão ADICIONE UM ELEMENTO. O próprio widget de formulário oferece suporte a vinte tipos de campos.
Definindo a ação do formulário
Como mencionamos anteriormente, você pode enviar os dados do formulário (envios) para sua conta de e-mail ou para o envio de formulário embutido do Elementor. Para definir o destino, você pode abrir o bloco Após enviar ações sob a guia Conteúdo no painel de configurações.
Veja também: Como criar uma imagem arredondada no Elementor
Selecione uma ação que você deseja definir no campo disponível (você pode adicionar várias ações). Neste exemplo, selecionamos Email.
Se você também definir a ação do formulário no e-mail, você pode abrir o bloco Email para definir o endereço de e-mail para recebimento dos dados do formulário. Como você pode ver, você também pode definir o assunto se quiser.
Por padrão, Elementor inclui o conteúdo de todos os campos do formulário. Se quiser incluir apenas conteúdo de campos específicos, você pode colar os códigos de acesso de seus campos preferidos no campo. Mensagem.
Por exemplo, a configuração abaixo enviará apenas o conteúdo do campo da mensagem.
Para obter o código de acesso de um campo, você pode clicar na guia AVANÇADO no campo associado do bloco Campos do formulário.
Definição de mensagens
Quando os dados do formulário forem enviados com sucesso, seus visitantes verão uma mensagem de sucesso abaixo do formulário. Da mesma forma, eles também verão uma mensagem de erro quando os dados do formulário não forem enviados.
Veja também: Como criar uma seção de membro da equipe com Elementor
Você pode substituir essas mensagens padrão, bem como duas outras mensagens, a partir do bloco Opções adicionais sob a guia Conteúdo no painel de configurações. Ative o Mensagens personalizadas para substituir as mensagens padrão.
Personalizando o formulário
Assim que terminar de fazer as configurações básicas em a guia Conteúdo no painel de configurações, você pode alternar para o Style para personalizar o formulário. Existem cinco blocos que você pode abrir aqui.
Contato
Você pode abrir este bloco para definir o espaço entre as colunas e as linhas do formulário, o espaçamento do rótulo, a tipografia (família da fonte, tamanho da fonte, estilo da fonte, etc.) do rótulo do formulário e a cor do texto deste último.
- Campo
Você pode abrir este bloco para definir a tipografia do texto do campo, bem como a cor, a cor de fundo dos campos do formulário, o tamanho, a cor da borda e o raio da borda dos campos do formulário.
- botões
Você pode abrir este bloco para personalizar o botão de envio. Você pode definir coisas como a tipografia do texto do botão, bem como cor, cor de fundo, raio da borda, tamanho da borda, cor da borda e preenchimento do texto. Para definir o tamanho do botão, você pode fazê-lo a partir do bloco botões em a guia Conteúdo.
- Mensagens
Você pode abrir este bloco para definir a tipografia, bem como a cor do texto das mensagens.
- Passos
Você pode abrir este bloco apenas se quiser criar um formulário de várias etapas.
Depois de personalizar o formulário, assim como a página, você pode publicar sua página.
Erro potencial
Um dos erros comuns quando você define a ação do formulário como Email é que o formulário não é enviado. Em vez disso, você verá a seguinte mensagem.
Elementor e a maioria dos plug-ins de formulário de contato - incluindo o Formulário de Contato 7 - usam o recurso de entrega de correio padrão do WordPress chamado wp_mail. Esta função depende da função enviar correio que depende do PHP para funcionar.
Leia também: Como adicionar um controle deslizante de depoimento no Elementor
Infelizmente, todos os fornecedores deHospedagem na web não ative a função enviar correio do PHP. Em caso afirmativo, seu formulário não será enviado. Em vez disso, você receberá uma mensagem de erro como a acima.
Para resolver o problema, você pode instalar e configurar um serviço de entrega de correio personalizado em seu WordPress. Como alternativa, se possível, você pode pedir ao seu provedor de hospedagem para habilitar o recurso enviar correio do PHP.
No final
Elementor é um dos plug-ins de construtor de páginas mais abrangentes. Ele vem com vários elementos de design (chamados de widgets) para você adicionar facilmente elementos à página, incluindo um formulário de contato.
Embora você possa usar o widget Formulário para criar um formulário de contato do zero com seu próprio design, o Elementor também oferece modelos de formulário que você pode usar. Você também pode criar uma página de contato (completo com o formulário de contato, é claro) a partir de um modelo.
Obtenha o Elementor Pro agora!
Conclusão
Aqui está ! É isso neste artigo que mostra como criar um formulário de contato no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
