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 criar formulários de contato. Ele permite que você crie formulários sem codificação HTML. estes formas pode oferecer recursos como o CAPTCHA, baixando arquivos, campos de pesquisa etc ...

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

Isso altera a estrutura de 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, há também um estilo compatível.

Para aplicar um estilo, vá para " Estilos de Contato> Edição Rápida Verifique o formulário em que você 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 deeventos, registro e aviso.

É assim que o formulário de pesquisa se parece com o estilo Topaz usando o tema Twenty Fifteen.

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 de formulário de contato 7 em alguns temas WordPress

Formulário de contato com o WordPress ColorMag Theme

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 fazendo o upload de uma foto para usar como imagem de fundo para o 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 rótulos de formulários e campos de formulário, alterar o botão de subtração e adicionar uma borda quando o ponteiro entra nos campos de formulário.

A exibição de mensagens de erro / sucesso 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, eu encontrei uma alternativa para Loading.io e 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 precisa rabiscar o código, sugerimos que você verifique nosso 10 WordPress plugins para criar um formulário de contato em seu blog

Descubra também as 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 mais populares no WordPress. Ele oferece funcionalidade completa, como envio para vários destinatários, suporte a animações, criação ilimitada de formulários, estilos diferentes e uma ampla 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 oferece ao seu site ou blog um sistema profissional para entrar em contato com seus clientes com mais facilidade. Você será capaz de personalizar todos os seus formulários de acordo com suas necessidades e seus gostos.

Download | Demonstração | Web Hosting

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 totalmente para incentivar seus clientes ou visitantes a deixar suas sugestões ou mensagens.

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

Download | Demonstração | Web Hosting

3. Slick Popup Pro

Slick Popup Pro é uma extensão WordPress bastante simples e leve que converte qualquer forma criada 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.

Download | Demonstração | Web Hosting

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 ideias para personalizar seu formulário de contato. Não hesite em compartilhar 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 na Internet, consultando nosso guia sobre Criação de blogs 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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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