Seguimi sui social
Profilo LinkedIn Profilo Facebook Profilo Twitter Profilo Google+
Home > Archivio > #PHP Come inviare un form creato in HTML

#PHP Come inviare un form creato in HTML

I moduli di Google sono migliori?

Autore: Andrea Pacchiarotti
Website: www.andreapacchiarotti.it
Ultimo aggiornamento: 25 Giugno 2017
Categoria: Siti web Form PHP

.htaccess

  1. Cos’è il PHP
  2. I form (moduli) in HTML
  3. Trasmettere i dati: metodo GET o POST
  4. Creare un form di contatto in PHP
  5. Il problema della sicurezza dei dati inviati coi moduli
  6. Meglio i moduli di Google?

Cos’è il PHP

PHP è l’acronimo di PHP Hypertext Preprocessor, ovvero preprocessore di ipertesti, ed è un linguaggio di scripting ovvero un linguaggio di programmazione interpretato (un interprete è un software che esegue altri programmi a partire dal relativo codice sorgente), nato nel 1994, capace di interfacciarsi con numerosi database tra cui MySQL e Oracle, solo per citarne due tra i più usati.
Una qualsiasi operazione compiuta sul Web implica il coinvolgimento di un client (per esempio un browser) e di un server. Tipicamente il client effettua una richiesta ad un server remoto e quest’ultimo, tramite un linguaggio di scripting (ad esempio PHP), interpreta la richiesta del client ed invia una risposta, che potrebbe essere una pagina HTML, XML o altro, al client. Il client, a sua volta, interpreta la risposta ottenuta fornendola all’utente che, nel caso del browser, sarà una pagina HTML.

I form (moduli) in HTML

Una delle azioni più comuni che effettua uno script in PHP è quello di inviare un modulo (o form) da un sito web. Vediamo quindi come implementare un form in HTML, CSS e PHP all'interno di una pagina del proprio sito web per l’inserimento e l’invio di dati ad una mail.
Una volta costruito il proprio form in HTML e CSS con ad esempio caselle di input (caselle di testo), select (elenchi a discesa con opzioni) e textarea (area di testo) vediamo come uno script PHP raccoglie ed elabora i dati inseriti al suo interno.

Trasmettere i dati: metodo GET o POST

Per inviare i dati lo sviluppatore deve specificare all’interno del tag form un metodo (method) di trasporto che può essere GET o POST, come nell’esempio seguente:

<form method="post" action="nomefile.php">
...
</form>

Per il nostro scopo il metodo POST ha indubbi vantaggi rispetto a GET perché permette il passaggio di una mole di dati più elevata e li passa a prescindere dal formato (testo, immagini, video).
La variabile globale che useremo nel nostro form sarà quindi di tipo POST e prenderà il nome di $_POST. Essa conterrà, sotto forma di array (cioè una struttura dati con determinate caratteristiche, chiamata vettore), tutti i valori ricevuti tramite il metodo POST dalla quale sarà possibile recuperare il valore di un parametro specificandone il nome tra parentesi quadrate:

// recupero il valore del parametro 'field1' trasmesso con il metodo POST
$field1 = $_POST['field1'];

Ecco un esempio con un semplice form:

<form method="post" action="nomefile.php">
  La tua mail<br>
  <input type="text" name="email"><br>
  <input type="submit" value="Invia">
</form>

Lo script PHP che all’invio (submit) del form raccoglie tale informazione e la mostra a video è:

<?php
$email = $_POST['email'];
echo 'La tua è: ' . $email;

e a video produrrà:

La tua mail è: pippo@gmail.com

Creare un form di contatto in PHP

Ovviamente con l’HTML è possibile solo creare il modulo di contatto (e con il CSS abbellirlo), ma non inviarlo perché l’HyperText Markup Language è un linguaggio di markup e non di scripting e dunque non può offrire tale possibilità. Andiamo allora alla pratica ed integriamo l’HTML al CSS e al PHP per creare un semplice form responsivo.

HTML

<form id="contact" action="invioform.php" method="post">
<fieldset><input name="nome" placeholder="Il tuo nome" type="text" required autofocus></fieldset>
<fieldset><input name="email" placeholder="La tua mail" type="email" required></fieldset>
<fieldset><input name="tel" placeholder="Il tuo telefono" type="tel" required></fieldset>
<fieldset>
<select name="corso">
<option value=""> Seleziona il corso</option>
<option value="Excel - Base">Excel - Base</option>
<option value="Excel - Intermedio">Excel - Intermedio</option>
<option value="Excel - Avanzato">Excel - Avanzato</option>
<option value="Excel - VBA e Macro">Excel - VBA e Macro</option>
<option value="Excel - PowerPivot">Excel - PowerPivot</option>
</select>
</fieldset>
<fieldset><textarea name="msg" placeholder="Il tuo messaggio" required></textarea></fieldset>
<fieldset><button name="submit" type="submit">INVIA</button></fieldset>
</form>

CSS

* {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;
text-rendering:optimizeLegibility}
.container{width:60%}
input,select,textarea{font-family:Times New Roman; font-size:16px}
#contact input[type="text"],#contact input[type="email"],#contact input[type="tel"],#contact input[type="url"],
#contact textarea,#contact button[type="submit"]{font:400 12px/16px font-family:Times New Roman}
#contact{background:white; padding:25px;margin:20px 0; box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)}
fieldset{border:medium none !important;margin: 0 0 10px;min-width:100%;padding:0;width:100%;margin-bottom:20px}
#contact input[type="text"],#contact input[type="email"],#contact input[type="tel"],#contact input[type="url"],
#contact textarea{width:100%;border:1px solid #ccc;background:#FFF;margin: 0 0 5px;padding:10px}
#contact input[type="text"]:hover,#contact input[type="email"]:hover,#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,#contact textarea:hover{-webkit-transition:border-color 0.3s ease-in-out;
  -moz-transition:border-color 0.3s ease-in-out;transition:border-color 0.3s ease-in-out;border:1px solid #aaa}
#contact textarea{height:100px;max-width:100%;resize:none}
#contact select{width:100%;resize:none;color:#888}
#contact button[type="submit"]{cursor:pointer;width:100%;border:none; background:#02723b; color:#FFF; margin: 0 0 5px;padding: 10px;font-size: 15px}
#contact button[type="submit"]:hover{background:#43A047; -webkit-transition:background 0.3s ease-in-out;-moz-transition:background 0.3s ease-in-out;transition:background-color 0.3s ease-in-out}
#contact button[type="submit"]:active{box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5)}
#contact input:focus,#contact textarea:focus{outline:0;border: 1px solid #aaa}
::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder{color:#888}
@media screen and (max-width:1270px) {
  .container{width:96%;margin:0 auto}
}

PHP (da mettere in un file separato che nell’esempio si chiama invioform.php. In marrone la parte da personalizzare in base ai campi del proprio modulo)

<?php
// Recupero i valori inseriti nel form
$nome = $_POST['nome'];
$email = $_POST['email'];
$tel = $_POST['tel'];
$corso = $_POST['corso'];
$msg = $_POST['msg'];
$url = $_POST['url'];
 
//dopo 4 secondi rimando all’home del sito
$delay = "4";
$url = "https://www.andreapacchiarotti.it";
 
// verifico che tutti i campi siano stati compilati
if (!$nome || !$email || !$tel || !$corso || !$msg) {
  echo 'Tutti i campi del modulo sono obbligatori!';   
}
// verifico che il nome non contenga caratteri nocivi
elseif (!preg_match('/^[A-Za-z \'-]+$/i',$nome)) {
  echo 'Il nome contiene caratteri non ammessi';   
}
// verifico se un indirizzo email è valido
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo 'Indirizzo email non corretto';
}else{

// compilo un messaggio combinando i dati recuperati dal form
$testo = "Nome: " . $nome . "\n"
       . "Email: " . $email . "\n"
       . "Tel: " . $tel . "\n"
       . "Corso: " . $corso . "\n"
       . "Messaggio: " . $msg;
 
// uso la funzione mail di PHP per inviare i dati al mio indirizzo di posta
mail('pacchiarotti@gmail.com', 'Mail da Andrea Pacchiarotti', $testo);
 
// Mostro un messaggio di conferma all'utente
print "<body>
<table align='center' bordercolor='#CCCCCC'>
  <tr>
    <td>
<div align='center'><font face='Verdana, Arial, Helvetica, sans-serif'>
Grazie per avermi contattato</font><br><br>
Risponderò al più presto all'indirizzo $email<br><br>       
Per tornare all'Home attendi 4 secondi o <a href='https://www.andreapacchiarotti.it'>Clicca qui</a></font></div></td>
<meta http-equiv='refresh' content='$delay;  url=$url'>
</tr>
</table>
</body>";
}
?>

Ed è così pronto un esempio che mostra come PHP interagisce con i moduli.

Il problema della sicurezza dei dati inviati coi moduli

Dietro ad ogni modulo si celano rischi che richiedono una verifica dei dati ricevuti dagli utenti, ciò per evitare attacchi mediante svariate tecniche quali ad esempio SQL Injection (consente di inserire codice SQL malevole nei campi di input in modo che venga eseguito per far inviare, ad esempio, il contenuto del database all'attaccante) e Cross-Site Scripting (permette un insieme variegato di attacchi come ad esempio la raccolta e manipolazione di informazioni e l’alterazione del comportamento delle pagine web).
Quindi prima di processare un form, bisogna sempre controllare che i dati inseriti all’interno dei suoi campi siano conformi ai valori che ci si attende. Vediamo cosa offre in tal senso PHP per ipotetici campi nome, cognome, mail, età:

// verifico che il nome non contenga caratteri nocivi
elseif (!preg_match('/^[A-Za-z \'-]+$/i',$nome)) {
  echo 'Il nome contiene caratteri non ammessi';   
}
// verifico che il cognome non contenga caratteri nocivi
elseif (!preg_match('/^[A-Za-z \'-]+$/i',$cognome)) {
  echo 'Il cognome contiene caratteri non ammessi';   
}
// verifico se un indirizzo email è valido
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  echo 'Indirizzo email non corretto';
}
// verifico che il campo età sia numerico, non sia inferiore di 1 e maggiore di 120
elseif (!is_numeric($eta) || $eta < 1 || $eta > 120) {
  echo 'Campo età non corretto'; 
}else{
  // processo il form
  // ...
}

Meglio i moduli di Google?

Una pratica alternativa ai form appena visti sono i Moduli Google come questo che ho nel mio sito per la richiesta di un preventivo SEO gratuito (in totale implemento 3 diversi moduli Google più uno tradizionale) che, oltre alla facilità di costruzione presenta anche il tipico controllo dei reCAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart), cioè il test per assicurarsi che l'utente sia un umano.

Dal seguente link scarica i codici per creare il form con PHP (nel fondo pagina del PDF troverai anche il link per scaricare uno ZIP con un esempio completo)


Se #PHP Come inviare un form creato in HTML è stato utile, seguimi sui Social networks cliccando i pulsanti in alto a destra di questa pagina.

Per restare aggiornato sulla pubblicazione di nuovi articoli su Microsoft Office, Adobe e web in generale iscriviti gratuitamente alla newsletter


Se invece vuoi condividere questo articolo nella tua Rete sociale, puoi utilizzare i bottoni qui sotto: