Desta vez vamos conhecer um pouco mais de personalização do cadastro em formulários do Wordpress.
Vamos criar um validador captcha com imagem de verificação gerada pelo PHP GD Library.
Primeiro criamos pelo administrador do WordPress uma Pagina Personalizada e dentro da pasta de /wp-content/themes/[seu_tema]/ criaremos um arquivo por exemplo /page-contato.php.
No cabeçalho do documento ou no final inserimos o seguinte javascript:
----------------------------------------------------------------------------------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#refresh-captcha').on('click', function(e){
jQuery('#captcha').attr("src","./php/newCaptcha.php?rnd=" + Math.random());
});
jQuery('#validar').click(function () {
jQuery.ajax({
type: "POST",
url: "./verificaCodeCapt.php",
dataType: "json",
data: { 'code':jQuery('input#captcha').val() },
success: function (response) {
if(response.resp === 'Incorreto'){
jQuery('#errorCode').html("<span style='color:red;'>Codigo Inválido</span>");
jQuery('input#captcha').val('').focus();
}else {
jQuery('#errorCode').html("<span style='color:blue;'>Codigo OK</span>");
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
});
</script>
----------------------------------------------------------------------------------------------------------
Repare neste codigo javascript da biblioteca jQuery na linha da ação ON (jQuery('#refresh-captcha').on()) temos a chamada do seguinte arquivo PHP, responsável pela geração da imagem criada pelo PHP:
----------------------------------------------------------------------------------------------------------
<?php
//newCaptcha.php
session_start();
$string = '';
for ($i = 0; $i < 5; $i++) {
$string .= chr(rand(97, 122));
}
$_SESSION['captcha'] = $string; //store the captcha
$dir = '../fonts/';
$image = imagecreatetruecolor(165, 50); //custom image size
$font = "PlAGuEdEaTH.ttf"; // custom font style
$color = imagecolorallocate($image, 92, 124, 237); // custom color
$white = imagecolorallocate($image, 245, 245, 245); // custom background color
imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir.$font, $_SESSION['captcha']);
header("Content-type: image/png");
imagepng($image);
?>
----------------------------------------------------------------------------------------------------------
Já ação de submit ao clicar no botão "Enviar" temos a chamada no Click do arquivo PHP que verifica se as letras na imagem correspondem as digitadas pelo usuário:
----------------------------------------------------------------------------------------------------------
<?php
session_start();
if(isset($_REQUEST['code']))
{
//var_dump($_SESSION['captcha']);
//var_dump($_REQUEST['code']);
if(strtolower($_REQUEST['code']) === strtolower($_SESSION['captcha'])){
echo json_encode(array('resp'=>'Valido'));
}else {
echo json_encode(array('resp'=>'Incorreto'));
}
//echo json_encode(strtolower($_REQUEST['code']) == strtolower($_SESSION['captcha']));
}
else
{
echo 0; // no code
}
session_destroy('captcha');
?>
----------------------------------------------------------------------------------------------------------
Já no formulario HTML do arquivo /page-contato.php podemos montar da seguinte forma:
----------------------------------------------------------------------------------------------------------
<form method="post" >
<div id="captcha-wrap">
<img src="./img/refresh.png" width="35" alt="refresh captcha" id="refresh-captcha" /> <img src="./captcha/newCaptcha.php" alt="" id="captcha" />
<br>
<input class="narrow text input" id="captcha" name="captcha" type="text" placeholder="Verification Code" required />
<span id="errorCode"></span>
<br><br>
<input type="button" id="validar" value="Enviar">
<br>
</div>
</form>
----------------------------------------------------------------------------------------------------------
O resultado final fica bem interessante, basta trabalhar um pouco no layout pra ficar melhor e se adaptar a qualquer formulário.
Para os que curtem facilidade baixem a versão funcional do código fonte no Git: https://github.com/robertosm822/jQuery-Captcha-PHP
Até logo.
