In questo articolo vedremo come realizzare una pagina di contatti per WordPress utilizzando una classe PHP, AJAX e jQuery. Vediamo insieme i dettagli dell'implementazione.
Preparazione
Creiamo questa struttura all'interno del nostro tema:
/tuotema
/inc
/contact
/js
Inseriremo la classe PHP all'interno della directory contact e il file JavaScript all'interno della directory js. Gli stili CSS andranno nel foglio di stile del tema e il template di pagina direttamente nella directory del tema. Dovremo inoltre aggiungere del codice al nostro file functions.php.
La classe PHP
La nostra classe PHP è Contact.php:
class Contact
{
const TO = 'me@test.it';
protected $_from;
protected $_subject;
protected $_message;
protected $_email;
protected $_captcha;
public function __construct()
{
$this->_from = $_POST['from'];
$this->_subject = $_POST['subject'];
$this->_email = $_POST['email'];
$this->_message = $_POST['message'];
$this->_captcha = $_POST['captcha'];
}
private function _validate()
{
$errors = '';
if(empty($this->_from)) {
$errors .= '<div class="error">Name missing</div>';
}
if(empty($this->_subject)) {
$errors .= '<div class="error">Subject missing</div>';
}
if(!filter_var($this->_email, FILTER_VALIDATE_EMAIL)) {
$errors .= '<div class="error">Invalid e-mail</div>';
}
if(empty($this->_message)) {
$errors .= '<div class="error">Message missing</div>';
}
if(!preg_match('/^11$/', $this->_captcha)) {
$errors .= '<div class="error">Wrong answer</div>';
}
return $errors;
}
private function _send()
{
$headers = 'From: ' .' <'.$this->_email.'> ' . "\r\n";
$message = $this->_from . ' wrote at ' . strftime('%d-%m-%Y %H:%M:%S', time()) . ': ' . "\n\n";
$message .= $this->_message;
@mail(self::TO, $this->_subject, $message, $headers);
}
public function process()
{
$message = '';
if(isset($_POST['contact-submit'])) {
$validation = $this->_validate();
if($validation != '') {
$message = $validation;
} else {
$this->_send();
$message = '<div class="success">E-mail successfully sent!</div>';
}
}
return $message;
}
}
Questa classe valida i dati (in modo elementare) e restituisce come output una stringa contenente un messaggio di avvenuto invio o un elenco di errori a seconda dei casi.
Il template di pagina
L'elaborazione dei dati AJAX deve avvenire prima che venga generato l'output di WordPress. Quindi il nostro template di pagina, chiamato template-contact.php, inizia in questo modo:
<?php
/*
Template Name: Contact Form
*/
?>
<?php
require_once('inc/contact/Contact.php');
$contact = new Contact();
if(isset($_POST['ajax'])) {
echo $contact->process();
exit();
} else {
?>
Per evitare che la richiesta AJAX faccia duplicare l'output abbiamo utilizzato un parametro POST per capire se la richiesta è fatta da jQuery. Se lo è, viene restituita solo la stringa del metodo Contact::process(), altrimenti viene visualizzata normalmente la pagina.
Il codice jQuery
Il codice jQuery è molto semplice ed è contenuto nel file contact.js:
(function($) {
$(function() {
var Contact = function() {
var form = '#contact';
this.process = function() {
$(form).submit(function(event) {
var $form = $(this);
var url = $form.attr('action');
var data = 'from=' + $('#from', $form).val() + '&email=' + $('#email', $form).val() +
'&subject=' + $('#subject', $form).val() +
'&message=' + $('#message', $form).val() +
'&captcha=' + $('#captcha', $form).val() +
'&contact-submit=Send&ajax=true';
$.ajax({
type: 'POST',
dataType: 'text',
url: url,
data: data,
success: function(txt) {
$('div.success, div.error', $form).remove();
$(txt).prependTo($('ul', $form));
$('html, body').animate({
scrollTop: $form.offset().top
}, 500);
}
});
event.preventDefault();
});
}
};
var contact = new Contact();
if($('#contact').length) {
contact.process();
}
});
})(jQuery);
Dato che PHP controlla se il form è stato inviato usando la variabile POST contact-submit, dobbiamo inserirla nella nostra richiesta, a cui aggiungiamo anche il parametro ajax. L'effetto interessante è il seguente:
$('html, body').animate({
scrollTop: $form.offset().top
}, 500);
In pratica la pagina si sposta con un movimento fluido verso l'alto per mostrare il messaggio restituito dalla richiesta AJAX.
Includere i file JavaScript
Aggiungiamo il seguente codice al file functions.php del nostro tema:
function add_scripts() {
if(!is_admin()) {
wp_enqueue_script('jquery');
wp_register_script('contact', get_bloginfo('template_url') . '/js/contact.js', '1.0', true);
wp_enqueue_script('contact');
}
}
add_action('wp_footer', 'add_scripts');
Gli stili CSS
Gli stili CSS vanno inseriti nel foglio di stile principale del nostro tema:
/*= Contact form */
#contact {
margin: 1em 0;
}
#contact ul {
margin: 0;
padding: 0;
list-style: none;
}
#contact li {
margin-bottom: 0.5em;
}
#contact li label {
display: block;
font-weight: bold;
padding-bottom: 3px;
}
#contact li input {
width: 150px;
border: 1px solid #999;
display: block;
}
#contact li textarea {
display: block;
font: 1em sans-serif;
width: 400px;
height: 300px;
border: 1px solid #999;
}
#contact p input {
display: block;
margin-top: 1em;
background: #000;
color: #fff;
font-weight: bold;
width: 100px;
padding: 4px;
border: 1px solid #333;
border-radius: 4px;
}
#contact .error,
#contact .success{ padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }
#contact .error { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
#contact .success { background: #e6efc2; color: #264409; border-color: #c6d880; }
I file del download sono stati localizzati in italiano. Troverete tutte le indicazioni necessarie nei commenti dei file.