Ir para o conteúdo principal

Como personalizar o formulário de contato Formulário de 7

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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, se houver um erro ao enviar o formulário, ele seja indicado no formulário.

Se você nunca criou um site no 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] <label> seu nome </ label> [text * seu nome id: seu nome] <label for = "seu-email"> Seu e-mail (obrigatório) < / label> [email * id do seu email: o seu email] <label for = "seu assunto"> O seu assunto </ label> [texto o id do seu assunto: o seu assunto] <label for = "a sua mensagem "> Sua mensagem </ label> [textarea sua mensagem id: sua mensagem] [enviar" Enviar "]

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 para baixo 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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

Aqui está um exemplo com o tema Hestia. Observe o rótulo flutuante quando o ponteiro é movido em um campo de formulário.

Teste do formulário de contato 7 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 do rótulo de cinza para branco com uma sombra azul no texto.

As seguintes alterações foram feitas 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 / êxito quando o formulário é enviado também deve ser modificada para que sejam exibidas corretamente.

O GIF em execução quando o formulário é enviado não apareceu corretamente, encontrei uma alternativa ao Loading.io e o referenciei 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 precisar rabiscar o código, sugerimos que você verifique 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

O formulário de contato W8 é um dos plugins de formulário de contato mais populares no WordPress. Oferece funcionalidade completa, como envio para vários destinatários, suporte para animações, criação ilimitada de formulários, estilos diferentes e uma grande variedade de opções adicionais de personalização.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Além disso, ele fornece ao seu site ou blog um sistema profissional para entrar em contato com seus clientes mais facilmente. 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

Fale Conosco Formulário é um plug-in responsivo do WordPress e uma ferramenta de personalização simples, mas rica que exibe uma forma clara e encorajadora, onde os visitantes podem contatá-lo com 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

O Slick Popup Pro é uma extensão do 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 pop-up do formulário 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 cotação, um formulário de sugestão / reclamação e outros.

Descarregar | Demo | hospedagem na web

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Recursos Recomendados

Descubra outros recursos recomendados que ajudarão você 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 o seu Comentários e sugestões na seção dedicada.

...

Este artigo contém comentários 2
  1. 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.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
107 ações
ação4
chilrear1
Enregistrer102