I siti web variano per design, scopo e complessità, ma in genere possono essere statici o dinamici. I siti statici sono prerenderizzati e servono lo stesso contenuto a tutti i visitatori. Grazie alla loro struttura semplice, sono in genere facili da gestire e hanno tempi di caricamento rapidi. I siti dinamici, invece, generano contenuti sul momento utilizzando linguaggi di programmazione lato server.

I siti statici non supportano in modo nativo elementi interattivi come i moduli, poiché richiedono funzionalità di elaborazione lato server, come l’archiviazione dei dati. Ma questa “mancanza” non è certo ideale: i moduli fungono da canale di comunicazione con i vostri utenti. Possono aiutarvi a raccogliere feedback preziosi attraverso suggerimenti o domande, in modo da poter migliorare la user experience adattando i vostri contenuti.

Questa guida spiega come creare un modulo per un sito statico, aggiungere un servizio di gestione dei moduli e distribuire il sito con l’aiuto del servizio di Hosting di Siti Statici di Kinsta.

Scegliere un servizio di gestione dei moduli

Un servizio di gestione dei moduli è uno strumento di terze parti che raccoglie ed elabora i dati dei moduli per i siti web statici. Fornisce l’infrastruttura lato server necessaria per gestire l’invio dei moduli, migliorando la funzionalità e l’interattività dei siti e mantenendo i vantaggi di un sito statico.

Quando un utente invia un modulo, i dati vengono inviati all’endpoint del servizio di gestione dei moduli. Il servizio elabora i dati, li archivia in modo sicuro e invia notifiche ai destinatari appropriati.

Esistono molti servizi di gestione dei moduli. Vediamo i più diffusi.

1. Formspree

Formspree è un servizio di gestione dei moduli facile da usare che semplifica l’aggiunta di moduli e la gestione degli invii di moduli nei siti statici. Offre un piano gratuito con funzioni di base, come 50 invii di moduli al mese, e piani a pagamento con funzionalità più avanzate, tra cui l’inserimento sicuro e la protezione antispam.

2. Formbucket

FormBucket offre un modo pratico per raccogliere e gestire gli invii di moduli salvandoli in “bucket”, ciascuno con un URL unico. Si possono definire i campi e impostare le regole di convalida per i moduli in linea con il branding del sito web dalla pagina dashboard di Formbucket, facile da usare.

3. Getform

Getform è una piattaforma di backend per moduli che offre un modo semplice e sicuro per gestire gli invii di moduli. Getform offre un’interfaccia utente intuitiva per la gestione degli invii di moduli, notifiche via e-mail e integrazioni con servizi popolari come Slack e Google Sheets.

Confronto tra i servizi Formspree, Formbucket e Getform

Per facilitare il confronto, riportiamo di seguito una tabella che mette a confronto i tre servizi sopra citati e le loro caratteristiche principali:

Caratteristiche Formspree Formbucket Getform
Prezzi Un piano gratuito e piani a pagamento a seconda dell’utilizzo e dello spazio di archiviazione Una prova gratuita di 14 giorni e piani a pagamento con prezzi in base all’utilizzo e allo spazio di archiviazione Un piano gratuito e piani a pagamento con prezzi in base all’utilizzo e allo spazio di archiviazione
Numero di invii di moduli inclusi Varia a seconda del piano tariffario selezionato Varia a seconda del piano tariffario selezionato Varia a seconda del piano tariffario selezionato
Brand personalizzato Sì Sì Sì
Protezione antispam Sì Sì Sì
Caricamento di file Sì, con un piano a pagamento No Sì
Integrazioni di terze parti Zapier, webhooks, Google Sheets, MailChimp e altro ancora Webhooks Zapier, Slack, Google Sheets, Airtable, Mailchimp, Twilio e altro ancora

Quando si sceglie un servizio di gestione dei moduli, è necessario considerare la facilità di integrazione, le caratteristiche e le funzionalità desiderate, il prezzo e la compatibilità con la propria piattaforma di hosting. Valutate i requisiti specifici del vostro modulo e confrontate ogni servizio di gestione dei moduli per trovare quello più adatto alle vostre esigenze.

Configurare il servizio di gestione dei moduli con Getform

L’utilizzo di un servizio di gestione dei moduli come Getform può semplificare notevolmente la gestione degli invii di moduli sul sito web. Quando un utente invia un modulo, Getform si occupa del processo, eliminando la necessità di un’API di backend per elaborare e memorizzare questi invii.

Questa perfetta integrazione permette di gestire in modo efficiente tutte le risposte all’interno di una casella di posta dedicata. Per iniziare, assicuratevi di avere una conoscenza di base di HTML, CSS e JavaScript e seguite questi passaggi:

  1. Create un account Getform.
  2. Accedete alla dashboard dell’account Getform e cliccate sul pulsante + Create.
  3. Nella finestra di dialogo che appare, assicuratevi che sia selezionato Form. Fornite un nome descrittivo dell’endpoint e selezionate il fuso orario appropriato. Quindi, cliccate su Create.
    Finestra di dialogo per la creazione dell'URL dell'endpoint di invio del modulo di Getform
    Finestra di dialogo per la creazione dell’endpoint URL di invio del modulo di Getform.

    Getform genererà un URL di invio del modulo, che dovrete aggiungere all’attributo action dell’elemento modulo.

Creare un modulo con HTML e CSS

Ora che avete configurato il servizio di gestione dei moduli, potete utilizzare HTML, CSS e JavaScript per creare il modulo.

  1. Nel terminale, create una cartella di progetto chiamata forms e cambiate la directory corrente in quella del progetto: 
    mkdir forms
cd forms
  2. Aggiungete i seguenti file di progetto: 
    #unix-based systems
touch index.html styles.css script.js 

#windows
echo. > index.html & echo. > styles.css & echo. > script.js
  3. Successivamente, create un modulo HTML. Per gli scopi di questa guida, il codice fornito di seguito vi aiuterà a creare un modulo che include campi di input per un nome e un indirizzo e-mail, un’area di testo per i messaggi e un pulsante di invio. Aggiungete questo codice al file index.html: 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contact Us</h1>
        <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
            <div class="input-group">
                <label for="name" class="form-label">Name:</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">Email:</label>
                <input type="email" id="email" name="email" class="form-input" required>

                <label for="message" class="form-label">Message:</label>
                <textarea id="message" name="message" class="form-textarea" rows="4" required>
                </textarea>
            </div>

            <div class="form-control">
                <button type="submit" id="submitBtn" class="form-submit">Submit</button>
            </div>  
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>
  4. Accedete alla dashboard di Getform e copiate l’URL dell’endpoint. Quindi, incollate questo URL nell’attributo action all’interno del tag di apertura del modulo nel codice HTML.
  5. Infine, potete aggiungere gli stili CSS nel file styles.css per personalizzare il design e l’aspetto del modulo.

Implementare la convalida dei dati con JavaScript

La convalida dei dati verifica che l’input dell’utente soddisfi criteri specifici e regole di convalida prima di elaborarlo o memorizzarlo.

L’esecuzione della convalida dei dati aiuta a evitare l’invio di dati errati o dannosi, fornisce agli utenti un feedback immediato sugli errori di inserimento e garantisce che solo i dati validi vengano elaborati. Svolge un ruolo fondamentale nel mantenere l’integrità e l’accuratezza dei dati.

Esistono diversi modi per implementare la convalida dei dati, tra cui l’utilizzo di JavaScript per eseguire la convalida lato client, la convalida lato server o una combinazione di entrambi gli approcci. Per questa guida, implementiamo la convalida lato client per il modulo di contatto per garantire che gli utenti non inviino campi vuoti e che l’email fornita sia nel formato corretto.

  1. Per prima cosa, definite la funzione di convalida aggiungendo il seguente codice al file script.js: 
    function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    if (name.trim() === '' || message.trim() === '') {
        alert('Please fill out all fields.');
        return false;
    }
    const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Please enter a valid email address.');
        return false;
    }
    return true;
}

    La funzione validateForm() ha due scopi: innanzitutto controlla che i campi nome e messaggio siano vuoti, poi convalida il campo email utilizzando un’espressione regolare e verifica che l’indirizzo email sia in un formato valido.

    Se i campi sono vuoti o il formato dell’email non è valido, la funzione si attiva e visualizza un messaggio di avviso. Al contrario, se tutti i campi del modulo superano questi controlli di validazione, la funzione restituisce true e il modulo viene inviato.

    È anche possibile aggiungere altre regole di validazione per garantire l’accuratezza e l’integrità dei dati inviati. Ad esempio, potete verificare la lunghezza degli input dell’utente o limitare l’invio di determinati caratteri nel messaggio, prevenendo potenziali vulnerabilità di sicurezza come gli attacchi di tipo injection.

  2. Quindi, richiamate la funzione di cui sopra per attivare la convalida utilizzando un callback dell’event listener click. Questo callback attiva la funzione ogni volta che un utente clicca sul pulsante submit. Per richiamare la funzione, aggiungete il seguente codice al file script.js: 
    document.addEventListener('DOMContentLoaded', function () {
	const submitButton = document.getElementById('submitBtn');

	if (submitButton) {
		submitButton.addEventListener('click', function (event) {
			event.preventDefault();
			if (validateForm()) {
				document.forms['contactForm'].submit();
				resetFormAfterSubmission();
			}
			return false;
		});
	}
});

function resetFormAfterSubmission() {
	setTimeout(function () {
		const contactForm = document.forms['contactForm'];
		contactForm.reset();
	}, 500);
}

    Notate che la funzione preventDefault() è inclusa nel codice per impedire l’azione predefinita di invio del modulo. In questo modo, potete convalidare il modulo prima di inviare le informazioni a Getform.

    Inoltre, dopo che la convalida e l’invio del modulo sono andati a buon fine, viene attivata la funzione resetFormAfterSubmission() che ripristina il modulo dopo un ritardo di mezzo secondo per consentire altri invii.

Distribuire un sito statico con Kinsta

Kinsta offre una soluzione di hosting gestito che permette di ospitare diversi progetti web e database. Con il suo piano gratuito, si possono ospitare fino a 100 siti statici direttamente da GitHub, GitLab o Bitbucket.

Per distribuire il vostro sito statico con Kinsta, innanzitutto inviate i codici al vostro provider Git preferito. Quindi, seguite i passaggi qui sotto:

  1. Accedete al cruscotto MyKinsta.
  2. Nella dashboard, cliccate sul menu a tendina Aggiungi servizio e selezionate Sito statico.
  3. Se state ospitando un progetto per la prima volta con Kinsta, selezionate e attivate il vostro fornitore di servizi Git preferito.
  4. Selezionate il repository del progetto.
  5. Selezionate il branch da distribuire e fornite un nome univoco per il sito.
  6. Specificate il percorso principale della directory di pubblicazione che contiene i file HTML e le risorse da distribuire aggiungendo un punto.
  7. Infine, cliccate su Crea sito.

Entro pochi secondi, MyKinsta distribuirà il vostro sito.

Per integrare il modulo in un sito esistente, copiate e incollate l’HTML del modulo direttamente nella sezione desiderata del sito. Assicuratevi di includere le proprietà CSS e il codice JavaScript associati per garantire uno stile e una funzionalità coerenti.

In alternativa, dato che il modulo è già stato distribuito separatamente, potete fornire agli utenti l’URL – come un collegamento ipertestuale o un pulsante – da cliccare per accedere al modulo.

Per testare la funzionalità del sito live, cliccate sull’URL del sito fornito. Digitate gli input del modulo richiesti per assicurarvi che il modulo funzioni come previsto. Confermate che il modulo convalidi gli input dell’utente, mostri gli avvisi di errore quando necessario e invii i dati validi per un’ulteriore elaborazione.

Dopo aver inviato il modulo, Getform vi reindirizzerà a una pagina di conferma o di ringraziamento, indicando che l’invio è andato a buon fine.

Pagina di conferma dell'invio del modulo di Getform con un link alla pagina precedente
La pagina di conferma dell’invio del modulo di Getform.

Per esaminare le risposte del modulo, accedete alla dashboard di Getform e visualizzate gli invii nella casella di posta in arrivo.

Riepilogo

Ora che il modulo è stato implementato con successo, le opportunità di personalizzarlo sono praticamente infinite. Ad esempio, potete migliorare il design e la funzionalità del modulo, modificandolo ulteriormente con i CSS o con il linguaggio del preprocessore che preferite e implementando tecniche di validazione avanzate.

Oltre al servizio di Hosting di Siti Statici, Kinsta offre anche un servizio di Hosting di Applicazioni, pensato per applicazioni più dinamiche, come le applicazioni web che richiedono un’elaborazione lato server, interazioni con il database e altre funzionalità complesse.

Con l’accesso a entrambi i servizi, gli utenti ottengono una soluzione di hosting completa per gestire una serie di progetti web in un unico ecosistema, da semplici siti statici a complesse applicazioni web.

Ora potete trasformare il vostro sito statico in un’esperienza dinamica grazie ai servizi di gestione dei moduli. Quale servizio preferite o avete già sperimentato? Condividetelo nei commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).