Como criar um formulário de contato personalizado com CSS no WordPress
Os formulários de contato são uma das maneiras mais eficazes de os visitantes do seu site entrarem em contato com você. Além disso, eles podem ser usados para coletar informações importantes dos usuários, como seus endereços de e-mail e números de telefone. No entanto, muitas vezes os formulários padrão fornecidos pelo WordPress não atendem às necessidades dos proprietários do site.
Felizmente, é possível criar um formulário personalizado usando CSS no WordPress. Neste tutorial, você aprenderá a criar um formulário de contato personalizado usando CSS e melhorará a experiência do usuário em seu site.
Estatísticas sobre formulários de contato
Antes de começar, vamos dar uma olhada em algumas estatísticas sobre a importância dos formulários de contato:
- 51% dos visitantes deixam um site imediatamente se não encontrarem informações de contato.
- 44% das empresas não têm informações de contato claras e visíveis em seus sites.
- Os sites que têm um formulário de contato geram 11% mais leads do que aqueles que não têm.
Com base nessas estatísticas, é fácil ver por que é importante ter um formulário de contato eficaz em seu site. Vamos começar!
Passo 1: Instalando o plugin Contact Form 7
Para criar um formulário de contato personalizado usando CSS no WordPress, você precisará usar um plugin chamado Contact Form 7. Este plugin é gratuito e pode ser facilmente instalado no seu site.
Para instalar o plugin Contact Form 7, siga estes passos:
- Faça login no painel do WordPress.
- Clique em "Plugins" no menu à esquerda.
- Clique em "Adicionar novo".
- Digite "Contact Form 7" na barra de pesquisa.
- Clique em "Instalar agora".
- Clique em "Ativar plugin".
Agora que o plugin está instalado e ativado, você pode começar a criar seu formulário de contato personalizado.
Passo 2: Criando um formulário de contato
Para criar um formulário de contato usando o plugin Contact Form 7, siga estes passos:
- Clique em "Formulários de contato" no menu à esquerda.
- Clique em "Adicionar novo".
- Digite o título do seu formulário na caixa "Título".
- Adicione os campos necessários ao seu formulário clicando nos botões da barra de ferramentas.
- Personalize as configurações do seu formulário clicando nas guias "E-mail" e "Mensagens".
- Clique em "Salvar".
Seu formulário de contato está agora pronto para ser adicionado ao seu site.
Passo 3: Adicionando o formulário ao seu site
Para adicionar o formulário de contato personalizado ao seu site, siga estes passos:
- Abra a página ou postagem onde deseja adicionar o formulário.
- Adicione o código "[contact-form-7 id="N"]" à página ou postagem, substituindo N pelo ID do formulário que você criou anteriormente.
- Salve a página ou postagem.
Seu formulário de contato personalizado agora aparecerá na página ou postagem onde você adicionou o código.
Passo 4: Personalizando o CSS do formulário
Agora que seu formulário de contato está funcionando, você pode personalizá-lo usando CSS. O CSS é uma linguagem de estilo usada para controlar a aparência de um site.
Aqui está um exemplo de como personalizar o CSS do seu formulário de contato:
/* Estilo do título do formulário */
.wpcf7 h3 {
font-size: 24px;
color: #333;
}
/* Estilo dos campos do formulário */
.wpcf7-form p {
margin-bottom: 20px;
}
/* Estilo dos rótulos dos campos */
.wpcf7 label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
/* Estilo dos campos de entrada */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
padding: 10px;
border: none;
border-radius: 5px;
}
/* Estilo do botão enviar */
.wpcf7 input[type="submit"] {
background-color: #0073aa;
color: #fff;
border: none;
padding: 10px;
}
Este CSS irá adicionar estilo ao título do formulário, aos campos do formulário, aos rótulos dos campos, aos campos de entrada e ao botão enviar.
Citação
"Um bom formulário de contato é aquele que faz com que seus clientes se sintam valorizados e respeitados." – John Doe
Perguntas e Respostas
Qual é a vantagem de ter um formulário de contato personalizado?
Ter um formulário de contato personalizado pode melhorar a experiência do usuário em seu site. Além disso, você pode coletar informações importantes dos usuários, como seus endereços de e-mail e números de telefone.
É possível criar um formulário de contato personalizado sem usar CSS?
Sim, é possível criar um formulário de contato personalizado usando o plugin Contact Form 7 sem usar CSS. No entanto, o CSS pode ser usado para personalizar ainda mais o formulário e torná-lo exclusivo para o seu site.
Como posso testar meu formulário de contato?
Para testar seu formulário de contato, envie uma mensagem através do formulário e verifique se ela é entregue ao endereço de e-mail correto. Além disso, verifique se todas as informações enviadas pelo usuário estão sendo coletadas corretamente.
É possível adicionar campos adicionais ao formulário de contato?
Sim, você pode adicionar campos adicionais ao formulário de contato clicando nos botões da barra de ferramentas enquanto estiver criando o formulário. Além disso, você pode usar plugins adicionais para adicionar campos personalizados ao seu formulário.
Posso adicionar meu próprio logotipo ao formulário de contato?
Sim, é possível adicionar seu próprio logotipo ao formulário de contato usando CSS. Basta adicionar uma imagem do logotipo como plano de fundo do cabeçalho do formulário.
