Formulário de contato 7 Configurações de widget

O Formulário de contato 7 Element by Master Addons é um widget especializado usado para integrar e estilizar formulários criados usando o popular plugin Contact Form 7 dentro do seu Projetos elementor. Isso permite aproveitar a funcionalidade robusta do CF7 e, ao mesmo tempo, obter uma personalização visual poderosa por meio do Elementor.

Usando o Elemento do Formulário de Contato 7, você pode:

• Selecione qualquer formulário de contato 7 existente é suspenso.
• Escolha entre vários Design Variações (Estilo Um através Estilo Onze).
• Controlar a visibilidade de Mensagens Erro e Erros de validação.
• Personalize totalmente o Contêiner Formulário, Campos de entrada e área de texto, Etiquetas, e o Botão Enviar para Normal e Pairar estados.
• Estilo a exibição de Mensagens de Erro e Validação.

Então, vamos ver como adicionar e personalizar esse elemento.

Qual é o widget do formulário de contato 7 no elementor? #

O widget Elementor do Formulário de Contato 7 é um elemento Master Addons que exibe qualquer formulário existente do Formulário de Contato 7 dentro do Elementor e oferece controle visual total sobre seu design Ele mantém o CF7 lidando com a lógica do formulário e a entrega de e-mail, enquanto você estiliza o contêiner, os campos de entrada, os rótulos, o botão enviar e as mensagens de erro da guia Estilo do Elementor Master Addons envia onze predefinições de design (Estilo Um a Quatro no plugin gratuito, Estilo Cinco a Onze no Pro), para que você possa reestilizar um formulário CF7 simples para combinar com seu site sem escrever nenhum CSS. Faz parte do gratuito Widgets e extensões Master Addons biblioteca. para uma visão geral e uma comparação com o CSS e o widget Elementor Pro Form, consulte o Formulário de contato 7 Elementor widget página.

Adicionando e configurando o elemento do formulário de contato 7 #

Para adicionar um formulário de Formulário de Contato 7 no Elementor: edite sua página com o Elementor, arraste o Formulário de contato 7 widget na tela, selecione seu formulário no menu suspenso, escolha uma variação de design (Estilo Um a Quatro são gratuitos) e, em seguida, ajuste o contêiner, os campos, as etiquetas e o botão enviar no Estilo aba. Os passos abaixo percorrem cada parte em detalhes.

Siga estes passos para adicionar e configurar o Elemento do Formulário de Contato 7 em qualquer página do seu site.

Passo 1: Criar ou Editar uma Página #

1. Do seu painel WordPress, vá para Páginas → Adicionar Novo para criar uma nova página, Você também pode selecionar uma página existente e clicar em Editar.
2. A seguir, clique no “Editar com o ElementorBotão”.

Passo 2: Encontre o Elemento do Formulário de Contato 7 #

1. No painel Elementor esquerdo, use a barra de pesquisa para encontrar “Formulário de contato 7.”
2. Arraste e solte o complemento na seção desejada da página.

Passo 3: Personalize as Configurações do Formulário de Contato 7 #

Depois de colocar o addon, você encontrará as seções de personalização no painel esquerdo, principalmente sob o Conteúdo e Estilo abas.

Guia Conteúdo #

É aqui que você seleciona o formulário e define a visibilidade do erro.

Formulário de contato 7: #

• Selecione Formulário de Contato: Escolha o formulário específico do Formulário de Contato 7 que deseja exibir na lista suspensa.
• Estilo de erros (mensagens de erro/erros de validação): Escolha se deseja Mostrar ou Esconder os avisos em campos individuais (mensagens de erro) e a mensagem de validação em nível de formulário (erros de validação).

Layout de design: #

• Variações de design: Selecione um estilo pré-projetado para o formulário (Estilo Um através Estilo Onze).

Guia Estilo #

É aqui que você controla a aparência visual da forma e seus elementos.

Recipiente de formulário: #

• Tipo de fundo: Defina o estilo de fundo para todo o contêiner de formulários: Clássico ou Gradiente.
• Cor superior da borda: Defina uma cor para a borda superior do contêiner.
• Largura do formulário (%) /Formulário Preenchimento: Controle o tamanho e o espaçamento interno do recipiente do formulário.

Título: #

• Cor /Alinhamento /Tipografia: Estilize o título do formulário (se estiver presente na estrutura CF7).

Área de entrada e texto: #

• Cor de fundo/cor do texto: Defina a cor de fundo e de texto para todos os campos de entrada e área de texto.
• Preenchimento: Ajuste o espaçamento interno dos campos.
• Largura do campo (%): Defina o tamanho horizontal dos campos.
• Tipo de borda/raio de borda: Defina o estilo da borda e os cantos arredondados para os campos de entrada.

Etiquetas: #

• Cor /Tipografia: Estile as configurações de cor e fonte do texto para os rótulos dos campos.

Botão Enviar: #

• Tipografia de botão: Controle as configurações de fonte para o texto do botão.
• Normal/Passe o mouse: Defina o seguinte para o botão em ambos os estados:
  • Tipo de fundo
  • Cor do texto
  • Cor Bordada
• Raio de borda/acabamento: Defina os cantos arredondados e o espaçamento interno do botão.

Erros: #

• Mensagens de erro (sob campos): Estile os avisos que aparecem abaixo de campos individuais, como uma mensagem de campo obrigatória.
  • Cor do texto /cor de fundo /tipo de borda.
• Erros de validação (formato completo): Estilize a mensagem no nível do formulário mostrada quando um envio falha na validação.
  • Cor de fundo /cor do texto /tipo de borda.

Passo 4: Salve e Publique sua página #

Depois de personalizar tudo ao seu gosto:

1. Clique no “Publicarbotão ” (se for uma página nova) ou “Atualizar” (se editar uma página existente).
2. Teste o envio do formulário e as mensagens de erro no frontend para garantir que todos os estilos sejam aplicados corretamente.

Perguntas frequentes #