Formulário de Contato 7 é um plugin WordPress incrivelmente popular para a criação de formulários de contato. Permite criar formulários sem codificação HTML. estes formas pode oferecer recursos como o CAPTCHA, baixar arquivos, campos de pesquisa etc ...

Embora o estilo padrão do Formulário de contato 7 seja suficiente para a maioria dos formulários de contato básicos, você geralmente precisa alterá-lo.

Isso altera a estrutura do formulário padrão para torná-lo mais acessível. Ele também adiciona o shortcode [responsivo] acima do formulário para que caso ocorra algum erro no envio do formulário seja indicado no formulário.

Se você nunca criou um site WordPress, descubra Como instalar um blog do WordPress com um cliente de FTP

Para o formulário padrão, o código gerado pelo plug-in é:

[resposta] Seu nome (obrigatório) [text * your-name id: your-name] Your Email (obrigatório) [email * your-email id: your-email] Seu assunto [text your-subject id: your-subject] Sua mensagem [textarea your-message id: your-message] [submit "Send"]

Alguns plugins para personalizar o formulário de contato Formulário de 7

1. Formulário de contato 7 Style

Le plug-in Formulário de contato 7 Style tem vários estilos para escolher.

Para os usuários do tema Twenty Fifteen, também há um estilo compatível.

Para aplicar um estilo, vá para " Estilos de contato> Edição rápida Marque o formulário no qual deseja aplicar o estilo e clique em " Mettre à jour ".

Exemplo de um formulário de contato wordpress
2. Formulário de Contato 7 Skins

Para usar Skins Formulário de Contato 7, crie um novo formulário de contato e role a página até a seção Skins. Você pode escolher um modelo e um estilo para o seu formulário.

Você encontrará modelos dedicados às formas deévénements, registro e aviso.

É assim que o formulário de pesquisa se parece com o estilo Topázio, usando o tema Vinte e Quinze.

Exemplo de formulário de contato 7

3. Design de material para formulário de contato

Estes estilos são baseados no estilo projeto de material.

Este plugin sugere que você exclua o formulário padrão e use seus códigos de acesso.

Aqui está um exemplo com o tema Héstia. Observe o rótulo flutuante quando o ponteiro é movido para um campo no formulário.

Formulário de contato de exemplo de material design 7
Formulário de contato 7 teste em alguns Temas do WordPress

Formulário de contato com o tema WordPress ColorMag

Na maioria das vezes, o Formulário de contato 7 herdará o estilo do seu tema WordPress. Este é o caso do tema escuro Coral.

Formulário de contato coral escuro

Formulário de contato com o tema WordPress ColorMag

Aqui está o formulário sem estilo personalizado. Ele herda a cor do botão azul Tema WordPress ColorMag.

Comecei enviando uma foto para usar como imagem de fundo do formulário e alterando o código dos rótulos do formulário de cinza para branco com uma sombra azul no texto.

As alterações a seguir foram para aumentar as margens entre os rótulos e os campos do formulário, alterar o botão de subtração e adicionar uma borda quando o ponteiro entrar nos campos do formulário.

A exibição de mensagens de erro / sucesso quando o formulário é enviado também deve ser alterada para que sejam exibidas corretamente.

O GIF girando quando o formulário é enviado não apareceu corretamente, encontrei uma alternativa para Loading.io e fiz referência a ele com CSS.

Aqui está o formulário resultante:

Aqui está o código:

div.wpcf7 {margin: 0; preenchimento: 1.5em; background: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } rótulo .wpcf7, .wpcf7-submit {color: white; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-formulário-controle {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {segundo plano: #186d8e; } .wpcf7-form-control: foco {borda: 2px sólido #289dcc; } div.wpcf7-response-output {background: #F8F8F8; texto-alinhar: centro; largura: 92.5%; margin: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } span.wpcf7-not-valid-tip {segundo plano: #F8F8F8; display: bloco inline; largura: auto; preenchimento: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.wpcf7 .ajax-loader {imagem de fundo: url ('your_loading_image_url_here'); largura: 50px; height: 50px; }

Se você não precisa rabiscar no código, sugerimos que dê uma olhada em nosso Plugins do WordPress 10 para criar um formulário de contato em seu blog

Descubra também alternativas premium 3 que ajudarão você a criar seus formulários de contato. 

1. Formulário de contato W8

W8 Contact Form é um dos plugins de formulário de contato o mais popular no WordPress. Ele oferece muitos recursos, como envio para vários destinatários, suporte para animações, criação ilimitada de formulários, estilos diferentes e uma ampla variedade de opções adicionais de personalização.

Além disso, oferece ao seu site ou blog um sistema profissional para facilitar o contato com seus clientes. Você poderá personalizar todos os seus formulários de acordo com suas necessidades e gostos.

Descarregar | Demo | hospedagem na web

2. Entre em contato conosco

O Formulário de Contato é um plugin responsivo para WordPress e uma ferramenta simples, mas rica em opções de personalização que permite a você exibir um formulário claro e encorajador, no qual seus visitantes podem entrar em contato com você deixando sua mensagem.

Você poderá definir os campos necessários, escolher o melhor layout dos campos e personalizá-lo completamente para incentivar seus clientes ou visitantes a deixarem suas sugestões ou mensagens.

Basta configurar o endereço de e-mail em que deseja receber as mensagens e usá-lo para expandir seus negócios na direção mais lucrativa.

Descarregar | Demo | hospedagem na web

3. Slick Popup Pro

Slick Popup Pro é um Extensão WordPress bastante simples e leve que converte qualquer formulário criado pelo plugin Formulário de Contato 7 em um pop-up. Ela usa o formulário e o converte em um popup bonito e perfeitamente responsivo.

O formulário pop-up pode ter vários usos, incluindo: um formulário de coleta de informações, um formulário de contato, um formulário de inscrição, um formulário de orçamento, um formulário de sugestão / reclamação e outros.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Confira outros recursos recomendados que o ajudarão a criar e gerenciar melhor os formulários de contato em seu site ou blog. 

Conclusão

Voila! Isso é tudo para este tutorial, espero que você tenha mais idéias para personalizar seu formulário de contato. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas

No entanto, você também poderá consultar nossos Ressources, 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.

Mas, enquanto isso, conte-nos sobre seu Comentários e sugestões na seção dedicada.

...  

Pin It on Pinterest