Como Adicionar Formulários ao Seu Site Gratuitamente
Construtor de Formulários é uma maneira fácil e gratuita de adicionar formulários ao seu site; ótima notícia! Desenvolvedores oferecem uma solução com um clique para reduzir o trabalho manual com HTML. Você pode criar formulários para qualquer finalidade, sem precisar codificar. Criação de formulários em várias etapas, integração com Zapier ou Google Sites com um campo simples para conectá‑los, um recurso de lógica condicional — todas essas opções podem ser testadas online, de graça. O artigo de hoje sobre o Form Builder explica como.
Adicionar formulários ao seu site em apenas alguns minutos
- Crie uma conta gratuita no Elfsight.
- Vá para o Criador de Widgets online da Elfsight.
- Escolha o modelo necessário.
- Personalize o widget e clique em Salvar.
- Copie o código de instalação do formulário.
- Cole o código HTML no seu site.
Você tem formulários incorporados no seu site. Experimente o widget no editor!
Prós e Contras do Construtor de Formulários da Elfsight
Aqui você pode ver uma imagem real que ajuda a decidir se a solução de adicionar formulários oferecida pela Elfsight atende às suas necessidades.
Antes de tudo, aqui está uma lista de vantagens que você pode obter usando o construtor:
- Os formulários são compatíveis com a maioria dos criadores de sites e não requerem conhecimento de código para integração;
- Você pode criar um widget de formulário gratuitamente com o plano gratuito ou assinar qualquer plano pago para obter mais funcionalidades;
- Se você não estiver totalmente satisfeito com o construtor, pode solicitar o reembolso dentro de 14 dias a partir da data da assinatura online;
- Se tiver algum problema, entre em contato com o Suporte ao Cliente, que estará online para ajudar com a incorporação do formulário;
- existem recursos para relatar e coletar dados que ajudam você a analisar a eficiência do construtor no site.
- Com uma variedade de modelos de formulários, você pode coletar o feedback dos clientes em seu site e usá-lo para remarketing.
Embora haja muitas vantagens, algumas desvantagens também devem ser mencionadas:
- Não há opção de assinatura anual nem função de assinatura vitalícia;
- Ao começar a usar o construtor, a pontuação de desempenho do site pode cair em cerca de 3%;
- é uma solução simples que mal consegue superar a funcionalidade de plugins integrados;
- Há menos interatividade no site.
Com tudo em mente, você pode decidir com tranquilidade se vale a pena tentar.
Lista de Recursos do Widget de Formulários
Nesta tabela você pode ver a funcionalidade completa da solução pronta para incorporação de formulários online pela Elfsight.
| Quaisquer tipos de formulário | Com o Elfsight Form Builder, você pode criar formulários de qualquer tipo para incorporar no seu site. Esta é uma ferramenta tudo-em-um que permite criar um formulário de contato, uma pesquisa, ou outro tipo de formulário de que você precise online em um só lugar. |
| Layout flexível | O construtor oferece oportunidades flexíveis de personalização de layout online para atender às necessidades do seu site, como: uma opção para dividir seus campos em colunas para criar um visual peculiar; uma opção para editar os rótulos da forma necessária — você pode ocultá-los se necessário ou criar o rótulo comum para cada grupo de campos; uma opção para tornar um formulário inteiramente horizontal; uma opção para editar a largura do seu formulário; uma opção para estruturar o formulário usando elementos distintos de rótulo, título e parágrafo. |
| Formulários em várias etapas | Se precisar dividir seu formulário em várias páginas, basta definir o número de páginas e distribuir seus campos nelas. Em seguida, personalize ainda mais as páginas do seu site adicionando um título e uma descrição a cada página. |
| 20 elementos de formulário | Com 20 elementos variados de formulário online, o widget pode ser usado para criar qualquer formulário desejado. Aqui vão: textos longos e curtos; várias escalas online (polegar, sorriso, estrela e número); opções de data e hora responsivas; e muito mais. Além disso, todos os campos podem ser ajustados conforme suas necessidades. Por exemplo, no criador online da Elfsight, você pode configurar os campos obrigatórios do seu formulário responsivo, formatos de data e hora, arquivos disponíveis para upload, etc. |
| Estilização de Formulário | Você pode criar um design único para o seu formulário sem precisar de código: escolha entre modo claro ou escuro, adicione a cor da sua marca, defina um design específico para os campos do seu formulário ou altere a fonte. Se quiser um visual único para o seu formulário responsivo, ajuste cada componente individualmente pelo editor online. |
| Cabeçalho do formulário | Você pode definir um cabeçalho para o formulário e fornecê-lo com um título e uma descrição. Também há a opção de adicionar uma imagem de capa do site e o logotipo da sua marca. Com o cabeçalho, você pode melhorar a aparência do formulário responsivo, o que é especialmente relevante ao usar formulários fora do site via link. |
| Formulários flutuantes | Há uma forma de escolher como o formulário será incorporado ao site: pode ser inserido diretamente na área de conteúdo (Formulário Inline) ou haverá um botão flutuante que abre um painel com seu formulário ao ser clicado (Formulário Flutuante). |
| Integrações | |
| Proteção contra spam | Para oferecer a melhor experiência com o widget, os formulários contam com o Google reCAPTCHA. O Google reCAPTCHA é uma solução anti-spam gratuita que funciona automaticamente para protegê-los contra spam. É invisível, portanto os clientes não precisarão selecionar a caixa de verificação no site, pois tudo opera automaticamente. Bots de spam, por outro lado, enfrentarão grandes dificuldades. |
| Notificações por e-mail | No criador online, você pode configurar várias notificações por e-mail ao preencher o formulário. Por exemplo, envie um e-mail para você mesmo com todas as informações do formulário. Ou envie um e-mail para o cliente após ele ter preenchido o formulário no seu site online (recurso de autoresponder). Para cada notificação, você pode configurar todos os parâmetros de envio responsivos e personalizar o modelo de e-mail. |
| Ações após o envio | It’s for you to choose what action will happen after the form is submitted: whether a success message will appear, a redirect to another page of the website will occur, or the form will simply disappear. Each action can be further customized code-free in the online form maker. |
| Pré-preencher formulários com parâmetros de URL | Para uma integração mais profunda do formulário, você pode configurar o preenchimento automático de determinados campos por padrão usando parâmetros na URL. Por exemplo, se souber que seu cliente está interessado em um determinado produto ou serviço, você pode fornecer a ele um link para o site em que o parâmetro já virá especificado. Dessa forma, o campo correspondente do formulário já será preenchido, sem necessidade de código. Você também pode adicionar dados analíticos dinâmicos usando campos ocultos, preenchendo-os por meio de parâmetros da URL. |
| Formulários multilíngues | Todos os campos do seu formulário personalizado podem ser traduzidos para qualquer idioma; aqui estão apenas alguns: Espanhol, Francês, Italiano, Português, Sérvio, e muitos, muitos mais. |
Guias completos sobre como adicionar formulários em diferentes construtores de sites
Aqui está um guia simples sobre como incorporar o formulário que você criou e personalizou online para qualquer site. Você precisará apenas colar o código do widget do formulário em um campo HTML da sua página. Pronto, vamos codar!
- Sem custos: ambas as opções para criar o formulário e testar a funcionalidade são gratuitas
- Se desejar fazer alterações no formulário existente, você pode fazê-las online no painel administrativo da Elfsight. Portanto, não é necessário editar o código da sua plataforma para alterar o formulário.
- Todas as atualizações do seu formulário responsivo são automatizadas, então você não precisa fazer nada manual.
Com estas instruções passo a passo você verá que incorporar formulários em qualquer site é tão fácil que até quem não é profissional em código consegue fazer. Sinta-se à vontade para assistir ao vídeo para ter certeza:
Aqui está a breve transcrição em vídeo que você também pode seguir:
- Autorize o Elfsight gratuitamente e acesse o painel de administração;
- Crie seu formulário responsivo no construtor de widgets;
- Salve o Construtor de Formulários depois que todas as configurações estiverem concluídas;
- Copie o código de instalação do formulário a partir do pop-up;
- Vá para o seu site e cole o código do formulário no campo HTML.
Agora você vê como é incrivelmente fácil! Depois de terminar, vá até sua página e confira o Construtor de Formulários incorporado em ação. E se encontrar dificuldades, a Equipe de Suporte da Elfsight está sempre online para ajudar!
Como incorporar formulários no WordPress
Aqui você pode ver como adicionar o Form Builder ao seu site WordPress. Existem duas instruções distintas, pois alguns usuários da plataforma optam pelo Elementor em vez do editor padrão do WordPress, dê uma olhada:
Variante 1: Para quem usa o editor online do WordPress
Então, você criou seu formulário responsivo e o modificou no painel do Elfsight. Agora, após todas as alterações, abra seu site WordPress e vá até o painel de administração. Em seguida, cole o código do widget do formulário do Elfsight no campo de código HTML. Siga os passos:
- Crie o formulário no construtor online da Elfsight.
- Copie o código para instalar o formulário.
- Autorize no seu site WordPress.
- Vá para a seção Páginas.
- Escolha uma página para inserir seu formulário.
- Adicione um bloco de código HTML personalizado onde for necessário.
- Cole o código do formulário do criador de widgets gratuito.
- Clique em ‘Atualizar’ e salve as alterações.
Quando o widget estiver integrado ao seu site, todas as alterações podem ser feitas diretamente pelo painel de administração do Elfsight, gratuitamente. Elas serão exibidas automaticamente no seu Construtor de Formulários. Assim, você não precisa modificar os formulários criados no site WordPress.
Variante 2: Para quem usa o Elementor
Se você escolher o Elementor, aqui está um guia rápido para você:
- Crie seu formulário personalizado no Elfsight.
- Copie o código de instalação do formulário.
- Vá para o painel de administração no site WordPress.
- Selecione a página necessária para adicionar o formulário.
- Vá para o gerenciador de páginas ou para a lista de páginas.
- Escolha a opção ‘Editar com o Elementor’.
- Solte o elemento ‘HTML’ para adicionar o formulário à página.
- Clique em ‘Atualizar’ para salvar as modificações.
Siga o guia para adicionar o código do widget de formulário em cada página do WordPress que você criou com o Elementor. Execute as etapas em cada página, uma a uma, e veja o seu Construtor de Formulários responsivo aparecer no site num piscar de olhos.
Incorpore formulários em sites Wix HTML
Para adicionar o Construtor de Formulários ao site Wix, primeiro abra o painel de controle do Wix. Em seguida, encontre a opção para incorporar código HTML personalizado ao site e siga os passos abaixo:
- Vá para o painel de administração do Elfsight.
- Crie o formulário e pressione ‘Salvar’.
- Copie o código do widget de formulário exibido no pop-up.
- Autentique-se no painel de administração do site Wix.
- A partir daí, vá para a seção Configurações.
- Selecione a opção ‘Código Personalizado’.
- O campo ‘Adicionar Código Personalizado’ chegará.
- Aqui você precisa colar o código do seu formulário.
Concluído! Vá até o Wix para ver como o seu construtor gratuito e responsivo funciona. E se você fizer alterações em seus formulários, elas serão exibidas automaticamente no site Wix. Este artigo explica como você pode facilmente adicionar um formulário aos sites Wix.
Uma forma de adicionar formulários ao Squarespace
Aqui está um breve tutorial para adicionar o HTML Form Builder ao Squarespace:
- Entrar no painel do Elfsight.
- Create your form in the widget maker.
- Copie o código para instalar o formulário.
- Autorize no painel de administração do Squarespace.
- Acesse o editor do site Squarespace.
- Clique em ‘Bloco de Código’ para inserir o código do formulário.
- Pressione um botão para salvar as alterações.
- Confira o widget no site Squarespace.
Depois de salvar as alterações, você poderá ver seu formulário exibido diretamente no site Squarespace. Você não precisa mexer em código HTML na plataforma. Assim que fizer alterações no painel de administração do Elfsight, elas aparecerão automaticamente no seu site.
Como adicionar formulários em sites HTML no Shopify
A seguir, você verá uma instrução que ajudará você a incorporar o widget responsivo da Elfsight no site Shopify:
- Faça login no Painel de Administração da Elfsight.
- Crie o formulário usando o criador online.
- Pressione um botão para salvar seu progresso.
- Copie o código do formulário da janela pop-up.
- Vá para o painel de administração do site Shopify.
- Escolha ‘Loja Online’ – ‘Personalizar’.
- No menu, selecione ‘Adicionar seção’.
- Vá para ‘Conteúdo Personalizado’, clique em ‘Adicionar’.
- Excluir as partes instaladas no site por padrão.
- Vá para o menu ’Adicionar Conteúdo’.
- Cole o código do formulário no campo ‘HTML Personalizado’.
- Salve e verifique o desempenho do site do widget.
Sempre que precisar alterar a aparência ou a funcionalidade do widget responsivo, você pode fazê-lo no painel de administração do Elfsight, gratuitamente. Todas as alterações serão refletidas automaticamente no seu site, sem precisar mexer no código da plataforma.
Incorporação de formulários em sites HTML do Webflow
Siga um guia rápido sobre como integrar formulários ao seu site Webflow:
- Abra o editor gratuito do Elfsight para começar a criar seu formulário.
- Selecione o design e os recursos adequados do widget.
- Pressione para salvar e, em seguida, copie o código de incorporação do formulário.
- Insira o código do widget de formulário na página inicial do Webflow.
- Salve as alterações e verifique a funcionalidade responsiva do widget.
Não hesite em contatar a Equipe de Assistência em caso de qualquer problema com a incorporação do código do site. Eles estão sempre prontos para ajudar.
Adicionar formulários ao site HTML do Google Sites.
São necessários dois tutoriais distintos, pois há versões novas e antigas do Google Sites. Aqui você pode ver como adicionar formulários em qualquer uma das versões que estiver usando.
Variante 1. Novo site do Google Sites
- Crie, personalize e salve seu widget no Elfsight.com.
- Copie o código de instalação do formulário da janela pop-up.
- Vá para o editor do Google Sites e clique em ‘Incorporar’.
- Selecione a opção ‘Código de incorporação’, cole o código do formulário e pressione ‘Próximo’.
- Ajuste a largura e a altura desejadas do seu widget responsivo.
Concluído! Você integrou com sucesso formulários no seu site do Google Sites.
Variante 2. Site clássico do Google Sites (antigo)
Esta opção é um pouco mais complicada que a primeira, mas não se preocupe! Com a ajuda deste tutorial, não é tão assustadora quanto parece.
- Crie o widget responsivo no painel de administração do Elfsight.
- Personalize todos os elementos no construtor online e pressione salvar.
- Obtenha o código de instalação do formulário na janela pop-up.
Depois de instalar o widget em um iframe, siga o guia rápido de incorporação do código:
- Abra o editor do Google Sites, depois clique em Editar.
- Clique em ‘Editar Código HTML’ para adicionar um novo elemento de código.
- Insira o iframe criado e depois pressione ‘Atualizar’.
- Ajuste as configurações e o tamanho do widget em ‘Propriedades’.
- Confira como o widget funciona no Google Sites.
Não foi simples? Agora o seu widget responsivo funciona perfeitamente na página do Google Sites! Se por acaso não funcionar, não hesite em contatar a Equipe de Suporte da Elfsight. Eles estão sempre prontos para ajudar.
Como adicionar formulários a um site HTML do Blogger
Para incorporar formulários ao site no Blogger, siga os passos:
- No painel de administração da Elfsight, crie seu formulário.
- Escolha o design e clique para salvar as alterações.
- Copie o código HTML do pop-up.
- Vá para a página inicial do Blogger e clique em ‘Tema’.
- Clique em ‘Editar HTML’ e veja a página de edição de código.
- Localize a tag “body”, cole o código após “div class”.
- Clique em Salvar e aproveite o desempenho responsivo do widget.
Parabéns! Você incorporou o formulário no seu site do Blogger.
O que você precisa saber sobre usar formulários no seu site
Segundo as estatísticas BuiltWith Trends, 40% dos 1000 sites mais visitados usam formulários para coletar dados dos usuários. Não é de se admirar — pesquisas mostram que formulários são valorizados pelos clientes e aumentam as conversões. Aqui você encontra algumas dicas e fatos desses estudos que devem certamente ficar em mente antes da instalação do formulário.
1. Pode o uso de formulários em um site aumentar as vendas?
Com certeza! Existem estudos que comprovam que o uso de formulários pode aumentar as vendas. Por exemplo, de acordo com Venture Harbour, formulários de várias etapas podem gerar até 300% mais conversões.
Uma das melhores descobertas que já fiz na minha carreira foi perceber o quão bem os formulários de múltiplos passos convertem… Em 2014, eu havia acabado de lançar uma calculadora online para medir as “zonas de conforto” das pessoas… devido à natureza da ferramenta, formulários web tradicionais não funcionavam para nós. Precisávamos capturar informações detalhadas sobre os usuários, mas formulários longos estavam matando nossas taxas de conversão.
Após muita pesquisa e testes, descobrimos o conceito de formulários em várias etapas e criamos um para nós… O formulário em várias etapas converteu 53% dos visitantes do site em leads, mesmo fazendo muitas perguntas (incluindo e-mail, nome, telefone e salário).
Marcus Taylor
2. Quando coletar informações pessoais dos usuários?
Segundo o estudo, 65% dos visitantes do site disseram que não enviariam um formulário se fossem solicitadas “muitas informações pessoais”. E há uma razão para isso. Os clientes não querem compartilhar detalhes como números de telefone ou endereços de e-mail com alguém que não conhecem. Portanto, adicionar campos de perguntas desse tipo em seus formulários pode despertar desconfiança em quem visita seu site pela primeira vez.
Recolha informações importantes, como o número de telefone, quando já houver estabelecido confiança e o seu cliente em potencial estiver pronto para dar o próximo passo com você.
Huff Industrial Marketing, KoMarketing, & BuyerZone
3. Quantos campos deve haver no meu formulário?
Venture Harbour, we can see how form length affects the efficiency of their usage. The results are controversial and depend on such factors as:”>Diversos estudos testaram encurtar ou ampliar as perguntas do conteúdo do formulário. Mais uma vez, agradecemos a Venture Harbour, podemos ver como o tamanho do formulário afeta a eficiência de seu uso. Os resultados são controversos e dependem de fatores como:
- O tipo de conversão: assinaturas de e-mail e criações de contas exigem formulários bem diferentes.
- Expectativas do usuário: se os usuários enxergarem valor ao preencher um campo, ficarão felizes em fazê-lo.
- Incentivo: Com isso em mente, você consegue criar um incentivo para reduzir a fricção?
- Quanta informação você precisa: Às vezes, adicionar atrito é o preço que você paga por leads de qualidade em detrimento da quantidade.
- Formatação: formulários de várias etapas criam espaço para formulários bem mais longos, com um design que reduz a fricção.
- Melhores práticas: são diretrizes, não regras. Tendências de design aceitas nem sempre dão certo.
Solução Tudo-em-Um para criar qualquer tipo de formulário com um clique
Modelos de Widgets de Formulários de Reserva HTML
Com o Elfsight Form Builder, crie rapidamente os tipos de formulário de que precisa, tudo em um só lugar.
Explore mais de 300 modelos do Construtor de Formulários
Se houver dúvidas em aberto
Agora você sabe como adicionar formulários a qualquer construtor de sites de forma simples e por que eles são eficazes. Você também sabe que pode criar qualquer tipo de formulário de que precisar com o widget responsivo da Elfsight. No entanto, se você ainda tiver dúvidas que não foram cobertas no artigo, consulte as opções a seguir:
- Visite a Wishlist para sugerir recursos de que você precisa, mas o Form Builder ainda não possui.
- Vá para a Central de Ajuda para ver mais artigos e tutoriais sobre Form Builder.
- templates that you can choose from to make a custom tool.”>Explore os modelos de widgets existentes que você pode escolher para criar uma ferramenta personalizada.
- Conecte-se com pessoas com pensamentos afins e compartilhe suas ideias na Comunidade Elfsight.
Esperamos que o artigo sobre incorporar um formulário tenha sido útil. Volte em breve e obrigado pela sua atenção!
Além disso, vale lembrar que também temos outros guias incríveis; por exemplo, você pode descobrir como inserir avaliações do Google Business no site!
