Como criar um formulário personalizado no site ou blog WordPress

Se você acabou de configurar seu primeiro blog, já deve saber que ele vem com um formulário de contato padrão – a maioria dos temas premium vem com um. O ponto é que os formulários de contato são essenciais quando se trata de seu público que procura entrar em contato com você por um motivo ou outro.

Além disso, com os formulários de contato, o engajamento do usuário deve aumentar, e é por isso que é essencial que você use um em seu blog. Mas, novamente, você também pode usar plugins de formulário, como Formulário de contato 7, formulário de contato rápido e seguro, entre outros, para que seus usuários entrem em contato com você.

Além disso, esses formulários de contato devem permitir que você se conecte diretamente com seu público e também agilize seu marketing.

Vídeo tutorial

O problema, porém, é que a maioria dos formulários de contato padrão e até mesmo os plugins vêm com o mesmo formato estereotipado, e é por isso que você pode optar por algo mais especializado como configurar seu próprio formulário de contato no WordPress.

Se você é bastante habilidoso em php, deve ser capaz de fazê-lo com facilidade, e é por isso que é essencial que você leia o restante do artigo para poder configurar seu próprio formulário personalizado para seus usuários utilizarem, para se conectar com você.

1. Desenho do formulário:

Você pode criar um modelo de página separado ou escrever algum código HTML em sua página do WordPress para isso e, como o posterior é infinitamente mais simples, faz mais sentido optar pelo mesmo.

Você pode criar um formulário personalizado no WordPress seguindo as etapas listadas abaixo. E, como sempre, lembre-se de fazer backup de suas informações antes de começar.

• Vá para Páginas -> Adicionar nova opção fornecida no painel do WordPress.
• Dê o título da página desejada, como 'Informações do cliente' ou 'detalhes do cliente'.
• Agora navegue até a guia 'HTML' para escrever o código HTML.
• crie um formulário personalizado no WordPress que você deseja.
• Adicione um método “POST”, dê a ele um nome “customer_details”
• Adicione uma função “form_validation” na propriedade onsubmit para adicionar algumas validações JavaScript posteriormente e dar a ação.
• Action é o arquivo PHP que será executado quando o formulário for enviado.
• Neste ponto, você pode querer adicionar alguns campos no formulário como nome, email, sexo, idade etc e fechar o formulário.

O código final deve ficar assim

Seu nome: <br />
Seu e-mail: <br />
Sexo: Masculino Feminino<br />
Sua idade: <br />

2. Validação:

Agora que você projetou o formulário, é hora de validar o mesmo. Nunca confie nos dados do usuário 'como estão' e sempre, sempre valide-os antes de inserir os mesmos em seu banco de dados.

Basta seguir o código listado abaixo para uma validação rápida e isso deve funcionar. Anote esse código de validação e feche-o no final.

function form_validation() {
/* Verifica o nome do cliente para envio em branco*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert("Campo nome deve ser preenchido.");
retorna falso;
}/* Verifique o formato inválido no e-mail do cliente */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert("O endereço de e-mail fornecido não é válido.");
retorna falso;
}
}

Isso verificará e validará o nome e o endereço de e-mail do cliente. Adicione este código após . Então, o código completo no WordPress será parecido com-

Seu nome: <br />
Seu e-mail: <br />
Sexo: Masculino Feminino<br />
Sua idade: <br />


function form_validation() {
/* Verifica o nome do cliente para envio em branco*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == “” || customer_name == null) {
alert("Campo nome deve ser preenchido.");
retorna falso;
}
/* Verifique o formato inválido no e-mail do cliente */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position&lt;1 || dot_position=customer_email.length) {
alert("O endereço de e-mail fornecido não é válido.");
retorna falso;
}
}

Agora, tudo o que resta para você fazer é publicar a página e isso deve efetivamente funcionar.

3. Scripts do lado do servidor:

Lembra da parte em que mencionamos “customer details.php”? Bem, é hora de atendermos a essa parte também.
Abra o Bloco de Notas ou seu editor de texto favorito e anote o código explicado abaixo e salve o arquivo como customer-details.php em sua área de trabalho.

Primeiro, declare algumas variáveis ​​chamadas $customer_name, $customer_email, $customer_sex, $customer_age e atribua os valores aos respectivos campos enviados pelo formulário HTML.

Por exemplo, $customer_name = $_POST[“customer_name”] pegará o valor do formulário HTML pelo método POST e o atribuirá à variável $customer_name.

Agora, você precisa fazer o mesmo com outros valores também. Agora você precisa conectar o arquivo PHP ao banco de dados usando mysqli_connect. Se você não se lembra da configuração do banco de dados, pode encontrar essas configurações na instalação do WordPress.

Baixe o wp-config.php da sua instalação do WordPress para o seu desktop usando seu cliente FTP favorito como o FileZilla. Abra o wp-config.php usando seu editor de texto favorito como o Bloco de Notas e você encontrará as configurações de banco de dados necessárias.

Após a conexão com o banco de dados, insira os dados coletados do formulário no banco de dados do WordPress usando mysqli_query.

Há uma etapa opcional neste código PHP.

Se você quiser mostrar alguma mensagem ao usuário após o envio do formulário ou quiser redirecionar o usuário para outra página, você pode adicionar um cabeçalho (“Location:”) ao código. Você precisará criar uma página de sucesso para isso mais tarde.

Assim, o customer-details.php completo se parecerá com

// Adquirir dados
$customer_name = $_POST[“customer_name”];
$customer_email = $_POST[“customer_email”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// Conexão de banco de dados
$conn = mysqli_connect(“Host do Banco de Dados”,”Nome de Usuário do Banco de Dados”,”Senha do Banco de Dados”,”Nome do Banco de Dados”);
if(!$con) {
die('Problema na conexão com o banco de dados: ' . mysql_error());
}
// Inserção de dados no banco de dados
$query = “INSERT INTO 'Nome do banco de dados'.'Nome da tabela' ( 'nome_cliente', 'email_cliente', 'sexo_cliente', 'idade_cliente' ) VALUES ( $nome_cliente, $ email_cliente, sexo_cliente, idade_cliente )”;
mysqli_query($conn, $query);

// Redirecionamento para a página de sucesso
header("Local: ");

Carregue este arquivo customer-details.php para a pasta do tema usando seu cliente FTP favorito.

4. Sucesso:

Página de sucesso é aquela que um usuário pode visualizar após enviar o formulário com seus dados; você pode configurar esta página para exibir uma mensagem personalizada como "seus detalhes foram enviados com sucesso" ou algo semelhante.

O ponto é que você pode usar o código postado abaixo para configurar sua própria página de sucesso completa com mensagem personalizada.

Crie uma página do WordPress, dê um título como “Página de sucesso”, certifique-se de combinar o slug da página com 'página de sucesso' ou o que você deu no cabeçalho (“Localização”). Agora escreva uma mensagem, como “obrigado por sua cooperação” ou algo nesse sentido e você deve estar pronto.

Você sempre pode recarregar seu site para verificar e ver se o formulário de contato está funcionando como deveria e, em quase todos os casos, deve funcionar bem. No entanto, se você tiver alguns problemas, sempre poderá verificar on-line ou obter um especialista para configurar seu formulário personalizado.

É importante que seu formulário de contato não pareça muito agressivo ou intrusivo, para que possa ajudar a aumentar essas taxas de conversão.

Além disso, você também pode usar esses formulários personalizados para coletar dados e informações sobre seus clientes, que podem ser usados ​​para otimizar suas campanhas de marketing.

Esta é uma das principais razões pelas quais os formulários, especialmente os formulários de contato são essenciais para todos os blogs e, mais importante, você pode usar a codificação listada aqui não apenas para criar um formulário personalizado no WordPress, mas na realidade, criar qualquer tipo de formulário de contato com parâmetros diferentes.

Como sugerido anteriormente, é sempre uma boa ideia fazer um backup completo antes de mexer nos arquivos principais.

Depois de ter o formulário em funcionamento, você deve ser capaz de verificar se o formulário em questão valida os dados como está programado para fazê-lo antes de inseri-lo em seu banco de dados.

No geral, os formulários de contato são essenciais para blogs e sites, pois ajudam os clientes a entrar em contato com você e podem levar a melhores taxas de conversão a longo prazo. Portanto, certifique-se de experimentar as etapas listadas acima e seu formulário de contato personalizado deve funcionar bem.