Neste artigo, você descobrirá como criar um formulário com o Elementor gratuito.
Embora o widget Formulário esteja disponível apenas em Elementor ProIsso não significa que você não possa adicionar um formulário 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.
ElementorTanto na versão profissional quanto na gratuita, oferece dois widgets para criação de formulários: o widget HTML e o widget Shortcode. O widget HTML permite incorporar um formulário usando código HTML, enquanto o widget Shortcode permite incorporar formulários de plugins que utilizam 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 é perfeitamente 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.
Passo 1: Crie uma nova página ou edite uma já 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, lembre-se de configurar o layout clicando no ícone de engrenagem localizado na parte superior da 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. Assim que o código HTML estiver pronto, copie-o e prossiga para a próxima etapa.
Etapa 3: adicionar uma nova seção no Elementor
No 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
Após adicionar a seção, encontre o widget "HTML" no painel de widgets à esquerda. Arraste e solte-o 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
Após posicionar o widget HTML, clique na aba "Conteúdo" do widget no painel esquerdo. Cole o código HTML do seu formulário no campo indicado. O formulário aparecerá na página imediatamente.
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
Após integrar e estilizar o formulário, reserve um tempo para visualizar a página e 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.
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 o widget Formulário disponível na versão Pro, é uma maneira eficaz de adicionar formulários funcionais ao seu site sem custos adicionais.
Combinando os recursos do Elementor com um pouco de código HTML, você pode criar formulários personalizados de acordo com 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 disponíveis, mas recomendamos o Contact Form 7, pois é 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> AdicionarEm seguida, pesquise por "Contact Form 7". Depois de encontrar o plugin, 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, posicione o cursor na área onde deseja adicioná-lo (você pode posicioná-lo abaixo ou acima de um campo existente). Adicione um rótulo para o novo campo do formulário no formato <label> votre label préféré </label>.
Posicione o cursor 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ãoPara melhorar a legibilidade e a 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 Contact Form 7 enviará os formulários recebidos para um endereço de e-mail. Você pode definir o endereço de e-mail na aba correspondente. Email.
Você pode acessar a aba. Mensagens Caso deseje substituir as mensagens padrão, você pode personalizar a mensagem que aparece após o envio bem-sucedido do formulário pelos visitantes, 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 você deseja modificar ou adicionar campos ao seu formulário, pode fazê-lo diretamente na interface do Contact Form 7. É possível adicionar campos para números de telefone, caixas de seleção ou qualquer outro tipo de dado que você precise. Após concluir 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 código curto, abra a página onde deseja adicionar o formulário usando o editor Elementor. Adicione uma nova seção ou selecione uma existente onde o formulário deve aparecer.
Localize o widget "Shortcode" no painel de widgets do Elementor e arraste-o para a seção desejada. Cole o shortcode que você copiou anteriormente no campo indicado.
Etapa 6: personalize e estilize o formulário
O formulário Contact Form 7 integrado ao Elementor usará, por padrão, o estilo do seu tema WordPress. Se desejar 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, certifique-se de visualizar o formulário para verificar se ele funciona corretamente. Envie uma mensagem de teste para garantir que todos os recursos estejam operando. Após se certificar de que tudo está funcionando, publique a página para que o formulário fique acessível aos seus 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 a animação Lottie
- Elementor : Como criar um rastreador de progresso verticalObtenha o Elementor Pro agora !!!
Conclusão
Pronto! Este artigo concluiu o tutorial sobre como criar um formulário com a versão gratuita do Elementor. Se tiver alguma dificuldade, deixe um comentário. 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.
...