WordPress - Criando um formulário de contato sem plugin - Parte 1

Sempre que se pensa em formulários com WordPress, a primeira coisa que vem à mente é: vou usar um plugin! E realmente, existem plugins muito bons para fazer isso. Mas, em alguns momentos, você precisa de um controle maior no seu código.

Mas é possível criar formulários “na mão”, de forma fácil?
Claro que sim! O que não é fácil de fazer com WordPress? ;)
Vem comigo que eu te mostro como faz!

Nessa primeira parte, vamos montar nossa view, o template onde ficará o formulário de contato.

Temos várias formas de fazer isso no WordPress, mas, inicialmente, vamos fazer da forma tradicional: no Painel, crie um nova página chamada Contato, que tenha como slug contato. Então, crie na raiz do tema um arquivo chamado page-contato.php.

Lembrando que você pode acompanhar as alterações do arquivos dessa série “Criando temas com WordPress”, através deste repositório, no Github.

Agora, o código da page-contato.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
require_once __DIR__ . '/functions/security.php';
get_header();
the_post();
$post_response = apply_filters( 'send_contact_form', false );
?>
  
<?php if( $post_response ) : ?>
  <div class="alert alert-<?php echo $post_response->status ?>">
    <?php echo $post_response->message ?>
  </div>
<?php endif ?>
  
<form action="<?php echo get_permalink() ?>" method="post">
  <div>
    <label for="field-name">Nome</label>
    <input type="text" name="field_name" id="field-name" placeholder="Nome" required />
  </div>
  <div>
    <label for="field-email">E-mail</label>
    <input type="email" name="field_email" id="field-email" placeholder="E-mail" required />
  </div>
  <div class="fake-field">
    <label for="field-mail">NÃO preencha esse campo, ou seu e-mail não será enviado</label>
    <input type="email" name="field_mail" id="field-mail" placeholder="NÃO preencha esse campo, ou seu e-mail não será enviado" />
  </div>
  <div>
    <label for="field-subject">Assunto</label>
    <input type="text" name="field_subject" id="field-subject" placeholder="Assunto" class="[ input-text ] contact-form__list-item__input" />
  </div>
  <div>
    <label for="field-message">Mensagem</label>
    <textarea name="field_message" id="field-message" cols="30" rows="10" placeholder="Mensagem"></textarea>
  </div>
  <div>
    <button type="submit">Enviar</button>
  </div>
</form>
  
<?php get_footer() ?>

Deixei o mínimo de código possível para que um formulário de contato possa funcionar corretamente. Obviamente que, quando você for fazer, vai utilizar classes para estilizar os campos. Como esse não é o foco do post, vamos deixar tão simples quanto possível :)

Explicando o código

Até a linha 4, nada que não tenhamos visto até aqui: adicionamos o arquivo security.php, que vai impedir que nosso arquivo seja acesso diretamente, adicionamos o header padrão do nosso tema, e chamamos a função the_post(), que vai nos permitir usar as Template Tags, trazendo resultados específicos para essa página de contato.

Na linha 5, a variável $post_response vai nos retornar o resultado do envio do e-mail. Lembra como fizemos nos posts anteriores? Primeiro, definimos a interface da nossa view, depois, fazemos o código que resopnde à essa interface :)

O $post_response será um objeto que nos retornará o status do envio: success ou error. Com isso, podemos mostrar ao usuário uma mensagem personalizada, e estilizada com uma cor que defina o status. Posso mostrar a mensagem em verde, por exemplo, para sucesso, e vermelho para erro.

Por isso eu deixei, na linha 9, uma classe na div. O status será concatenado à classe alert. Então podemos estilizar essa mensagem, baseando-se nas classes alert-success e alert-error.

Na linha 10, será mostrada a mensagem de sucesso ou erro.

Mas antes disso, na linha 8, verificamos se $post_response tem a mensagem e o status. Se não houver (ou seja, se retornar false), a div com a mensagem nem é mostrada. Nós faremos com que $post_response seja true somente se o formulário for enviado :)

Na linha 14, colocamos como action do nosso formulário o link dessa página mesmo. Ou seja: ao submeter o formulário, o usuário será redirecionado para essa mesma página, com a diferença que ele verá a mensagem de erro ou sucesso após o submit.

Da linha 15 até a linha 37, adicionamos os campos do nosso formulário. Teremos 4 campos principais: nome, email, assunto e mensagem. Além desses, criamos um campo fake, para nos livrarmos de robôs que enviam SPAM através de formulários.

Nossa view está pronta! Nos próximos artigos, veremos como criar o código que vai tratar os nossos dados e submeter esse formulário!

Até lá :D

Link para o índice dessa série:
https://blog.da2k.com.br/2015/01/11/indice-da-serie-como-criar-temas-para-wordpress/

Post anterior:
https://blog.da2k.com.br/2015/02/11/wordpress-controlando-a-exibicao-dos-dados/

Próximo post:
https://blog.da2k.com.br/2015/02/24/wordpress-criando-um-formulario-de-contato-sem-plugin-parte-2/

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1