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";
Nel file html dei form con invio di allegati via email è possibile aggiungere più campi di upload semplicemente 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

Preview + download

5b-Form with stored in csv file - HTML, CSS, PHP

5b-Modulo con archiviazione dati in file csv - HTML, CSS, PHP

Preview + download

5c-Form with multiple fields - HTML, CSS, PHP

5c-Modulo di contatto con campi multipli - HTML, CSS, PHP

Preview + download

5d-Contact form with sending attachment - HTML, CSS, PHP

5d-Modulo di contatto con invio allegato - HTML, CSS, PHP

Preview + download

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.

Preview + download

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.

Preview + download

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

Download for member
Download with donation

5h-Multistep contact form - HTML, CSS, PHP

5h-Modulo di contatto multistep - HTML, CSS, PHP

Preview + download

5i-Contact form in pop-in - HTML, CSS, PHP

5i-Modulo in pop-in - HTML, CSS, PHP

Preview + download

5l-Booking form - HTML, CSS, PHP

5l-Modulo di prenotazione - HTML, CSS, PHP

Preview + download

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

Preview + download

5n-Simple login form 2 - HTML, CSS, PHP

5n-Modulo di login semplice 2 - HTML, CSS, PHP

Solo password

Preview + download


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.

Preview + download

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.
Sigla versione popin: 5q

Preview + download


Other

Altro

5r-Simple registration form - HTML, CSS, PHP

5r-Modulo di registrazione semplice - HTML, CSS, PHP

Invio nome e email.
modulo-iscrizione

Download for member
Download with donation

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

Download for member
Download with donation

5t-File with password - HTML, PHP

5t-File con password - HTML, PHP

Apertura o download di un file con password di protezione

Download for member
Download with donation

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


modulo-redirect

Download for member
Download with donation

5v-Anonymous survey form - HTML, CSS, PHP

5v-Modulo per sondaggi anonimi - HTML, CSS, PHP

Con notifica email e archiviazione in file txt.

Preview + download

5z-Quiz form - HTML, CSS, JS

5z-Modulo per i quiz - HTML, CSS, JS

Preview + download

5z1-Drag and drop images with folder storage - HTML, CSS, PHP

5z1-Drag and drop immagini con archiviazione in una cartella - HTML, CSS, PHP

Preview + download

5z2-Drag and drop images with preview - HTML, CSS, PHP

5z2-Drag and drop immagini con anteprima - HTML, CSS, PHP

Preview + download


Leggi anche: Soluzioni utili per i moduli

Membership index


Altri argomenti: