Membership index
NOTA:
I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.
Lista delle risorse scaricabili con donazione
PREMESSA: il lavoro è impostato sulle funzionalità.
La grafica dei moduli è, quindi, essenziale e potrà essere liberamente personalizzata modificando e/o aggiungendo regole di stile opportune.
AGGIORNAMENTO: sui dispositivi mobili, il foglio di stile dello user agent può contenere regole che determinano il colore dei campi input.
Consigliato aggiungere il colore del testo (con il colore preferito) per la classe .button nel file contact.css:
color: #000 !important;
Per una buona prestazione della pagina, i campi input dovrebbero sempre avere un'etichetta (label) che li identifica.
In mancanza di un campo label, come in alcuni form essenziali, è possibile utilizzare il tag title.
Esempio:
<input title="search" type="text" name="search">
I moduli sono elementi indispensabili per qualunque sito web.
Le caratteristiche di un modulo devono essere: praticità, funzionalità, sicurezza.
Tutti questi moduli sono costruiti in HTML5, Javascript e PHP.
I moduli di contatto posseggono queste caratteristiche:
- filtro antispam invisibile
- filtro antispam con captcha
- blocco link in textarea
- accettazione trattamento dati
- pagina di conferma invio
- notifica email al destinatario (admin)
- notifica email al mittente (predisposta da attivare)
- blocco parole o indirizzi email indesiderati (predisposto da attivare)
Nel file php è possibile aggiungere più destinatari separandoli con una virgola.
Es: $to = "info@esempio1.com, info@esempio2.com";
È possibile aggiungere più campi di upload nei moduli con invio di allegati ripetendo la stringa relativa e dando una sequenza numerica al campo "name".
In questo modo:
<p><label>File1:</label>
<input type="file" name="attachFile">
</p>
<p><label>File2:</label>
<input type="file" name="attachFile2">
</p>
<p><label>File3:</label>
<input type="file" name="attachFile3">
</p>
È possibile mostrare la conferma di invio in un popup invece che nella pagina "thankyou.html".
Per fare questo, nel file php, oscurate così (con due slash iniziali) questa stringa:
//$confirm = "./thankyou.html";
and, below, modify the rules like this:
e , più sotto, modificate le regole in questo modo:
if(isset($name)) {
mail($to,$subject,$emailmessage,$headers);
//echo "<META HTTP-EQUIV=\"refresh\" content=\"0;URL=".$confirm."\">";
echo '<script type="text/javascript">alert("Invio riuscito! Grazie, ti contatteremo appena possibile");window.history.go(-1);</script>';
}
INFO: Alcune caselle di posta potrebbero non riconoscere il mittente come valido e bloccare il messaggio, o metterlo nello spam.
La cosa migliore è collegare il modulo alla casella di posta fornita dallo stesso hosting che ospita il sito.
Dopo aver configurato tale casella sul proprio hosting, è anche opportuno testarla tramite lo strumento "https://www.mail-tester.com/" e contattare l'assistenza in caso il risultato non fosse soddisfacente.
Inoltre, alcune caselle di posta, nelle impostazioni avanzate per la visualizzazione dei messaggi, offrono la scelta del "set di caratteri predefinito".
In questo caso, è opportuno scegliere UTF-8 (Unicode), al fine di avere una corretta lettura del testo.
ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.
Contact forms
I moduli di contatto
Per le indicazioni di base sull'implementazione, leggi la guida: Il modulo di contatto
NOTA: è possibile scaricare il layout a due colonne applicabile a tutti i tipi di moduli.:
Preview
Download
5a-Simple contact form - HTML, CSS, PHP
5a-Modulo di contatto semplice - HTML, CSS, PHP
5b-Form with stored in csv file - HTML, CSS, PHP
5b-Modulo con archiviazione dati in file csv - HTML, CSS, PHP
5c-Form with multiple fields - HTML, CSS, PHP
5c-Modulo di contatto con campi multipli - HTML, CSS, PHP
5d-Contact form with sending attachment - HTML, CSS, PHP
5d-Modulo di contatto con invio allegato - HTML, CSS, PHP
5e-Contact form with attachment stored in folder - HTML, CSS, PHP
5e-Modulo di contatto con archiviazione allegato in cartella - HTML, CSS, PHP
NOTA: il codice php di questo modulo contiene la validazione per le estensioni di file concesse.
Ugualmente, la limitazione per le estensioni è implementata anche nel campo input del form html al fine di bloccare i file non voluti già al caricamento.
5f-Contact form with multiple attachments stored in folder - HTML, CSS, PHP
5f-Modulo di contatto con allegati multipli e archiviazione in cartella - HTML, CSS, PHP
NOTA: il codice php di questo modulo contiene la validazione per le estensioni di file concesse.
Ugualmente, la limitazione per le estensioni è implementata anche nel campo input del form html al fine di bloccare i file non voluti già al caricamento.
Il codice HTML contiene uno script per limitare il numero di file consentiti.
5g-Contact form with multiple attachments stored in folder and data stored in file csv- HTML, CSS, PHP
5g-Modulo di contatto con allegati multipli archiviati in cartella e dati archiviati in file csv - HTML, CSS, PHP
5h-Multistep contact form - HTML, CSS, PHP
5h-Modulo di contatto multistep - HTML, CSS, PHP
5i-Contact form in pop-in - HTML, CSS, PHP
5i-Modulo in pop-in - HTML, CSS, PHP
5l-Booking form - HTML, CSS, PHP
5l-Modulo di prenotazione - HTML, CSS, PHP
Login forms
I moduli di login
5m-Simple login form - HTML, CSS, PHP
5m-Modulo di login semplice - HTML, CSS, PHP
Utente, password e pulsante di logout
5n-Simple login form 2 - HTML, CSS, PHP
5n-Modulo di login semplice 2 - HTML, CSS, PHP
Solo password
Comments form
I moduli per i commenti
5o-Simple comments form - HTML, CSS, PHP
5o-Modulo commenti semplice - HTML, CSS, PHP
Con filtro anti-spam invisibile, blocco inserimento link, notifica email e archiviazione in file html.
5p-Advanced comments form - HTML, CSS, PHP
5p-Modulo commenti avanzato - HTML, CSS, PHP
Con:
- filtro antispam invisibile
- filtro captcha
- conta caratteri
- blocco inserimento link
- notifica email
- archiviazione in file html
- moderazione dei commenti
- inversione ordine commenti (più recente -> più vecchio e viceversa)
Versione classica + versione pop-in.
Other
Altro
5r-Simple registration form - HTML, CSS, PHP
5r-Modulo di registrazione semplice - HTML, CSS, PHP
Invio nome e email.
5s-Newsletter form - HTML, CSS, PHP
5s-Modulo per la newsletter - HTML, CSS, PHP
- Modulo per iscrizione alla newsletter.
- Mailing list in file txt.
- Modulo per invio newsletter.
- Modulo di cancellazione.
- Archivio iscrizioni cancellate in file txt
5t-File with password - HTML, PHP
5t-File con password - HTML, PHP
Apertura o download di un file con password di protezione
5u-Redirect module based on one or more user choices - HTML, CSS, PHP
5u-Modulo di redirect in base a una o più scelte dell'utente - HTML, CSS, PHP
5v-Anonymous survey form - HTML, CSS, PHP
5v-Modulo per sondaggi anonimi - HTML, CSS, PHP
Con notifica email e archiviazione in file txt.
5z-Quiz form - HTML, CSS, JS
5z-Modulo per i quiz - HTML, CSS, JS
5z1-Drag and drop images with preview and storage - HTML, CSS, JQuery, PHP
5z1-Drag and drop immagini con anteprima e archiviazione in cartella - HTML, CSS, JQuery, PHP
5z2-Drag and drop images with publication and storage - HTML, CSS, JQuery, PHP
5z2-Drag and drop immagini con pubblicazione e archiviazione - HTML, CSS, JQuery, PHP
Membership index
Argomenti del sito correlati:
Leggi tutto