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 ".
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.
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 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 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.
- 6 WordPress plugins para verificação por CAPTCHA em seus formulários
- Como adicionar um formulário de contato com o WordPress formulário de contato 7
- Como criar formulários compatíveis com GDPR no WordPress
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.
...
Para criar um site profissional, você precisa ser preciso e conciso para convencer rapidamente o usuário. Oferecemos a você a oportunidade de criar um site profissional, seja ele o assunto da fabricação de um site de demonstração ou um portfólio. A fabricação de um site on-line ou site profissional está agora ao alcance de todos. É por isso que o seu site orson adiciona todos esses recursos por natureza.
Não há anúncios por favor!