() translation by (you can also view the original English article)
Non importa che tipo di sito che possediate o gestiate, avete probabilmente bisogno di un modulo di contatto. Il modulo di contatto può aiutare i vostri visitatori a richiedere un preventivo, chiedere informazioni o condividere eventuali suggerimenti o problemi che si trovano ad affrontare durante l'utilizzo di un sito web.
In questo tutorial, il nostro focus sarà sulla creazione di un modulo di contatto completamente funzionale con PHP dall'inizio alla fine. Iniziamo con il codice di tutti i campi che abbiamo bisogno di aggiungere e dello stile di base del modulo di contatto. Dopo di che, ci sposteremo al codice PHP per implementarne la funzionalità.
Naturalmente, il modo più semplice per creare un modulo di contatto è quello di scaricare uno script di modulo di contatto professionale da CodeCanyon.
Ma se volete conoscere come viene creato un modulo di contatto, continuate a leggere! Potrebbe essere più facile di quanto pensiate.
Il codice del nostro modulo di contatto HTML
Il primo passo verso la creazione del nostro modulo di contatto è programmare il markup. Inizieremo a farlo una volta che abbiamo una lista di tutti gli elementi che vogliamo all'interno del nostro modulo. Abbiamo bisogno di un campo di input per il nome della persona che ci sta contattando, e avremo bisogno di un campo per il loro indirizzo di posta elettronica affinché possiamo inviargli una risposta se necessario. Avremo anche bisogno di un campo di input per il motivo per cui le persone ci stanno contattando e una textarea dove gli utenti possono digitare il loro messaggio.
Se il sito che state gestendo è molto popolare, otterrete un sacco di email attraverso il modulo di contatto. Per assicurarvi che le persone giuste arrivino a leggere le email e rispondano rapidamente, avrete bisogno di un paio di campi in più. Per esempio, potete aggiungere un campo che può determinare quale ufficio il visitatore vuole contattare come marketing, supporto o fatturazione. Questa informazione può essere utilizzate successivamente per instradare l'email in modo appropriato. In definitiva, ciò potrebbe aiutarvi a rispondere più rapidamente e a ordinare le email in modo più efficiente.
Quanti campi aggiungete al modulo di contatto dipende dal tipo di sito web che gestite ma assicuratevi di non esagerare nel farlo. Costringere i visitatori a compilare troppi dettagli potrebbe scoraggiarli dal contattarvi del tutto.
Scriviamo il codice HTML per aggiungere tutti i campi che ho appena menzionato nel nostro modulo di contatto.
1 |
<form action="contact.php" method="post"> |
2 |
<div class="elem-group"> |
3 |
<label for="name">Your Name</label> |
4 |
<input type="text" id="name" name="visitor_name" placeholder="John Doe" pattern=[A-Z\sa-z]{3,20} required> |
5 |
</div>
|
6 |
<div class="elem-group"> |
7 |
<label for="email">Your E-mail</label> |
8 |
<input type="email" id="email" name="visitor_email" placeholder="john.doe@email.com" required> |
9 |
</div>
|
10 |
<div class="elem-group"> |
11 |
<label for="department-selection">Choose Concerned Department</label> |
12 |
<select id="department-selection" name="concerned_department" required> |
13 |
<option value="">Select a Department</option> |
14 |
<option value="billing">Billing</option> |
15 |
<option value="marketing">Marketing</option> |
16 |
<option value="technical support">Technical Support</option> |
17 |
</select>
|
18 |
</div>
|
19 |
<div class="elem-group"> |
20 |
<label for="title">Reason For Contacting Us</label> |
21 |
<input type="text" id="title" name="email_title" required placeholder="Unable to Reset my Password" pattern=[A-Za-z0-9\s]{8,60}> |
22 |
</div>
|
23 |
<div class="elem-group"> |
24 |
<label for="message">Write your message</label> |
25 |
<textarea id="message" name="visitor_message" placeholder="Say whatever you want." required></textarea> |
26 |
</div>
|
27 |
<button type="submit">Send Message</button> |
28 |
</form>
|
Prima di procedere oltre, vorrei riepilogare velocemente il significato di alcuni importanti attributi nel markup sopra. L'attributo action nel modulo determina dove i dati del modulo devono essere inviati. Se non disponete di un attributo action, i dati vengono inviati allo stesso URL. Qui abbiamo usato contact.php, in modo che i dati del modulo verranno inviati allo script.
L'attributo name per diversi elementi di input nel modulo viene utilizzato per accedere ai valori dell'elemento sul lato server. Per esempio, nel modulo sopra, potete ottenere il nome del visitatore in contatto con voi utilizzando $_POST['visitor_name'] in contact.php.
Usiamo l'attributo placeholder per dare agli utenti un'idea base dell'input previsto per ogni campo del modulo. L'attributo required garantisce che nessun campo importante venga lasciato vuoto, prima che l'utente prema il pulsante di invio del modulo. L'attributo pattern viene utilizzato per applicare alcune regole del tipo di valori che può andare all'interno di determinati campi. Nel nostro caso, consentiamo agli utenti di utilizzare lettere e il carattere di spazio nei nomi che inviano. Limitiamo anche il numero totale di caratteri accettabili inclusi da 3 a 20. Il modello che utilizzate dipende dal tipo di input che volete da parte degli utenti.
La seguente demo su CodePen ci mostra quello che sembra il nostro modulo di contatto con il codice di cui sopra e un po' di CSS.
Rendere il nostro modulo di contatto HTML funzionale utilizzando PHP
Adesso, nostro modulo non fa nulla di utile. I visitatori possono compilarlo e premere il pulsante di invio messaggio ma non riceviamo nulla perché non c'è nessun codice di lato server per gestire le informazioni fornite dal modulo. In questa sezione, faremo il nostro modulo di contatto funzionale utilizzando PHP.
Iniziate creando un file contact.php e inserite il codice seguente all'interno di esso.
1 |
<?php
|
2 |
|
3 |
if($_POST) { |
4 |
$visitor_name = ""; |
5 |
$visitor_email = ""; |
6 |
$email_title = ""; |
7 |
$concerned_department = ""; |
8 |
$visitor_message = ""; |
9 |
|
10 |
if(isset($_POST['visitor_name'])) { |
11 |
$visitor_name = filter_var($_POST['visitor_name'], FILTER_SANITIZE_STRING); |
12 |
}
|
13 |
|
14 |
if(isset($_POST['visitor_email'])) { |
15 |
$visitor_email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['visitor_email']); |
16 |
$visitor_email = filter_var($visitor_email, FILTER_VALIDATE_EMAIL); |
17 |
}
|
18 |
|
19 |
if(isset($_POST['email_title'])) { |
20 |
$email_title = filter_var($_POST['email_title'], FILTER_SANITIZE_STRING); |
21 |
}
|
22 |
|
23 |
if(isset($_POST['concerned_department'])) { |
24 |
$concerned_department = filter_var($_POST['concerned_department'], FILTER_SANITIZE_STRING); |
25 |
}
|
26 |
|
27 |
if(isset($_POST['visitor_message'])) { |
28 |
$visitor_message = htmlspecialchars($_POST['visitor_message']); |
29 |
}
|
30 |
|
31 |
if($concerned_department == "billing") { |
32 |
$recipient = "billing@domain.com"; |
33 |
}
|
34 |
else if($concerned_department == "marketing") { |
35 |
$recipient = "marketing@domain.com"; |
36 |
}
|
37 |
else if($concerned_department == "technical support") { |
38 |
$recipient = "tech.support@domain.com"; |
39 |
}
|
40 |
else { |
41 |
$recipient = "contact@domain.com"; |
42 |
}
|
43 |
|
44 |
$headers = 'MIME-Version: 1.0' . "\r\n" |
45 |
.'Content-type: text/html; charset=utf-8' . "\r\n" |
46 |
.'From: ' . $visitor_email . "\r\n"; |
47 |
|
48 |
if(mail($recipient, $email_title, $visitor_message, $headers)) { |
49 |
echo "<p>Thank you for contacting us, $visitor_name. You will get a reply within 24 hours.</p>"; |
50 |
} else { |
51 |
echo '<p>We are sorry but the email did not go through.</p>'; |
52 |
}
|
53 |
|
54 |
} else { |
55 |
echo '<p>Something went wrong</p>'; |
56 |
}
|
57 |
|
58 |
?>
|
Abbiamo già fatto alcune convalide lato client dell'input dell'utente. Tuttavia, è sempre più sicuro fare la convalida pure lato server. Utilizziamo la funzione filter_var() per pulire il nome fornito dall'utente. In modo simile, abbiamo anche pulito il valore di $email_title e di $concerned_department. Potete utilizzare la funzione filter_var() per convalidare o pulire tutti i tipi di input dell'utente. Usiamo anche la funzione htmlspecialchars() per codificare tutti i caratteri speciali HTML nel messaggio che ci invia il visitatore.
Il valore di $recipient è basato sul valore della variabile $concerned_department. In questo modo ci assicuriamo che solo le persone che si suppone che in realtà esaminino la questione ricevano l'email.
Infine, usiamo la funzione mail() per inviare un'email che includa le informazioni che il visitatore voleva farci sapere. Al momento della consegna con successo dell'email, lasciamo che i visitatori sappiano che abbiamo ricevuto la loro email e che verranno contattati presto.
Lla protezione è fondamentale quando avete a che fare con i dati o gli input dell'utente. Se dovreste convalidare o pulire l'input dell'utente dipende da che cosa è l'input e come si desidera utilizzarlo. La convalida controlla semplicemente se l'input dell'utente segue un certo insieme di regole. Per esempio, la convalida potrebbe controllare che il nome di una persona non contenga numeri. La pulizia viene utilizzata per rimuovere eventuali caratteri invalidi che causano problemi che comportano un rischio di sicurezza. Per esempio, un utente malintenzionato che sta cercando di contattarvi tramite il modulo potrebbe aggiungere un tag script nella textarea per farvi scaricare uno script dannoso. Ciò è particolarmente preoccupante quando il vostro sito ha forum pubblici accessibili da tutti.
Tuttavia, dovete essere molto attenti quando vi sbarazzate di caratteri indesiderati nell'input dell'utente. Per esempio, è possibile decidere di utilizzare filter_var($user_input, FILTER_SANITIZE_STRING); su alcuni input per rimuovere tutti i tag e codificare i caratteri speciali. Tuttavia, questo flag rimuove anche gli input con caratteri innocui da utenti legittimi. Ecco un esempio:
1 |
<?php
|
2 |
|
3 |
$string = 'One of your posts about inequalities mentioned that when x < y and y < z then x < z.'; |
4 |
|
5 |
// Output: One of your posts about inequalities mentioned that when x
|
6 |
echo filter_var($string, FILTER_SANITIZE_STRING); |
7 |
|
8 |
// Output: One of your posts about inequalities mentioned that when x < y and y < z then x < z.
|
9 |
echo htmlspecialchars($string); |
10 |
|
11 |
?>
|
Se il vostro sito ha un sacco di argomenti correlati alla matematica, è relativamente comune per gli utenti scrivere < o > nei moduli di contatto o nei messaggi nel forum. Utilizzando il flag FILTER_SANITIZE_STRING con la funzione filter_var() rimuoverà in questo caso le informazioni necessarie dal messaggio.
Quello che intendo dire è che anche se dovreste sempre convalidare o pulire i dati utente, assicuratevi che non rimuoviate via le informazioni cruciali nel processo.
Considerazioni finali
Creare un semplice modulo di contatto con PHP è relativamente semplice una volta che avete familiarità con le nozioni di base. Iniziate scrivendo il codice HTML necessario per creare gli elementi di input per informazioni come il nome utente, l'indirizzo email, il numero di telefono ecc. Il passo successivo è scrivere il CSS per assicurarvi che il modulo di contatto si fonda perfettamente con il resto del sito. Il passaggio finale consiste nella scrittura del codice PHP che prenderà le informazioni dal modulo di contatto e che ve le invierà in modo sicuro.
L'obiettivo è quello di assicurarsi che gli elementi diversi del modulo sono strutturati in modo da non confondere le persone e l'input dell'utente è pulito e convalidato prima che lo inviate alle parti interessate. Se tutto questo è nuovo per voi o se non volete perdere un sacco di tempo a creare un modulo di contatto dall'aspetto professionale, dovreste verificare questi script PHP di modulo di contatto più votati.
Se avete domande, sentitevi liberi di farmelo sapere nei commenti. Il mio prossimo tutorial vi mostrerà come implementare il vostro CAPTCHA per aiutare a mantenere sotto controlo lo spam del modulo di contatto.
Se siete interessati a script PHP di moduli di qualità professionale che potete iniziare a usare sul vostro sito oggi, date un'occhiata ad alcuni dei nostri altri post.
