PHP form - Come inviare un modulo creato in HTML
I moduli di Google sono migliori?
Autore: Andrea Pacchiarotti
Ultimo aggiornamento: 01 Febbraio 2024
Categoria: Web Marketing Costruzione siti web Form PHP
Il PHP viene utilizzato per inviare un form perché consente di elaborare i dati inviati attraverso il modulo e quindi di elaborarli, ad esempio, per inserirli in un database o per inviare un'email. Inoltre, PHP permette, inoltre, di fornire una risposta all'utente sull'esito dell'invio del form, ad esempio, un messaggio di conferma. Ora vediamo PHP form - come inviare un modulo creato in HTML.
- Cos’è il PHP
- I form (moduli) in HTML
- Trasmettere i dati: metodo GET o POST
- Creare un form di contatto in PHP
- La sicurezza dei dati inviati coi moduli
- 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 a un server remoto e quest’ultimo, tramite un linguaggio di scripting (ad esempio PHP), interpreta la richiesta del client e 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. Se usi WordPress leggi come configurare Contact Form 7.
I form (moduli) in HTML
Una delle azioni più comuni che effettua uno script in PHP è 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 a una mail (alla fine dell'articolo potrai scaricare i codici).
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 di un form creato in HTML 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 (struttura dati con determinate caratteristiche, chiamata vettore), tutti i valori ricevuti tramite il metodo POST, da tale variabile globale sarà possibile recuperare il valore di un parametro specificandone il nome tra parentesi quadrate:
$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à:
Creare un form di contatto in PHP
E allora come si fa a inviare un form creato in HTML? Ovviamente con l’HTML è possibile creare solo 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à. Passiamo allora alla pratica e integriamo l’HTML al CSS e al PHP per creare un semplice form responsivo.
HTML
<form id="contatti" 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}
#contatti input[type="text"],#contatti input[type="email"],#contatti input[type="tel"],#contatti input[type="url"],
#contatti textarea,#contatti button[type="submit"]{font:400 12px/16px font-family:Times New Roman}
#contatti{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}
#contatti input[type="text"],#contatti input[type="email"],#contatti input[type="tel"],#contatti input[type="url"],
#contatti textarea{width:100%;border:1px solid #ccc;background:#FFF;margin: 0 0 5px;padding:10px}
#contatti input[type="text"]:hover,#contatti input[type="email"]:hover,#contatti input[type="tel"]:hover,
#contatti input[type="url"]:hover,#contatti 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}
#contatti textarea{height:100px;max-width:100%;resize:none}
#contatti select{width:100%;resize:none;color:#888}
#contatti button[type="submit"]{cursor:pointer;width:100%;border:none; background:#02723b;
color:#FFF; margin: 0 0 5px;padding: 10px;font-size: 15px}
#contatti 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}
#contatti button[type="submit"]:active{box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5)}
#contatti input:focus,#contatti 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
Va in un file separato invioform.php. In marrone grassetto 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>";
}
?>
Finito! Ed è così pronto un esempio che ha mostrato come PHP interagisce con i moduli.
La sicurezza dei dati inviati coi moduli
Dietro 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?
Si può inviare un form anche con Google, infatti una pratica alternativa ai form creati in HTML appena visti sono i Moduli Google, come questo per la richiesta di un preventivo SEO gratuito 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.
Per approfondire, puoi leggere Creare un form upload dove ti mostro come costruire un modulo per inviare degli allegati attraverso HTML e PHP.
Dopo aver letto PHP form - come inviare un modulo creato in HTML è il momento di scaricare i codici per il form in PHP.