Formulário de contato 7

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. O Master Addons envia onze predefinições de design prontas (Estilo Um até Estilo Onze), 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.

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 das onze variações de design 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 as mensagens gerais de sucesso/falha de envio e os erros de validação específicos do campo.

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 (geral): Estilize as principais mensagens de erro de envio (geralmente mensagens de erro/sucesso globais).
  • Cor do texto /cor de fundo /tipo de borda.
• Erros de validação (específicos de campo): Estilize as mensagens de erro que aparecem abaixo dos campos individuais (por exemplo, “Este campo é obrigatório”).
  • 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 #