Widget de elemento do formulário de contato 7: Estilo CF7 sem CSS
O widget Formulário de Contato 7 no plugin gratuito Master Addons coloca qualquer formulário que você tenha integrado Formulário de contato 7 em uma página do Elementor e permite estilizá-lo a partir do painel Escolha o formulário, escolha uma variação de design, em seguida, defina o contêiner, título, campos, rótulos, enviar botão e mensagens de erro O Formulário de Contato 7 ainda lida com os campos e envia o e-mail Quatro variações de design são gratuitas e mais sete vêm com o Master Addons Pro. Você precisa do plugin gratuito Contact Form 7 instalado e pelo menos um formulário criado.
Como adicionar o formulário de contato 7 ao elementor
Precisas do Elementor, o gratuito Formulário de contato 7 plugin e o plugin Master Addons gratuito.
- Instale o Formulário de Contato 7 e crie seu formulário em Contato, Adicionar Novo, com os campos e configurações de e-mail que você precisa.
- Instalar e ativar Complementos Master do WordPress.org.
- Edite sua página com Elementor e pesquise no painel de widgets Formulário de contato 7. Escolha aquele com o emblema Master Addons.
- Em Selecione Formulário de Contato, escolha seu formulário.
- Em estilo, escolha uma variação de design (os estilos um a quatro são gratuitos).
- Ajuste o contêiner, os campos, as etiquetas, o botão e os erros e, em seguida, envie uma mensagem de teste na página ao vivo.
Cada configuração é coberta pelo Configurações do widget do Formulário de Contato 7 guia.
Variações de design: 4 grátis, 7 Pro
Em Estilo, Layout de design, escolha um Design Variação. Estilo Um ao Estilo Quatro estão no plugin gratuito Estilo Cinco ao Estilo Onze precisa Master Addons Pro. Cada variação estiliza os campos e botão juntos, e você pode alterar qualquer parte depois nas seções abaixo.
- Cada widget na página pode usar sua própria variação, portanto, um formulário de rodapé e um formulário de página de contato podem parecer diferentes.
- Escolha o formulário na guia Conteúdo abaixo Selecione Formulário de Contato. A lista mostra os formulários que você criou no Formulário de Contato 7.
- Se o Formulário de Contato 7 não estiver ativo, o widget mostra um aviso em vez de um formulário.
Formulário de contato de estilo 7: Widget vs CSS vs Elementor Pro Form
Existem três maneiras comuns de obter um formulário bonito em um site Elementor. Veja como eles se comparam.
| Widget Master Addons CF7 | CSS personalizado em CF7 | Widget Elementor Pro Form | |
|---|---|---|---|
| Construtor de formulários | Formulário de contato 7 | Formulário de contato 7 | Construído no Elementor Pro |
| Estilo | Controles de painel e 11 variações (4 grátis) | Escreva e mantenha CSS | Controles de painel |
| Custo | Grátis (7 variações precisam de Pro) | Grátis | Precisa do Elementor Pro |
| Melhor para | Sites já usando CF7 | Desenvolvedores que desejam controle total | Sites no Elementor Pro que desejam formulários e ações em um só lugar |
Se você já tem formulários de Formulário de Contato 7, o widget é a maneira mais rápida de fazê-los corresponder ao seu design Se você usar um plugin de formulário diferente, consulte o Formas Ninja ou Formas Gravidade widgets, ou o Mailchimp widget para inscrições.
Contêiner de formulário e título
Contêiner Formulário define uma cor, gradiente ou fundo de imagem, a Cor superior da borda, Largura do formulário e Forma Estofamento. O Título a seção define a cor, o alinhamento e a tipografia de um título dentro da marcação do formulário, se o formulário tiver um.
- Defina a largura do formulário abaixo de 100% para centralizar uma forma estreita em uma coluna larga.
- A cor da borda superior funciona como um acento simples acima da forma.
- O preenchimento dá espaço ao formulário dentro de um cartão colorido.
Campos e Etiquetas
Entrada e área de texto define a cor de fundo, cor do texto, preenchimento, Largura Campo, fronteira e raio de borda para campos de texto, áreas de texto e menus selecionados. Etiquetas tem sua própria cor e tipografia, portanto os nomes dos campos podem se destacar do que os visitantes digitam.
- A largura do campo funciona em porcentagem, útil para layouts de duas colunas integrados na marcação do formulário CF7.
- Caixas de seleção, botões de opção e entradas de arquivo mantêm seu tema ou estilo CF7.
- Mantenha contraste suficiente entre o fundo do campo e o texto para acessibilidade.
Enviar Mensagens de Botão e Erro
Botão Enviar tem tipografia mais guias Normal e Hover: fundo, cor do texto e cor da borda para Normal, e fundo e cor do texto para Hover Largura da borda, cor da borda, raio e preenchimento são definidos abaixo das guias Erros seção estilos Mensagens Erro em campos e Erros de validação para todo o formulário e na guia Conteúdo você pode mostrar ou ocultar cada um deles.
- O botão padrão é roxo (#6e00e9) com texto branco, então defina as cores da sua marca.
- Ocultar erros de campo torna o formulário mais arrumado, mas os visitantes dependem da mensagem no nível do formulário.
- Não existe controlo de ícones para o botão Para adicionar um, veja como adicionar um ícone Font Awesome ao botão de envio do Formulário de Contato 7.
Perguntas frequentes para o formulário de contato 7
Como conecto isso aos meus formulários existentes do Formulário de Contato 7?
Na guia Conteúdo, abra Selecione Formulário de Contato. Ele lista todos os formulários que você criou no Formulário de Contato 7. escolha um e o widget o exibe com o design escolhido.
Meu formulário ainda enviará e-mails e funcionará conforme configurado no Formulário de Contato 7?
Sim. o widget só muda a aparência do formulário Campos, configurações de e-mail, mensagens e proteção contra spam ficam no Formulário de Contato 7 e funcionam conforme você os configura lá.
O widget do Formulário de Contato 7 é gratuito?
Sim, o widget faz parte do plugin gratuito Master Addons, e Style One to Style Four são gratuitos Style Five to Style Eleven precisa Master Addons Pro. O próprio Formulário de Contato 7 também é gratuito.
Preciso do plugin Contact Form 7?
Sim. Este widget estilos Formulário de Contato 7 formulários, então o plugin livre Formulário de Contato 7 deve ser instalado e ativo Sem ele, o widget mostra um “Contact Form 7 is Not Activated” aviso.
O que acontece se EU adicionar um novo campo no plugin Contact Form 7?
Edite o formulário no Formulário de Contato 7 e salve O widget mostra o formulário atualizado, e seus estilos de campo e rótulo se aplicam ao novo campo porque eles visam todos os campos de texto e rótulos Atualize o editor Elementor se a visualização não for atualizada.
Preciso saber CSS para estilizar meus formulários?
Não para cores, bordas, espaçamento e tipografia, que são todos controles de painel O layout dentro do formulário, como colocar dois campos lado a lado, vem da marcação do formulário do Formulário de Contato 7.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
