Ciò che andremo a creare l'ho sviluppato per la nuova versione dinamica del sito del Metodo Xiu Zhen Dao, che usa appunto Wordpress come CMS: il widget in questione è visibile nella barra laterale destra, in una qualsiasi pagina:
In questo caso, per rendere la vita semplice a noi e agli utenti, c'è un solo campo da riempire con il proprio indirizzo e-mail, e il widget riesce a validare correttamente questo campo, ad esempio controllando che sia presente il simbolo '@' e almeno un punto '.' (tutto questo sarà approfondito sotto):
- Creare la struttura del form in un widget testuale
- Inserire il codice necessario al funzionamento del widget tramite un file esterno, da aggiungere al file header.php.
Si deve innanzitutto creare la struttura HTML del form, e va inserita in un widget nuovo, di tipo testo: si va nel pannello di amministrazione di Wordpress, nella sezione Aspetto → Widget, e si sceglie la tipologia Testo ("Testo o HTML libero"). Ecco qua il mio widget compilato:
Il campo titolo del widget deve essere riempito a parte, mentre nel corpo del testo ho inserito il codice di un form assolutamente di base:
<div id="newsletter_form"> Iscriviti alla newsletter del Metodo XiuZhenDao <form action="" method="post" id="form_news"> <fieldset> <input id="email_news" name="email_news" type="text" value="la tua e-mail" /> <input id="submit_news" type="submit" value="iscriviti" /> </fieldset> </form> </div>Il CSS utilizzato per formattare il form è praticamente trascurabile, perché basta poco oltre a ciò che è già presente nello stile del tema Wordpress, dove generalmente gli input box e i pulsanti sono già stilati. Questo stile può essere inserito nel documento .css principale del tema, o in un qualunque altro foglio di stile incluso nella pagina dove si inserirà il widget.
/* newsletter widget */
#newsletter_form #email_news{
width: 130px;
}
#newsletter_form #submit_news{
margin-top: 5px;
padding: 2px;
cursor: pointer;
}
#newsletter_form .catched{
font-style: italic;
}
La classe .catched ci servirà dopo, nel messaggio di successo.
2. validazione jQuery
È tempo di scrivere lo script di validazione: è sostanzialmente identico a quello che ho usato nel post precedente, ma in più stavolta implementeremo una validazione più professionale per il nostro campo e-mail (visto che è l'unico che abbiamo, stavolta!)
Ecco cosa fa lo script: quando l'utente clicca il pulsante "iscriviti" controlla che il campo sia stato riempito correttamente. Se ciò non si verifica, colora di rosso il campo; altrimenti invia un'e-mail all'amministratore con l'indirizzo inserito e visualizza un messaggio di successo.
(function($){
$(document).ready(function(){
// newsletter widget
$('#email_news').click(function() {
$(this).attr('value', '');
});
$("#submit_news").click(function() {
// stile errore
var errorclass = {
'background' : '#ff435b',
'color' : '#000',
'borderColor' : '#000'
}
// analisi del dato inserito
var email_news = $("input#email_news").val();
var ln = email_news.length;
var atpos = email_news.indexOf("@");
var dotpos = email_news.lastIndexOf(".");
// validazione campo e-mail
if ((atpos < 1)||((dotpos - atpos) < 2)||(dotpos == ln-1)) {
$("input#email_news").css(errorclass).focus();
return false;
}
// passaggio dati, invio e-mail e messaggio di successo
var dataString = 'email_news=' + email_news;
//alert (dataString); return false;
$.ajax({
type: "POST",
url: "newsletter.php",
data: dataString,
success: function() {
$('#newsletter_form').html("");
$('#message_news').html('Grazie! Hai iscritto alla newsletter
').append('
').hide();
$('#message_news .catched').html(email_news);
$('#message_news').fadeIn('slow');
}
});
return false;
});
});
})(jQuery);
Diamo una scorsa alla prima parte del codice:- La prima istruzione (righe 5-7) serve soltanto per cancellare automaticamente il testo del campo quando l'utente ci clicca sopra per scrivere il suo dato.
- La riga 9 intercetta l'evento del click sul pulsante d'invio per dare inizio alle procedure di validazione.
- Le righe 12-16 definiscono una classe CSS che serve per modificare l'aspetto del campo input nel caso di errore.
- Non deve essere nullo
- Deve contenere almeno un carattere '@' e almeno un punto '.'
- Il carattere '@' non deve essere all'inizio del dato inserito
- Il punto '.' deve essere ad almeno un carattere di distanza dopo '@' ma non può stare per ultimo.
- se ne calcola la lunghezza col metodo length (riga 20)
- si individua la posizione del carattere '@' col metodo indexOf() (riga 21)
- si individua la posizione dell'ultimo punto '.' inserito col metodo lastIndexOf() (riga 22).
- Poiché il metodo indexOf() restituisce -1 se il carattere non è presente e 0 se è in prima posizione, con il controllo atpos < 1 si vede subito sia se '@' esiste o se è per primo
- Con dotpos - atpos < 2 ci si assicura che '@' e '.' non siano consecutivi, e che l'ultimo '.' sia a destra di '@'
- Con l'ultima condizione, dotpos == ln-1, si controlla invece se il punto '.' è in ultima posizione.
Se la validazione non passa, si colora di rosso il campo applicandogli la classe .errorclass (riga 26).
Tutto quello che viene dopo riguarda il passaggio dei dati ad uno script php per l'invio dell'e-mail, ed è stato affrontato nel dettaglio nel post sulla validazione di form con jQuery.
In sostanza, si usa il metodo $.ajax, che ci consente anche di visualizzare un messaggio di successo, senza dover ricaricare questa o altre pagine.
Degno di nota, questa volta, l'inclusione del dato memorizzato nel messaggio di successo per l'utente, a conferma di quanto da lui inserito: basta inserire uno <span> con una classe per riconoscerlo (nel mio caso .catched) e passargli il valore memorizzato, col metodo html(val) (riga 40).
3. script PHP
L'ultima cosa da vedere è lo script che invia l'e-mail, e questo sì che è davvero minimale! Io l'ho scritto così:
<?php
$body = "indirizzo e-mail iscritto: ".$_POST['email_news'];
$header = "From: ".$_POST['email_news'];
mail("indirizzo@email.dominio", "Newsletter widget", $body, $header);
?>
4. file da includere
Ricapitolando, dopo aver inserito il codice HTML nel widget (sopra al punto 1), si deve inserire un file contenente lo script jQuery che abbiamo visto sopra (al punto 2) nel template header.php (e comunque all'interno dello <head> di ogni pagina su cui sarà visualizzato il widget), ad esempio in questo modo:
<script type="text/javascript" src="newsletter_validation.js"></script>Poi si deve mettere lo script php all'indirizzo specificato nel campo url del metodo $.ajax (forse la cosa più comoda è inserire un url assoluto dopo aver piazzato il file, ad esempio nella directory del tema di Wordpress).
Post
