Neste artigo, você descobrirá como criar um formulário com o Elementor gratuito.
Embora o widget Formulário esteja disponível apenas em Elementor Pro, isso não significa que você não pode adicionar formulários com a versão gratuita do Elementor.
Se você deseja incluir um formulário em uma página criada com a versão gratuita do Elementor, existem dois métodos que exploraremos neste artigo.
ElementorO , em suas versões profissional e gratuita, oferece dois widgets que permitem criar formulários. São eles: HTML e Shortcode. O widget HTML permite incorporar um formulário usando código HTML, enquanto o widget Shortcode permite incorporar um formulário a partir de plugins de formulário que usam shortcodes, como o Contact Form 7.
conteúdo
Crie um formulário com Elementor versão gratuita usando um widget HTML em 7 etapas
Criar um formulário com a versão gratuita do Elementor é totalmente possível, mesmo que você não tenha acesso ao widget Formulário disponível na versão Pro. Um método eficaz é usar o widget HTML, que permite incorporar um formulário usando código HTML.
Etapa 1: crie uma nova página ou edite a existente
Para começar, crie uma nova página e edite-a com Elementor (Páginas -> Adicionar). Você também pode editar uma página existente, se desejar.
Se você decidir criar um formulário em uma nova página, não se esqueça de configurar o layout clicando no ícone de engrenagem acima da sua página.
Etapa 2: preparar o código HTML do formulário
Para começar, você precisará do código HTML do seu formulário. Se você tiver habilidades em HTML, poderá escrever o código sozinho. Caso contrário você pode encontre muitos modelos de formulário HTML gratuitos online. Quando o código HTML estiver pronto, copie-o e passe para a próxima etapa.
Etapa 3: adicionar uma nova seção no Elementor
Em seu editor Elementor, comece criando uma nova seção na página onde deseja inserir o formulário. Clique no botão “+” para adicionar uma seção.
Em seguida, escolha o layout que melhor se adapta ao seu formulário.
Etapa 4: insira o widget HTML
Depois de adicionar a seção, encontre o widget “HTML” no painel de widgets à esquerda. Arraste e solte na seção que você criou. Este widget permite inserir código HTML diretamente na página.
Etapa 5: cole o código HTML do formulário
Assim que o widget HTML estiver instalado, clique na guia “Conteúdo” do widget no painel esquerdo. Cole o código HTML do seu formulário no campo fornecido para esse fim. O formulário aparecerá imediatamente na página.
Etapa 6: personalizar e estilizar o formulário
O formulário que você integrou adotará automaticamente o estilo básico do seu tema WordPress. No entanto, se quiser personalizá-lo ainda mais, você pode adicionar CSS personalizado para ajustar cores, margens, fontes e muito mais. Isso requer algum conhecimento de CSS ou a ajuda de um desenvolvedor, se necessário.
Etapa 7: visualizar e publicar
Depois que seu formulário estiver integrado e estilizado, reserve um tempo para visualizar a página para garantir que tudo seja exibido corretamente. Teste o formulário para verificar se ele funciona conforme o esperado. Quando estiver satisfeito com o resultado, publique a página.
Veja também: Como usar widgets/modelos Elementor como blocos de Gutenberg
Uma coisa importante a ser observada: se o seu formulário HTML usa CSS, imagens ou JavaScript externo para estilização, certifique-se de fazer upload das pastas que contêm os arquivos CSS, imagens e JavaScript para o diretório raiz do seu site.
Portanto, usar um widget HTML para criar um formulário na versão gratuita do Elementor é uma solução simples e flexível. Embora exija um pouco mais de trabalho do que com o widget Formulário disponível na versão Pro, é um método eficiente de adicionar formulários funcionais ao seu site sem custos adicionais.
Ao combinar os recursos do Elementor com um pouco de código HTML, você pode criar formulários adaptados às suas necessidades, mantendo a consistência visual do seu site.
Crie um formulário Elementor gratuito usando o formulário de contato 7 em 7 etapas
A criação de um formulário com a versão gratuita do Elementor pode ser facilmente realizada usando o popular plugin Formulário de Contato 7. Este plugin oferece um método simples e eficaz para incorporar formulários em suas páginas Elementor sem exigir nenhum conhecimento de codificação.
Existem muitos outros plugins de formulário por aí, mas recomendamos o Contact Form 7 porque é o plugin de formulário mais popular para WordPress e é totalmente gratuito.
Etapa 1: Instale e ative o Formulário de Contato 7
Para começar, você precisa instalar e ativar o plugin Contact Form 7 no seu site WordPress. Acesse o painel do WordPress, acesse Extensões> Adicionare pesquise “Formulário de contato 7”. Assim que o plugin for encontrado, clique em instalar agorae, em seguida, ativar assim que a instalação estiver concluída.
Etapa 2: crie um novo formulário
Assim que o plugin for ativado, você poderá criar um formulário. Para fazer isso, vá para Contato > Adicionar novo em seu painel do WordPress. Dê um nome ao seu formulário para reconhecê-lo facilmente mais tarde.
Por padrão, o Contact Form 7 oferece um formulário de contato básico com campos para nome, e-mail, assunto e mensagem. Você pode usar este formulário como está ou personalizar os campos de acordo com suas necessidades.
Se você deseja adicionar um novo campo, coloque o ponteiro na área onde deseja adicionar o novo campo (você pode colocá-lo abaixo ou acima de um campo existente). Adicionar rótulo para o novo campo de formulário no formato <label> votre label préféré </label>.
Coloque o ponteiro logo após o rótulo do campo que deseja modificar ou após o último campo existente. Em seguida, selecione o tipo de campo que deseja adicionar na guia Campeão. Para melhorar a legibilidade e organização do seu formulário, você pode inserir uma quebra de linha após cada novo campo, o que tornará o formulário mais claro e alinhado com os demais campos existentes.
Preencha os campos e clique em Inserir a etiqueta (você pode deixar tudo como padrão).
O Formulário de contato 7 enviará os envios enviados por meio do seu formulário para um e-mail. Você pode definir o e-mail na guia Email.
Você pode ir para a guia Mensagens se você deseja substituir as mensagens padrão. Você pode personalizar a mensagem que aparece depois que seus visitantes enviam o formulário com sucesso ou a mensagem de erro quando o formulário não é enviado, etc.
Clique no botão Enregistrer depois de terminar de editar o formulário.
Etapa 3: personalize o formulário
Se desejar modificar ou adicionar campos adicionais ao seu formulário, você pode fazê-lo diretamente na interface do Contact Form 7. Você pode adicionar campos para números de telefone, caixas de seleção ou qualquer outro tipo de dados que você precisar. Quando terminar de fazer as alterações, salve o formulário.
Leia nosso guia sobre: Como personalizar o formulário de contato Formulário de 7
Etapa 4: obtenha o shortcode do formulário
Depois de criar e personalizar seu formulário, o Contact Form 7 fornecerá um shortcode exclusivo. Este shortcode é essencial para integrar o formulário em uma página Elementor. Basta copiar o shortcode encontrado sob o nome do formulário.
Etapa 5: incorporar o formulário no Elementor
Agora que você tem o shortcode, abra a página onde deseja adicionar o formulário usando o editor Elementor. Adicione uma nova seção ou selecione uma seção existente onde o formulário deve aparecer.
Encontre o widget “Shortcode” no painel de widgets Elementor e arraste-o para a seção escolhida. Cole o shortcode que você copiou anteriormente no campo fornecido para esse fim.
Etapa 6: personalize e estilize o formulário
O formulário Contact Form 7 integrado ao Elementor terá como padrão o estilo do seu tema WordPress. Se você quiser personalizar ainda mais a aparência do formulário, isso pode ser feito adicionando CSS personalizado. Você pode alterar cores, margens, tipografia e muito mais para adaptar o formulário à aparência geral do seu site.
Leia também: Como desativar um pop-up Elementor em smartphones
Etapa 7: teste e liberação
Antes de publicar sua página, pré-visualize o formulário para verificar se está funcionando corretamente. Envie uma mensagem de teste para garantir que todos os recursos estão funcionando. Quando estiver satisfeito, publique a página para tornar o formulário acessível aos visitantes.
Então ! Usando o Contact Form 7 com Elementor gratuito, você pode criar facilmente formulários funcionais sem gastar um centavo. Este método é ideal para usuários que desejam funcionalidades básicas, mas eficazes, ao mesmo tempo que mantêm a flexibilidade para personalizar seu formulário.
O Contact Form 7, combinado com Elementor, oferece uma solução robusta para capturar informações essenciais de seus visitantes.
Se quiser uma personalização mais fácil, você pode conferir este artigo sobre como personalize um formulário Contact Form 7 usando Essential Addons e Elementor.
FAQ: Como criar um formulário com a versão gratuita do Elementor
Posso criar um formulário com a versão gratuita do Elementor?
Sim, você pode criar um formulário com a versão gratuita do Elementor usando widgets HTML ou Shortcode. Embora o widget Formulário esteja reservado para a versão Pro, existem alternativas gratuitas eficazes.
Quais são os métodos para criar um formulário no Elementor gratuito?
Você pode usar o widget HTML para incorporar um formulário HTML diretamente ou o widget Shortcode para incorporar um formulário criado com um plugin como Contact Form 7.
Como adicionar um formulário HTML a uma página Elementor?
Use o widget HTML no Elementor para inserir o código HTML do seu formulário. Você pode colar o código diretamente no campo de conteúdo do widget.
Preciso saber HTML para criar um formulário com Elementor grátis?
Embora ajude, você não precisa de conhecimentos de HTML se usar um plugin de formulário como o Contact Form 7, que gera códigos de acesso fáceis de incorporar.
Como estilizar um formulário criado com Elementor grátis?
Se estiver usando um formulário HTML, você precisará usar CSS para estilizá-lo. Os formulários gerados por plug-ins como o Contact Form 7 herdam o estilo do seu tema WordPress, mas você também pode personalizar o estilo com CSS.
Existem plugins gratuitos para criar formulários com Elementor?
Sim, plug-ins como Contact Form 7, WPForms Lite e Ninja Forms são opções gratuitas populares para a criação de formulários que você pode incorporar no Elementor.
Como integrar um formulário Contact Form 7 em uma página Elementor?
Crie seu formulário no Formulário de Contato 7 e copie o shortcode gerado. Use o widget Shortcode do Elementor para incorporar este formulário em sua página.
Quais são as limitações da versão gratuita do Elementor para criação de formulários?
A versão gratuita do Elementor não oferece um widget de formulário dedicado. Para criar formulários, você precisará usar soluções como HTML, Shortcodes ou plugins externos.
Como posso testar meu formulário criado com Elementor?
Após incorporar seu formulário na página, visualize a página com Elementor e envie um teste para ter certeza de que o formulário funciona corretamente.
É possível utilizar formulários avançados com a versão gratuita do Elementor?
Para recursos avançados, como campos condicionais ou formulários de várias etapas, é recomendado atualizar para a versão Pro do Elementor ou usar plugins de formulário com recursos avançados em suas versões gratuitas.
Outros recursos relacionados
- Como integrar ActiveCampaign com Elementor
- Como integrar AWeber com Elementor
- Elementor : Como adicionar animação Lottie
- Elementor : Como criar um rastreador de progresso verticalObtenha o Elementor Pro agora !!!
Conclusão
Então ! Isso é tudo neste artigo que mostra como criar um formulário com a versão gratuita do Elementor. Se você tiver alguma dúvida sobre como chegar lá, informe-nos 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.
...
