WordPress: creare una pagina di contatti in AJAX
Un semplice tutorial per creare una pagina di contatti per WordPress con AJAX.
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:
|
1 2 3 4 5 6 |
/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:
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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:
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
(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:
|
1 2 3 |
$('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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/*= 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.
Demo
Download
Nessun commento
Trackback
I commenti sono chiusi.