Como criar um formulário de contato embutido para o seu tema WordPress

Muitos Plugins do WordPress podem adicionar um formulário de contato ao seu blog, mas um plugin não é necessário.

Neste tutorial, vou mostrar-lhe como você pode criar um formulário de contato interno para o seu tema do WordPress.


Etapa 1: Criando o modelo de página

O primeiro passo é criar um modelo de página. Para fazer isso, copie o código da página.php para um novo arquivo chamado page-contact.php .

Nós temos que adicionar um comentário no início do arquivo contato.php para garantir que o WordPress irá tratar o arquivo como um modelo de página. Aqui está o código:

Seu arquivo contato.php deve ser assim:

Passo 2: Construindo o formulário

Agora, temos que criar um formulário de contato simples.

Basta cole o seguinte código dentro da div de conteúdo de entrada .

 

Nada difícil com este código html muito auto-explicativo para o nosso formulário.

Observe o tipo de entrada = “escondido” que adicionei na linha 19: Será usado mais tarde para verificar se o formulário foi enviado.

Etapa 3: processamento de dados e tratamento de erros

Nossa forma parece muito boa, mas é muito inútil porque não envia nenhum e-mail.
O que devemos fazer é verificar se o formulário foi enviado e verifique se os campos foram preenchidos corretamente.

Se os campos estiverem preenchidos corretamente, nós receberemos o email do administrador do blog e enviaremos o e-mail. Caso contrário, nenhum e-mail será enviado e erros serão exibidos para o usuário.

Cole o seguinte código entre a declaração do modelo da página e a função get_header ():

O que fiz aqui foi simplesmente para garantir que o formulário tenha sido enviado e preenchido corretamente.

Se um erro, como um campo vazio ou um endereço de e-mail incorreto, uma mensagem é retornada e o formulário não é enviado.

Agora, temos que exibir mensagens de erro abaixo do campo relacionado, por exemplo “Digite seu nome”.

Abaixo você encontrará o modelo de página de formulário completo que você pode usar “como ele”.

 

Etapa 4: Adicionando a verificação jQuery

Nosso formulário agora está funcionando perfeitamente.

Mas podemos aprimorá-lo adicionando uma verificação do lado do cliente.
Para fazer isso, vou usar jQuery e validar o plugin jQuery .
Este plugin é ótimo porque permite que você verifique se um formulário foi preenchido corretamente, rápida e facilmente.

A primeira coisa a fazer é baixar o plugin de validação e enviá-lo para o seu arquivo de tema (em um diretório / js ).

Uma vez feito, cole o seguinte em um novo arquivo:

Salve-o como verif.js no diretório / js.

Agora, temos que vincular os arquivos do javascript ao nosso tema.

Abra o arquivo header.php e cole o seguinte nas tags < head> e </ head>:

Uma vez feito, seu formulário será validado no lado do cliente pelo plugin jQuery validate.

Como funciona? Ele simplesmente escolhe o elemento de formulário que tem a classe css necessária e verifica se eles estão preenchidos corretamente.

Caso contrário, uma mensagem será exibida.
O plugin é poderoso e você pode fazer muitas coisas com isso, no entanto, esse não é o objetivo deste artigo.

Veja a pagina Funcionando demo.

Espero que você goste do seu novo formulário WordPress!

Fonte do conteúdo catswhocode.com