Blog


Formulário com WordPress sem refresh e sem plugin

30 de janeiro de 2018

Todas as vezes que vamos desenvolver um formulário de envio de email, inserção de dados,  alguma forma de interação com o usuário de um site/sistema, imaginamos a melhor e mais segura forma de fazermos. E se você está trabalhando com algum sistema mantido pela comunidade como o WordPress o trabalho em torno da segurança é maior ainda.

É comum ainda desenvolvedores procurarem além da melhor forma de criar estes formulários, procurem também aquela que seja mais interessante no sentido de interações com o usuário.

Alguns gostam de utilizar de javaScript para criar formulários com mais interatividade. Mas como fazer isso no WordPress com segurança e que seja atrativo para o usuário?

Uma boa maneira de fazer, é utilizando o admin-ajax do proprio WordPress, e é isso que irei ensinar neste post.

Criando o Formuário

A primeira parte é escrever um formulário, um html simples:

Script jQuery

Depois criamos a ação em jQuery que fará o disparo do formulário, eu comecei fazendo uma função simples e fui adequando para que funcionasse de acordo com o WordPress:

É possível ainda integrar com plugins de validação de formulários, como o jQuery.validate, posto um exemplo em outra oportunidade.

Registrando o jQuery

Como disse a intenção é utilizar o admin-ajax, assim fica possível escrever o restante da função no functions.php (ou um outro arquivo que seja incluído no mesmo) de seu tema, assim não so garantimos mais segurança, mas deixamos o sistema tomar conta das inserções.

O primeiro passo é registrar o arquivo javaScript criado acima, e depois localizar o admin-ajax referenciando o com o admin ajax

Criando a função de inserção/Envio em PHP

No wp_localize_script criamos a funcaoRegistrada que sera apontada na url de nosso script de envio, feito isso, registramos a ação que efetuara de fato a inserção de dados ou disparo de email e escrevemos sua função.

Neste ponto caso o formulário funcione ele deverá apontar um alert com o nome enviado pelo input, confesso que ainda estou tentando entender como o admin-ajax funciona, e seguindo estes passo consegui não só criar um formulário sem refresh e bem seguro, como consegui criar boas interações com os usuários.

Caso achem interessante, posso postar um exemplo ainda mais completo, com validação de formulários e chaves de segurança.

Enfim este foi um post mais rápido, apenas para mostrar esta maneira de criar formulários sem utilizar plugins e mais segura, caso tenham alguma outra forma, poste nos comentários e ajude a divulgar outras maneiras, no mais um breve Adeus e até mais.