Italian (Italiano) translation by Francesco (you can also view the original English article)
In questo tutorial vado oltre i passaggi per creare un modulo di contatto funzionante, utilizzando il framework di front-end sempre popolare Bootstrap, in combinazione con AJAX e PHP. Da lì possiamo esplorare alcune funzionalità aggiuntive come ad esempio alcune animazioni CSS fantasiose con animate.css, ulteriore convalida in JavaScript e migliorare l'esperienza utente con contenuto asincrono.
Al momento della scrittura Bootstrap 3.3.5 è la versione più recente e vale la pena menzionare che stiamo usando una build predefinita di Bootstrap (con un layout a 12 colonne) per questo tutorial. Quando si segue lungo assicurarsi che si stia utilizzando gli ultimi snippet e le strutture di codice come descritto nella documentazione di Bootstrap.
File e struttura delle cartelle
In primo luogo, vogliamo creare una directory radice e includere i seguenti file e cartelle:
Bootstrap-Form:
├── css/
├── images/
├── js/
├── scripts.js
├── php/
├── process.php
├── index.html
Sarà necessario includere alcune librerie front-end per darci una mano, quindi andare avanti e scaricare (o creare riferimento esterno) le seguenti:
Aggiunte queste librerie, la struttura dei file diventa:
Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── php/
├── process.php
├── index.html
Costruire le basi del modulo
Aprire il file index.html, copiare la struttura di base di HTML seguente:
<!DOCTYPE html>
<html>
<head>
<title>Contact form using Bootstrap 3.3.4</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>"
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Send me a message</h3>
<form role="form" id="contactForm">
</form>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/form-scripts.js"></script>
</html>
Questo è il nostro modello di html di base in cui dovremo costruire il contenuto per il modulo. Si può vedere che abbiamo collegato tutti i file CSS e JavaScript file (non abbiamo effettivamente bisogno di bootstrap.js per questo particolare esempio). Abbiamo incluso un viewport meta tag per aiutare le media query all'interno di Bootstrap. Il JavaScript è stato inserito nella parte inferiore del file per aiutare a fornire il contenuto principale per primo.
All'interno del nostro tag body, abbiamo incluso un div con una classe di col-sm-6 col-sm-offset-3. Questo significa fondamentalmente che all'interno della viewport sm (piccola) e oltre vogliamo visualizzare una colonna di larghezza di 50% (ci sono un massimo di 12 colonne). La classe col-sm-offset-3 rappresenta un margine di sinistra del 25%, producendo così un layout che è metà della finestra di schermo disponibile e centrata orizzontalmente. Da qui abbiamo incluso un h3 e iniziato le basi del nostro modulo. Assicurarsi di applicare un ID a questo form così possiamo associare un evento jQuery a questo più tardi.
Chi non risica non rosica
Per costruire lo scheletro del modulo possiamo copiare/incollare o scrivere il seguente codice all'interno dei tag <form></form>:
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label for="message" class="h4 ">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div>
Si tratta di tutti i campi di input e pulsanti che userà l'utente. Il div iniziale con la classe assegnata row è classica sintassi Bootstrap, che rappresenta un raggruppamento orizzontale degli elementi della colonna. Le colonne all'interno di Bootstrap creano padding o spaziature – aggiungendo una riga intorno a questi rimuoverà il padding sulla sinistra e destra permettendo di inserirsi perfettamente all'interno del loro contenitore.
Abbiamo creato due colonne con la classe col-sm-6 (50%) che useremo per suddividere il nostro modulo. All'interno del primo col-sm-6 abbiamo creato un'etichetta e il campo per il nome, il secondo è per l'enail. Ognuno di questi include un'etichetta con un proprio attributo for in modo da poter essere indirizzati al campo associato. Ognuna di queste colonne include un form-group che semanticamente raggruppa l'etichetta e il campo insieme e applica un piccolo margine in basso.
Tipografia
Bootstrap consente di utilizzare classi di tipografia da H1-H6. Queste classi ci aiutano a stilizzare gli elementi inline senza l'aggiunta di margini aggiuntivi o creare elementi di blocco. Abbiamo utilizzato un H4 per aggiungere stile rapidamente a queste etichette rendendole grandi e chiare.
La classe form-control applicata a ciascun input consente di estendersi su tutta la lunghezza del contenitore (larghezza 100%). Applica anche vari styling per aiutare a costruire un form facile da leggere (grande altezza, bordi ecc).
Dopo queste colonne includiamo il corpo del messaggio. Ancora una volta, raggruppiamo questo all'interno di un form-group e applichiamo stili simili alla nostra area di testo ed etichetta come abbiamo fatto prima.
La Call to Action
Infine includiamo il pulsante Invia. Bootstrap ha un numero di classi per vari colori/stati pulsante e tipografia. Abbiamo optato per utilizzare il pulsante di "success" (btn-success) che è, per impostazione predefinita, verde. Inoltre abbiamo bisogno di applicare la classe di base btn per ripristinare le funzionalità di base dei pulsanti (bordo, imbottitura, allineamento testo, font-weight). Abbiamo applicato una classe btn-lg che lo rende grande e, infine, una classe pull-right che lo fa spostare a destra.
Dopo il nostro pulsante abbiamo incluso un div con id #msgSubmit e applicato le seguenti classi: "h3 text-center hidden". L'h3 contribuisce a creare un'intestazione di dimensioni maggiore, text-center (avete indovinato) imposta l'allineamento del testo al centro e infine abbiamo fissato la classe hidden che definisce display su none e visibility su hidden.
Aggiunta di funzionalità di invio
Come si può vedere visualizzando nel browser preferito abbiamo creato un modulo base di Bootstrap. Tuttavia in realtà non fa nulla ancora. Il nostro prossimo passo sarà creare la funzione che accetta gli input degli utenti e li spedisce in modo asincrono al nostro PHP mailer.
Aprite il file scripts.js e copiate il seguente codice:
$("#contactForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitForm();
});
Questo pezzo di codice è uno snippet di jQuery che è in attesa di una funzione di invio sul nostro id #contactForm (come impostato prima). Con questa funzione analizziamo una variabile di event che memorizza l'azione del modulo di invio alla funzione. event.preventDeafult(); interrompe l'invio del modulo come farebbe normalmente, ossia aggiornare la pagina come è impostata alcuna azione di forma. Infine, chiama la funzione submitForm();.
submitForm();
Poi costruiamo la funzione submitForm(); come segue:
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
}
function formSuccess(){
$( "#msgSubmit" ).removeClass( "hidden" );
}
Le tre variabili impostate servono a catturare i valori di ciascun input dal form e assegnarli a una variabile JavaScript da utilizzare successivamente.
Inizializziamo un oggetto AJAX con jQuery e impostiamo i parametri type su post, URL sul percorso del file PHP, data con i dati che vogliamo inviare e la funzione di successo come callback. Data include tutte le tre variabili concatenate con id/label associati. La funzione di callback di successo viene chiamato quando l'oggetto AJAX riceve correttamente informazioni dallo script PHP. La funzione recupera il testo restituito e controlla se è uguale alla stringa "success". Se è così attiva la funzione finale formSuccess.
La funzione formSuccess rimuove la classe nascosta da div #msgSubmit che abbiamo applicato in precedenza, rivelando così il testo.
Usare la funzione Mail di PHP
Infine, abbiamo bisogno scrivere uno script PHP per ricevere i dati e inviare i nostri contenuti tramite la funzione mail di php integrata. Aprite process.php e includete il seguente codice:
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "emailaddress@test.com";
$Subject = "New Message Received";
// prepare email body text
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
Come nel frammento di jQuery visto in precedenza, abbiamo bisogno di raccogliere e memorizzare le variabili che vogliamo utilizzare. Dalla funzione post possiamo raccogliere le tre variabili di input e assegnargli nomi simili alle variabili all'interno di PHP. La variabile $EmailTo è un indirizzo di email predefinito che è possibile impostare nello script per inviare al tuo indirizzo email al momento dell'invio del modulo. $Subject è una stringa che si desidera utilizzare come oggetto dell'email.
Il testo dell'email è costruito intorno alle tre variabili stabilite. In primo luogo impostiamo del testo descrittivo come "nome:", quindi la variabile, quindi una nuova riga come stabilito mediante /n (nuova interruzione di linea/nuova linea). Questo è ripetuto e concatenato alla variabile $body.
Per infine inviare l'e-mail la attacchiamo all'interno della funzione di posta elettronica. Assegnando la variabile $success includiamo l'indirizzo di posta elettronica cui inviare, l'oggetto, il corpo e la e-mail del mittente.
Per avviare il processo di invio email possiamo chiamarlo all'interno di un'istruzione if. Questo serve anche a controllare se è stato inviato con successo o no. Se la funzione di posta elettronica ha restituito "true" lo script restituirà "successo", se ha esito negativo restituirà "invalid".
Questo risultato sarà restituito all'oggetto AJAX e gestito sul lato client. La bellezza di AJAX è che tutto questo avviene in modo asincrono sul lato client, consentendo all'utente di continuare a utilizzare il sito mentre viene inviato.
Miglioramenti
Dopo aver creato la struttura di base e la funzionalità del nostro form nella prima metà di questo tutorial, ora ci metteremo all'opera per fornire un feedback utente attraverso varie funzionalità aggiuntive che possiamo includere. In particolare, ci occuperemo di fornire feedback del form sia sul lato client che sul lato server di gestione degli errori.
Ancora una volta, per aiutare con il processo di creazione di validazione di form, utilizzeremo alcuni strumenti. Questi includono:
Aggiungere questi nel progetto come fatto in precedenza con Bootstrap e jQuery. Questi strumenti ci aiuteranno a fornire un feedback all'utente quando si invia il modulo. Ci sono un sacco di strumenti validatori e framework là fuori (tra cui validazione HTML5 nativo), ma ho usato il "Bootstrap Validator" che ben si integra con il nostro modulo corrente.
La struttura del progetto dovrebbe ora essere simile a questo:
Bootstrap-Form:
├── css/
├── bootstrap.min.css
├── animate.css
├── images/
├── js/
├── scripts.js
├── bootstrap.js
├── jquery-1.11.2.min.js
├── validator.min.js
├── php/
├── process.php
├── index.html
Convalida del nostro modulo
Iniziamo avviando il validator per controllare il form una volta inviato. Tornando al nostro file scripts.js abbiamo bisogno di modificare il primo blocco di codice che chiama la funzione submitForm() quando il form viene inviato.
Abbiamo bisogno di aggiornarlo al seguente codice:
$("#contactForm").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
event.preventDefault();
submitForm();
}
});
Questo nuovo frammento di codice controlla se il validatore di Bootstrap ha riscontrato un problema e ha fermato l'elaborazione. In caso contrario, si continua come al solito. Abbiamo ancora bisogno di prevenire l'azione predefinita (ricaricare la pagina) in caso di successo nell'invio del modulo.
Facendo clic su Invia il nostro modulo quando non è completamente riempito mostrerà i campi vuoti evidenziati in rosso così da mostrare che cosa deve essere inserito.
Nel processo di aggiunta di questa convalida abbiamo rimosso o impedito che la convalida nativa HTML5 abbia luogo. Possiamo aggiungere ulteriore contesto alla nostra convalida includendo i messaggi di errore. Bootstrap Validator ha una caratteristica deliziosa che lascia spazio a messaggi di errore per ogni input da visualizzare abbastanza facilmente. Per aggiungere questi abbiamo bisogno di aggiungere qualche ulteriore codice HTML per dargli un luogo dove poter essere visualizzati.
All'interno di ogni form-group sotto l'input dobbiamo inserire il seguente codice html:
<div class="help-block with-errors"></div>
Ad esempio, ecco il div extra aggiunto per i campi nome e indirizzo Email:
<div class="row">
<div class="form-group col-sm-6">
<label for="name" class="h4">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-sm-6">
<label for="email" class="h4">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" required>
<div class="help-block with-errors"></div>
</div>
</div>
Re-inviando il modulo ora dovrebbe mostrare il messaggio di errore predefinito quando i campi vengono lasciati vuoti "Please fill in this field.". Aggiungendo un data-attribute all'input chiamato "data-error" è possibile includere un messaggio di errore personalizzato. Per esempio:
<input type="input" data-error="NEW ERROR MESSAGE">
C'è tutta una serie di altre caratteristiche come patterns di espressioni regolari che Bootstrap validator può accettare. È possibile visualizzare più su Github.
Aggiunta di animazione al feedback
La nostra convalida lato client sembra buona; abbiamo alcune evidenziazioni che si verificano su campi vuoti. Tuttavia, sarebbe bene aggiungere ulteriore animazione al form e aggiungere ulteriori messaggi consentendo all'utente di sapere ciò che sta accadendo. Attualmente disponiamo di un "Message submitted!" messaggio che appare in caso di successo, ma che cosa succede in caso di un errore?
Per utilizzare il codice esistente e rendere il nostro script un po' più riutilizzabile modificheremo il messaggio di successo esistente per accettare anche gli errori.
Prima le cose prima, andiamo a rimuovere il testo "Message Submitted!" dal codice HTML e lasciamo un div vuoto:
<div id="msgSubmit" class="h3 text-center hidden"></div>
Ora dobbiamo creare una nuova funzione per gestire lo stato del messaggio. Aggiungiamo questa funzione in fondo a scripts.js
function submitMSG(valid, msg){
var msgClasses;
if(valid){
msgClasses = "h3 text-center tada animated text-success";
} else {
msgClasses = "h3 text-center text-danger";
}
$("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}
Questa funzione accetta due argomenti. valid sarà una variabile booleana: se è vero verrà visualizzato un messaggio di successo, falso sarà un messaggio di errore. msg sarà il messaggio che ci mostrerà in div sullo schermo.
In primo luogo la funzione consente di verificare se si ha a che fare con un messaggio di successo o un messaggio di errore controllando il valore della variabile valid. In entrambi i casi imposta la variabile di classe con le classi CSS appropriate (abbiamo bisogno di ri-includere la h3 e text-center poichè ci sarà la rimozione di questi di default più tardi nella funzione).
Nota: stiamo usando alcune classi di animate.css per la classe di successo del messaggio. L'animazione tada si attiverà in caso di successo.
Infine, la funzione rimuove tutte le classi da #msgSubmit (evita scontri di classi), quindi aggiunge le classi impostate prima e quindi aggiunge il testo del messaggio all'interno del div.
All'interno della nostra iniziazione del validator che abbiamo aggiornato all'inizio di questa sezione possiamo aggiungere la seguente chiamata di funzione all'interno di un'istruzione if quando è uguale a true.
submitMSG(false, "Did you fill in the form properly?");
Inviando il modulo con campi vuoti, si dovrebbe ora visualizzare il messaggio di errore "Did you fill in the form properly?"
Un ultimo passo per questa nuova funzione di submitMSG è quello di chiamarlo quando il nostro form è inviato con successo. Aggiornare la funzione di formSuccess() al seguente:
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
In primo luogo vogliamo ripristinare la forma e cancellare i valori sul successo, poi chiamiamo la nostra funzione submitMSG come prima con un messaggio di successo. Con successo inviando il modulo dovrebbe ora visualizzare il messaggio di successo con un effetto di animazione di tada animate.css.
Shake it
Cos'è più animato, giusto? Aggiungiamo un'altra animazione per l'intero modulo in caso di errore, un universale "scuotimento" dovrebbe essere buono!
Create una nuova funzione proprio dopo formSuccess() e chiamatela formError()
function formError(){
$("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
}
Questa funzione utilizza un approccio trovato nella pagina di demo di animate.css che permette di aggiungere un'animazione a un elemento e quindi richiamarlol/aggiungerlo ancora e ancora. Le animazioni CSS hanno un fastidioso problema in cui una volta che vengono riprodotte tendono a non funzionare di nuovo, anche quando la classe viene rimossa e aggiunta di nuovo. Questa funzione consente di reimpostare le classi su fine animazione, consentendo di ri-aggiungerle nuovamente. Quando l'utente fa clic su Invia su un form incompleto vogliamo che l'animazione shake venga eseguita. E se inviato nuovamente quando è ancora sbagliato ha bisogno di funzionare di nuovo.
Possiamo chiamare questa funzione formError() prima della funzione submitMSG() che abbiamo creato per un messaggio di errore. Per esempio:
formError(); submitMSG(false, "Did you fill in the form properly?");
Ora quando si invia un modulo vuoto scuoterà per consentire all'utente di sapere che qualcosa è andato storto.
Convalida
Tutta questa convalida lato client è buona, tuttavia qualsiasi utente potrebbe disattivare queste misure e inviare il modulo con campi vuoti, modificando il codice all'interno del loro browser. È sempre una buona norma fare alcuni controlli di convalida lato server, per catturare qualsiasi cosa che viene passata.
Apriamo il nostro file di process.php perchè abbiamo bisogno di apportare alcune modifiche a questo per controllare se i campi sono vuoti; se non lo sono, inviamo un messaggio al front-end. Creiamo una variabile denominata $errorMSG per catturare i nostri messaggi di errore e quindi includere ulteriore convalida di $_POST.
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
?>
Questo codice PHP controlla se sono vuote prima di impostarle come variabili corrispondenti (sostituisce il codice esistente impostando le variabili da $_POST). Se sono vuoti quindi impostiamo un messaggio base da inviare al client. Possiamo fare molto più che convalidare i campi se sono vuoti (se sono troppo corti/lunghi, confrontarlo con le espressioni regolari ecc.) in PHP e JavaScript. Tuttavia, per ragioni di semplicità, sarà meglio limitarlo solo ai campi vuoti per ora.
Abbiamo bisogno di inviare nuovamente il messaggio di errore alla chiamata AJAX iniziale da visualizzare nel browser. Modificheremo l'istruzione if che abbiamo creato in precedenza nella parte inferiore del file PHP.
<?php
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
Nella nostra istruzione if possiamo anche controllare se $errorMSG è vuota ("") insieme allo stato della funzione mail integrato abbiamo usato nella variabile $success. Nella nostra condizione else abbiamo incluso un ulteriore controllo. Questo controlla solo se l'errore era un risultato di errore di $success, se quindi inviare di nuovo “Something went wrong :(“. Altrimenti visualizziamo il messaggio che è stato compilato quando abbiamo controllato per i valori vuoti.
Un ultimo passo è quello di accettare questo nuovo messaggio nel nostro AJAX e visualizzarlo sul form. Abbiamo bisogno di aggiornare l'oggetto AJAX all'interno del file scripts.js come segue:
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});
Abbiamo appena aggiornato la condizione else che controlla se text = = success. Nel nostro else abbiamo chiamato la funzione di formError() che applicherà l'animazione per agitare e abbiamo chiesto la funzione submitMSG() per visualizzare il testo restituito indietro da PHP. Il testo restituito potrà essere “Something went wrong :(” o i campi ricevuti sono vuoti.
Conclusione
Andate su Github per dare un'occhiata al codice nella sua interezza – abbiamo fatto un sacco di strada!
Il nostro modulo ora deve fornire all'utente un feedback su quali campi sono corretti tramite convalida. Abbiamo fornito messaggi contestuali basati sullo stato e il messaggio restituito da PHP e implementato un ulteriore livello di convalida sul lato server per catturare quelli ignorati dalla convalida di front-end.
Nel complesso si dovrebbe ora avere un modulo di contatto pronto per essere integrato nel tuo sito Web. Spero vi sia piaciuto questo tutorial, sentitevi liberi di lasciare domande o opinioni nei commenti qui sotto!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
