Creating a contact form starts with choosing the right approach, such as using a WordPress form plugin, an online form builder, or custom-coded HTML. Most modern tools allow you to define core fields like name, email, and message, customize the layout visually, set up email notifications, and embed the form on any page of your website.
Common Ways to Create a Contact Form #
- WordPress form plugins: Plugins like MetForm, for WordPress users, MetForm offers a no-code, drag-and-drop solution that works easily with Elementor. Alternatively, WPForms, and similar tools let you build contact forms visually without writing code.
- Online form builders: Platforms such as Jotform or Zoho Forms allow you to create forms externally and embed them on your site.
- Custom HTML/CSS forms: Developers can manually create forms using HTML form elements for full design and functionality control.
Step-by-Step Process of Creating a Contact Form Using MetForm #
Requerimento:
Elementor: Baixe o plug-in Elementor
MetForm: Baixe o plug-in MetForm
Elementos padrão do formulário de contato MetForm #
- Primeiro nome
- Sobrenome
- Endereço de email
- Assunto
- Telefone
- Local na rede Internet
- Como podemos ajudar (campo de texto)
- Sua localização
- Comentários/Perguntas
- reCHAATCHA
- Botão Enviar Mensagem
Como criar um formulário de contato usando MetForm #
Let’s check the process:
Etapa 1: crie um novo formulário #
- Faça login no seu painel do WordPress
- Passe o mouse sobre MetForm – > clique “formas”
- Clique em "Adicionar novo"
- Introduzir o Nome do formulario e selecione qualquer um deles entre 3 estilos de formulário de contato
- Clique em “Editar formulário”
- Você pode ver o modelo de formulário
- Clique em “Atualizar e Fechar”
Etapa 2: personalize o formulário selecionado #
Você pode ver as 3 opções de personalização no lado esquerdo.
Contente –
- Pode mostrar/ocultar o rótulo
- Selecione uma posição para esquerda ou superior
- Alterar o nome e o rótulo do campo de entrada
- Alterar o espaço reservado
- Defina o campo de entrada como obrigatório ou opcional
- Insira qualquer URL
Estilo –
- Aumentar ou diminuir a largura
- Pode usar uma cor de fonte e uma cor de fundo personalizadas
- Mude a tipografia
- Personalize o preenchimento e os valores de margem
- Defina a cor de aviso personalizada para o campo obrigatório
- Alinhe os campos à esquerda, centralizado, justificado ou à direita
Avançado –
- Pode adicionar uma borda
- Use atributos e transformações
- Verifique a capacidade de resposta em diferentes dispositivos
- Adicione CSS personalizado para estilo de formulário personalizado
Quer adicionar CSS personalizado?
Here is the easy 4 maneiras de adicionar CSS personalizado no Elementor
- Você pode adicionar e editar quaisquer elementos do Elementor no modelo de formulário de contato
- Além disso, você também pode integrar reCAPTCHA com o formulário de contato.
Quer usar reCAPTCHA?
Verifique este blog para como integrar o recaptcha no MetForm?
Como inserir o modelo de formulário de contato MetForm nas páginas? #
Você pode inserir o modelo de formulário de contato MetForm em qualquer página de duas maneiras. Você pode usar o Elementor ou simplesmente copiar e colar o shortcode do formulário na página.
Insira o formulário de contato MetForm via Elementor #
Crie uma nova página ou abra uma página existente e “Editar com Elementor”
- Procure o “MetForm" ferramenta
- Arraste e solte o widget na página
- Clique em “Editar formulário”
- Selecione os Nome do formulario
- Clique em Salvar e Fechar
- Toque em "Atualizar"
Observação: Você pode editar o modelo aqui e também criar um novo formulário.
Insira o formulário de contato MetForm usando shortcode #
Primeiro, vá para o “formas” of the MetForm, you will see the unique shortcodes assigned with every form. To insert the customized contact form template,
- cópia de o código de acesso do formulário
- Criar uma nova página
- Ou abra a página de contato existente e clique em "Editar"
- Colar o shortcode do formulário na página em que deseja inserir o formulário
- Clique em "Publicar"
