37 modelos de formulário de contato Bootstrap gratuitos 2022
Publicados: 2022-03-24Estamos sempre à procura de novos snippets, mas no caso dos formulários de contato do Bootstrap, precisávamos criar nossos próprios.
Embora tenhamos testado 100s e alguns tenham sido bastante sólidos, ainda decidimos levar as coisas em nossas mãos.
Com isso, prometemos a você os modelos mais confiáveis, novos e atualizados que FUNCIONAM PARA QUALQUER blog ou site.
Um formulário de contato é obrigatório para todos os sites, mas agora você não precisa criá-lo sozinho.
Nós nos certificamos de cobrir todos os tipos de estilos com mais de 35 designs diferentes.
O que é melhor, nossos formulários de contato gratuitos também são fáceis de editar e configurar. (Leia: personalização simples.)
Faça a seção de contato necessária acontecer rapidamente.
Formulário de contato 1 por Colorlib
Formulário de contato 1 desenvolvido pela Colorlib, é um formulário de contato legal projetado com Bootstrap. Este formulário de contato parece COOL por causa da excelente escolha de cores.
O título do formulário é 'Entre em contato', um título significativo e adequado para este formulário. No lado esquerdo do formulário, há um belo ícone de mensagem que melhorou a aparência deste modelo de formulário.
Este modelo de formulário fornece 4 campos de texto para nome, endereço de email, assunto e mensagem. O usuário pode esticar o campo de mensagem se preferir um campo de texto maior para inserir a mensagem.
Mais informações/Baixar
Formulário de contato 2 por Colorlib
O Formulário de Contato 2 feito pela Colorlib é um modelo de formulário de contato bonito e gratuito projetado usando o Bootstrap.
O título do formulário é 'Fale Conosco'. Embora este título seja apropriado o suficiente, você pode alterar este texto para algum outro texto. Por exemplo, você pode substituir este texto por ' Mantenha contato ' ou outro texto adequado.
Este formulário tem apenas três campos de texto: nome, endereço de e-mail e mensagem. Você também pode adicionar mais campos do código. Por exemplo, você pode adicionar um campo de assunto para inserir o assunto da mensagem.
O usuário deve inserir valores de texto VÁLIDOS. Se eles inserirem textos inválidos, mensagens de erro serão exibidas quando o usuário passar o mouse sobre os campos de texto.
Mais informações/Baixar
Formulário de contato 3 da Colorlib
Este formulário de contato da Colorlib tem DUAS opções. Para cada opção, aparece um formulário de contato diferente. Uma opção é apenas dizer 'oi', enquanto o outro formulário de contato é para obter uma cotação.
Este modelo fornece dois formulários para dois propósitos, será muito conveniente para o usuário e útil para você.
Ao clicar no campo de orçamento, aparecem alguns orçamentos de amostra a partir dos quais o usuário pode selecionar um orçamento. Ao clicar no campo 'Serviços necessários', uma lista suspensa aparece com uma lista de serviços.
Mais informações/Baixar
Formulário de contato 4 por Colorlib
O Contact Form 4 da Colorlib é um modelo de formulário de contato incrível e gratuito que pode ser adicionado a qualquer site.
Se você precisar de um formulário de contato para entrar em contato com seus clientes em potencial, este modelo de formulário será uma boa opção para você. Usando este formulário, seus clientes em potencial podem perguntar sobre seus serviços.
O usuário precisa escolher um serviço sobre o qual deseja conhecer. Eles podem selecionar um serviço na lista suspensa com a legenda 'Serviços necessários' neste modelo de formulário.
No campo de orçamento, o usuário pode selecionar seu orçamento. Quando você puder saber sobre o orçamento do seu cliente em potencial e quando puder saber em qual serviço ele está interessado, ficará MAIS FÁCIL para você se comunicar com seus clientes em potencial.
Mais informações/Baixar
Formulário de contato 5 da Colorlib
O Contact Form 5 construído pela Colorlib, é um excelente e gratuito formulário de contato Bootstrap.
Há textos de espaço reservado nos campos de texto, que descrevem os campos. O título do formulário está em negrito com o texto 'Fale Conosco'. O botão de envio é muito amplo ; é tão largo quanto o campo de mensagem.
Uma lista suspensa aparece quando você clica no campo 'Serviços necessários'. É uma lista de serviços. Seus clientes em potencial podem ESCOLHER esses serviços. Se você fornecer serviços diferentes, poderá alterar esta lista do código.
Mais informações/Baixar
Formulário de contato 6 da Colorlib
Este é um dos melhores formulários de contato do Bootstrap desenvolvidos pela Colorlib. Este modelo mostra um mapa e um ícone de uma mensagem sobre ele.
Ao clicar no ícone de mensagem, o formulário de contato é exibido. No formulário de contato, existem três campos de texto. Nesses campos de entrada, o usuário pode inserir seu nome, endereço de e-mail e a mensagem que deseja enviar. Há um lindo botão de envio abaixo do campo de mensagem.
O botão de envio tem um EFEITO empolgante ao passar o mouse.
Se você clicar no botão enviar sem inserir nenhum valor nos campos de texto, as mensagens de erro aparecerão em vermelho.
O usuário deve inserir o endereço de e-mail no formato de e-mail correto. Se o seu usuário inserir um endereço de e-mail inválido, uma mensagem de erro será exibida.
Mais informações/Baixar
Formulário de contato 7 da Colorlib
O Contact Form 7 é um formulário de contato muito padrão desenvolvido pela Colorlib. Tem um design muito familiar. Portanto, se você usar este formulário de contato em seu site, seu site ficará mais profissional .
O título do formulário é 'Entre em contato'. Este formulário tem quatro campos de texto. O usuário pode inserir seu nome, endereço de e-mail, número de telefone e uma mensagem por meio deste formulário.
Nos campos de texto, há textos e ícones de espaço reservado apropriados. Esses ícones e os textos de espaço reservado tornaram o formulário mais FÁCIL DE USAR.
Há uma caixa de seleção abaixo do campo de mensagem com 'Enviar cópia para meu e-mail'. Portanto, se o usuário quiser obter uma cópia dos detalhes inseridos, poderá enviá-los para seu endereço de e-mail.
Mais informações/Baixar
Formulário de contato 8 da Colorlib
O Contact Form 8 é um excelente modelo de formulário de contato Bootstrap gratuito feito pela Colorlib com um mapa como plano de fundo.
Esta forma tem efeitos interessantes . Ao clicar nos campos de texto, você pode ver efeitos visuais interessantes. A qualidade geral deste formulário é muito alta.
Existem textos de espaço reservado apropriados para que os usuários possam entender o que inserir em um determinado campo. Por exemplo, o texto do espaço reservado do campo de mensagem é 'Sua mensagem'.
Ao ver este texto, o usuário pode entender rapidamente que precisa inserir uma mensagem neste campo.
O botão com a legenda 'ENVIAR EMAIL' parece ótimo. Sua cor de fundo é verde claro e a cor do texto é branca. Quando você passa o mouse sobre o botão, a cor de fundo muda para verde escuro.
Mais informações/Baixar
Formulário de contato 9 da Colorlib
Este é outro modelo de formulário de contato incrível desenvolvido pela Colorlib. Este é um modelo acessível. Assim, você não precisa gastar dinheiro para usá-lo em seu site.
E também é personalizável ao mesmo tempo, o que significa que você pode fazer alterações neste modelo de acordo com seus requisitos e preferências.
Ao clicar nas caixas de texto, você pode ver um EFEITO VISUAL interessante. Não inserir nenhum valor neles mostrará mensagens de erro em vermelho. Uma mensagem de erro é exibida se você inserir um endereço de e-mail com um formato de e-mail incorreto no formulário de e-mail.
Como alternativa, há um número de telefone na parte inferior, mas você precisa alterá-lo para seu número de contato real.
Mais informações/Baixar
Formulário de contato 10 da Colorlib
Este lindo e gratuito formulário de contato Bootstrap feito pela Colorlib é um modelo de formulário de contato de alta qualidade. Caixas de texto redondas, botões redondos e uma ÓTIMA combinação de cores usadas neste modelo completaram o formulário bonito.
Há um pequeno ícone colocado no botão 'enviar'. Por causa deste ícone, o botão parece muito interessante. Há também um efeito de foco.
Quando você clica nas caixas de texto, elas crescem um pouco em largura. O usuário pode ampliar o campo de mensagem arrastando o canto inferior direito.
Portanto, se a mensagem do usuário não couber nessa caixa de texto, ele poderá aumentá-la.
A validação do formulário foi implementada. Portanto, se o usuário deixar os campos obrigatórios vazios ou inserir valores inválidos e clicar no botão 'enviar', serão exibidas mensagens de erro.
Mais informações/Baixar
Formulário de contato 11 da Colorlib
Este é um modelo de formulário de contato Bootstrap simples e poderoso. O fundo deste formulário é incrível. Ele irá melhorar a beleza do seu site. Existem dois campos de texto obrigatórios neste formulário e os outros dois campos de texto são opcionais.
Os campos obrigatórios estão marcados com uma estrela. O site e os campos de mensagem são opcionais. Portanto, se o usuário não inserir a URL do site ou não fornecer um texto de mensagem neste formulário, nenhuma mensagem de erro será exibida.
Mas o usuário deve inserir seu nome e endereço de e-mail nos campos apropriados.
Este lindo formulário de contato será uma FORMA RÁPIDA para seus clientes entrarem em contato com você.
Mais informações/Baixar
Formulário de contato 12 da Colorlib
O Formulário de Contato 12 é um dos modelos de formulário de contato mais fantásticos desenvolvidos pela Colorlib. Este formulário parece MUITO LEGAL e tem ótimos efeitos visuais. Há um ícone de mensagem no lado esquerdo do formulário.
Ele se moverá um pouco quando você passar o mouse sobre este ícone de mensagem.
Você pode ver outro grande efeito visual ao clicar nas caixas de texto.
Atrás do formulário, há uma foto de prédios. Isso aumentou a beleza deste formulário de contato. A combinação de cores usada neste modelo é ótima.
Este formulário tem três campos de texto: campo de nome, campo de email e campo de mensagem. Os cantos das caixas de texto e do botão são redondos.
Mais informações/Baixar
Formulário de contato 13 da Colorlib
O Formulário de Contato 13 feito pela Colorlib parece único. No lado esquerdo, há um mapa, e você pode ver o formulário do lado direito. Um número de telefone é visível na seção do mapa .
O formulário de contato tem todos os campos de entrada necessários, mas se você achar que precisa de mais campos de entrada, poderá adicionar mais campos a qualquer momento a partir do código deste modelo.
Como os outros formulários de contato desenvolvidos pela Colorlib, este formulário também é GRATUITO e TOTALMENTE personalizável, o que significa que você não precisa gastar dinheiro integrando-o ao seu site, podendo fazer as alterações necessárias.
Embora esse formulário pareça muito padrão, talvez seja necessário alterar um pouco o design para que o formulário pareça semelhante ao design do seu site.
Mais informações/Baixar
Formulário de contato 14 da Colorlib
Este formulário de contato é um dos melhores formulários de contato da Colorlib. Há um excelente histórico por trás deste formulário. Como os outros modelos mencionados nesta postagem do blog, este também é um modelo de formulário de contato gratuito e totalmente personalizável, excepcionalmente projetado com Bootstrap.
O campo nome, email e mensagem são campos obrigatórios neste formulário de contato, enquanto os demais são opcionais. O usuário deve inserir um valor nos campos obrigatórios.
O usuário não pode enviar uma mensagem através deste formulário de contato, deixando os campos obrigatórios vazios.
Embora este formulário pareça excelente, você sempre tem a opção de aprimorar o design. Você pode fazer as alterações NECESSÁRIAS para criar este formulário que corresponda ao design do seu site.
Mais informações/Baixar
Formulário de contato 15 da Colorlib
O Formulário de Contato 15 da Colorlib é um modelo de formulário de contato gratuito FANTÁSTICO projetado com Bootstrap, integrado a qualquer site. Você pode ver um mapa por trás do formulário.
Os campos de texto parecem modernos porque linhas simples foram usadas para os campos de texto em vez de caixas de texto retangulares. Há um texto de espaço reservado adequado para cada campo de texto, cuja cor do texto é cinza.
Ao clicar nos campos de texto, os textos do placeholder desaparecem e as linhas dos campos de texto ficam verdes, melhorando a experiência do usuário .
No topo do formulário, você pode ver uma bela foto de um homem trabalhando com um laptop. Se você acha que esta imagem é inadequada para o seu site, você pode SUBSTITUIR esta imagem por outra diferente.
Mais informações/Baixar
Formulário de contato 16 da Colorlib
O Formulário de Contato 16 também é um dos modelos de formulário de contato mais impressionantes desenvolvidos pela Colorlib. Não é apenas legal, também é simples , bonito e poderoso .
Se você está procurando um ótimo formulário de contato gratuito do Bootstrap para o seu site, considere usar este formulário. Este formulário é legal o suficiente e pode ser integrado FACILMENTE como qualquer outro formulário de contato mencionado nesta postagem do blog.
Se você conhece o básico do desenvolvimento web, pode adicionar este formulário ao seu site em apenas alguns minutos.
Atrás do formulário, há uma ótima imagem. Há outra imagem no topo do formulário, que melhorou a aparência deste modelo de formulário.
E você pode ver efeitos ESPECIAIS ao clicar nos campos de texto.
Mais informações/Baixar
Formulário de contato 17 da Colorlib
O Contact Form 17 é um modelo de formulário de contato Bootstrap bonito, gratuito e totalmente personalizável projetado pela Colorlib. Há uma bela imagem no lado esquerdo do formulário com informações de contato, como endereço, número de telefone e endereço de e-mail.
Então, se o usuário quiser, ele também pode entrar em contato com você através do número de telefone e e-mail. E eles também têm a opção de ir fisicamente e visitar o escritório da sua empresa através do endereço fornecido nesta seção.
Este formulário parece único porque os campos de texto são diferentes dos campos de texto tradicionais usados em outros formulários de contato e outros tipos de formulários da web.
Há uma LEGENDA acima do campo de texto para cada um dos campos de texto. Cada legenda é colocada dentro de um retângulo com linhas finas e cinzas.
Mais informações/Baixar
Formulário de contato V01
Contact Form V01 é um widget moderno e gratuito que você pode inserir facilmente em seu site. Permita que seus usuários entrem em contato com você convenientemente, sem pegar o telefone.
O formulário de contato V01 também balança um design legal da separação com o formulário de um lado e detalhes adicionais da empresa no outro.
Você também pode adicionar um link para a página inicial se eles quiserem continuar navegando em seu conteúdo e não sair AINDA.
Mais informações/Baixar
Formulário de contato V02
Independentemente do tipo de site que você administra, uma seção de contato é obrigatória. O formulário de contato V02 está aqui para resolver as coisas com um design limpo que também oferece detalhes extras.
Por ser um formulário de contato Bootstrap, o design fluido também garante grande adaptabilidade a telas menores.
A propósito, o widget TAMBÉM suporta autocompletar e validação.
Mais informações/Baixar
Formulário de contato V03
O Formulário de Contato V03 é uma ótima alternativa gratuita se você quiser criar uma página de contato completa em seu site.
Além de obter um formulário funcional, também há uma seção IMAGEM e detalhes EXTRA da empresa, como endereço, telefone e e-mail.
Quanto ao formulário, é bem básico com quatro campos e um botão com efeito hover.
Mais informações/Baixar
Formulário de contato V04
Existem várias maneiras de apimentar a área de contato – o efeito GRADIENTE é uma delas. Se isso é algo que você gosta, Contact Form V04 é nosso modelo gratuito baseado no Bootstrap Framework que faz o truque.
Como muitos de nossos outros formulários de contato nesta lista, este também vem com uma seção extra para adicionar endereço, telefone, e-mail e até mesmo vincular à página inicial.
Mais informações/Baixar
Formulário de contato V05
Se você é super ativo nas mídias sociais e obtém ótimos resultados, gostaria de ter links para aqueles espalhados por todo o seu site.
INCLUINDO a página/formulário de contato.
O Formulário de Contato V05 é um ótimo exemplo, mas com muitos recursos adicionais além dos links de mídia social.
Você pode até verificar a demonstração ao vivo em diferentes dispositivos antes de prosseguir.
Mais informações/Baixar
Formulário de contato V06
Muitos gostam da ideia de exibir a localização de sua empresa em um MAP para que o usuário não precise procurá-la manualmente.
O Contact Form V06 possui um excelente layout dividido com um formulário e integração com o Google Maps para sua conveniência.
Você também não precisa classificar o preenchimento automático e a validação do formulário, pois o Contact Form V06 vem com ambos integrados por padrão.
Mais informações/Baixar
Formulário de contato V07
Tenho certeza de que muitos de vocês estavam procurando por essa alternativa exata - o formulário de contato gratuito do Bootstrap com um design DARK.
Você pode usar o Formulário de Contato V07 como está, mas também pode dar um passo adiante e alterá-lo.
Por exemplo , você pode estar interessado em mudar a cor do botão “enviar mensagem”, até mesmo as fontes.
Mais informações/Baixar
Formulário de contato V08
Você pode tornar o widget de contato do seu site mais pop adicionando um plano de fundo de imagem. Mas em vez de fazer acontecer FROM SCRATCH, agora você pode usar o Contact Form V08.
Este formulário de contato gratuito do Bootstrap é bastante simples, mas adiciona um toque agradável à imagem de fundo.
Lembre-se de que você sempre pode melhorar as coisas , fazendo com que o snippet siga seus regulamentos de branding.
Mais informações/Baixar
Formulário de contato V09
Eu direi apenas uma coisa, deixe este modelo de formulário de contato gratuito fazer toda a conversa em vez de mim. Fundo escuro, detalhes dourados, texto cinza e branco – UAU.
Uma ferramenta que permitirá que todos aproveitem o preenchimento das informações que faltam quando precisarem entrar em contato com você.
O widget também é perfeitamente harmonioso com dispositivos móveis e possui autocompletar e validação.
O que mais você precisa?
Mais informações/Baixar
Formulário de contato V10
Fundo de imagem em tela cheia, design transparente e formulário de contato em cores sólidas – isso é o que acontece quando se trata do Contact Form V10.
Enquanto os detalhes adicionais e o formulário estão lado a lado na área de trabalho, eles se movem um sobre o outro no celular.
Se o visitante do seu site precisar apenas do seu número de telefone ou endereço, este modelo PERMITE que você os inclua.
Mais informações/Baixar
Formulário de contato V11
O Contact Form V11 é um dos modelos de formulário de contato mais minimalistas já lançados. O que é legal nisso é que ele funciona com diferentes temas e estilos de sites prontos para uso.
Além de alterar a cor do botão “enviar mensagem”, você pode usá-lo exatamente como sai da caixa.
Mas você também pode mantê-lo inteiramente COMO ESTÁ.
Mais informações/Baixar
Formulário de contato V12
Você precisa de modelos de formulário de contato Bootstrap mais minimalistas? Aqui vamos nós.
O Formulário de Contato V12 é outra ferramenta excelente que exige uma realização completa do resultado em pouco ou nenhum tempo .
O Contact Form V12 é fácil de usar, graças ao código organizado e bem estruturado. Você pode realizar melhorias rapidamente, mesmo como iniciante no espaço de desenvolvimento web.
Mais informações/Baixar
Formulário de contato V13
Com o fundo gradiente, o Contact Form V13 se destaca das massas. Com todos os diferentes widgets e snippets gratuitos que lançamos, sempre trazemos o maior número possível de variações.
O MESMO se aplica aos formulários de contato.
O Formulário de contato V13 é ótimo para empresas e agências, pois também inclui detalhes de contato extras e até mesmo uma seção para compartilhar algumas palavras atraentes.
Mais informações/Baixar
Formulário de contato V14
Temos o Contact Form V14, perfeito para empresas e agências por padrão. Funciona idealmente para uma agência de marketing , mas você também pode usá-lo para outra coisa.
Por exemplo, se você administra um site de notícias e oferece anúncios, é aí que esse formulário de contato gratuito também entra em ação.
Você pode usar a seção à esquerda para CONVENCER ainda mais o cliente em potencial a trabalhar com você.
Mais informações/Baixar
Formulário de contato V15
O Contact Form V15 é moderno e minimalista ao mesmo tempo. Devido ao seu estilo limpo e ousado, você pode manter sua seção de contato muito ousada, mas direta.
Por que usar muitas distrações?
Mas isso é algo que depende de empresa para empresa.
Para acompanhar o fluxo de simplicidade do seu site, use o Contact Form V15 e evite construir a página de contato do zero.
Mais informações/Baixar
Formulário de contato V16
Contact Form V16 é um formulário de contato ENGAJANTE para agências, empresas e freelancers. Mas, mesmo que você tenha um blog, você pode incluir este atraente modelo Bootstrap gratuito.
Existem três campos para nome, email, assunto e uma área de texto para a mensagem.
O Contact Form V16 também suporta validação de formulários e preenchimento automático, tornando-o ainda mais prático.
Mais informações/Baixar
Formulário de contato V17
Embora você provavelmente já tenha DETALHES DA EMPRESA e informações de contato na área do rodapé, você também pode adicioná-lo ao lado do formulário de contato.
Para alcançar um ótimo resultado com rapidez , é quando você opta pelo Formulário de Contato V17.
Nome, e-mail, telefone, empresa e área de texto são os cinco campos predefinidos que você pode usar como está ou melhorar ainda mais. Além disso, se você quiser embelezá-lo com uma colorway diferente, vá em frente.
Mais informações/Baixar
Formulário de contato V18
O Formulário de contato V18 é outra versão de um modelo de formulário de contato gratuito do Bootstrap com o Google Maps. Com o design DOIS EM UM, este widget permite que você classifique rapidamente uma seção de contato em seu site.
É uma ótima alternativa, pois você pode usá-lo em uma página separada ou até mesmo incluí-lo em seu site de uma página.
Mais informações/Baixar
Formulário de contato V19
Se você deseja que os visitantes do seu site e clientes/clientes em potencial forneçam um pouco de informação extra, um formulário de contato com um menu suspenso pode ser muito útil.
O Contact Form V19 é a ferramenta gratuita que agora você pode empregar, independentemente dos regulamentos de sua marca. Graças à aparência extremamente minimalista, funciona muito bem fora da caixa.
Outro recurso interessante é o efeito de clique no botão – vá em frente, veja por si mesmo.
Mais informações/Baixar
Formulário de contato V20
Você só precisa de quatro campos para mantê-lo direto ao ponto com um formulário de contato. O Contact Form V20 apresenta campos para nome, email e assunto, além da área de texto.
O layout também é perfeitamente harmonioso com smartphones, tablets e desktops, garantindo uma experiência de usuário fantástica.
Mais informações/Baixar