{"id":76023,"date":"2024-01-19T15:35:41","date_gmt":"2024-01-19T14:35:41","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=76023&#038;preview=true&#038;preview_id=76023"},"modified":"2024-01-22T18:26:54","modified_gmt":"2024-01-22T17:26:54","slug":"moduli-per-siti-statici","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/","title":{"rendered":"Come implementare i moduli nei siti statici"},"content":{"rendered":"<p>I siti web variano per design, scopo e complessit\u00e0, ma in genere possono essere statici o dinamici. I <a href=\"https:\/\/kinsta.com\/it\/blog\/sito-web-statico\/\">siti statici<\/a> 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 <a href=\"https:\/\/kinsta.com\/it\/blog\/miglior-linguaggio-di-programmazione\/\">linguaggi di programmazione<\/a> lato server.<\/p>\n<p>I siti statici non supportano in modo nativo elementi interattivi come i moduli, poich\u00e9 richiedono funzionalit\u00e0 di elaborazione lato server, come l&#8217;archiviazione dei dati. Ma questa &#8220;mancanza&#8221; non \u00e8 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.<\/p>\n<p>Questa guida spiega come creare un modulo per un sito statico, aggiungere un servizio di gestione dei moduli e distribuire il sito con l&#8217;aiuto del servizio di <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hosting di Siti Statici di Kinsta<\/a>.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Scegliere un servizio di gestione dei moduli<\/h2>\n<p>Un servizio di gestione dei moduli \u00e8 uno strumento di terze parti che raccoglie ed elabora i dati dei moduli per i siti web statici. Fornisce l&#8217;infrastruttura lato server necessaria per gestire l&#8217;invio dei moduli, migliorando la funzionalit\u00e0 e l&#8217;interattivit\u00e0 dei siti e mantenendo i vantaggi di un sito statico.<\/p>\n<p>Quando un utente invia un modulo, i dati vengono inviati all&#8217;endpoint del servizio di gestione dei moduli. Il servizio elabora i dati, li archivia in modo sicuro e invia notifiche ai destinatari appropriati.<\/p>\n<p>Esistono molti servizi di gestione dei moduli. Vediamo i pi\u00f9 diffusi.<\/p>\n<h3>1. Formspree<\/h3>\n<p><a href=\"https:\/\/formspree.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Formspree<\/a> \u00e8 un servizio di gestione dei moduli facile da usare che semplifica l&#8217;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\u00e0 pi\u00f9 avanzate, tra cui l&#8217;inserimento sicuro e la protezione antispam.<\/p>\n<h3>2. Formbucket<\/h3>\n<p><a href=\"https:\/\/www.formbucket.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">FormBucket<\/a> offre un modo pratico per raccogliere e gestire gli invii di moduli salvandoli in &#8220;bucket&#8221;, 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.<\/p>\n<h3>3. Getform<\/h3>\n<p><a href=\"https:\/\/getform.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Getform<\/a> \u00e8 una piattaforma di backend per moduli che offre un modo semplice e sicuro per gestire gli invii di moduli. Getform offre un&#8217;interfaccia utente intuitiva per la gestione degli invii di moduli, notifiche via e-mail e integrazioni con servizi popolari come Slack e Google Sheets.<\/p>\n<h3>Confronto tra i servizi Formspree, Formbucket e Getform<\/h3>\n<p>Per facilitare il confronto, riportiamo di seguito una tabella che mette a confronto i tre servizi sopra citati e le loro caratteristiche principali:<\/p>\n<table>\n<tbody>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Caratteristiche<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\"><strong>Formspree<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\"><strong>Formbucket<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\"><strong>Getform<\/strong><\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Prezzi<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\">Un piano gratuito e piani a pagamento a seconda dell&#8217;utilizzo e dello spazio di archiviazione<\/td>\n<td colspan=\"1\" rowspan=\"1\">Una prova gratuita di 14 giorni e piani a pagamento con prezzi in base all&#8217;utilizzo e allo spazio di archiviazione<\/td>\n<td colspan=\"1\" rowspan=\"1\">Un piano gratuito e piani a pagamento con prezzi in base all&#8217;utilizzo e allo spazio di archiviazione<\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Numero di invii di moduli inclusi<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\">Varia a seconda del piano tariffario selezionato<\/td>\n<td colspan=\"1\" rowspan=\"1\">Varia a seconda del piano tariffario selezionato<\/td>\n<td colspan=\"1\" rowspan=\"1\">Varia a seconda del piano tariffario selezionato<\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Brand personalizzato<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Protezione antispam<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Caricamento di file<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec, con un piano a pagamento<\/td>\n<td colspan=\"1\" rowspan=\"1\">No<\/td>\n<td colspan=\"1\" rowspan=\"1\">S\u00ec<\/td>\n<\/tr>\n<tr>\n<td colspan=\"1\" rowspan=\"1\"><strong>Integrazioni di terze parti<\/strong><\/td>\n<td colspan=\"1\" rowspan=\"1\">Zapier, webhooks, Google Sheets, MailChimp e altro ancora<\/td>\n<td colspan=\"1\" rowspan=\"1\">Webhooks<\/td>\n<td colspan=\"1\" rowspan=\"1\">Zapier, Slack, Google Sheets, Airtable, Mailchimp, Twilio e altro ancora<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Quando si sceglie un servizio di gestione dei moduli, \u00e8 necessario considerare la facilit\u00e0 di integrazione, le caratteristiche e le funzionalit\u00e0 desiderate, il prezzo e la compatibilit\u00e0 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\u00f9 adatto alle vostre esigenze.<\/p>\n<h2>Configurare il servizio di gestione dei moduli con Getform<\/h2>\n<p>L&#8217;utilizzo di un servizio di gestione dei moduli come Getform pu\u00f2 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\u00e0 di un&#8217;API di backend per elaborare e memorizzare questi invii.<\/p>\n<p>Questa perfetta integrazione permette di gestire in modo efficiente tutte le risposte all&#8217;interno di una casella di posta dedicata. Per iniziare, assicuratevi di avere una conoscenza di base di <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e seguite questi passaggi:<\/p>\n<ol start=\"1\">\n<li><a href=\"https:\/\/app.getform.io\/login\" target=\"_blank\" rel=\"noopener noreferrer\">Create<\/a> un account Getform.<\/li>\n<li>Accedete alla dashboard dell&#8217;account Getform e cliccate sul pulsante <strong>+ Create<\/strong>.<\/li>\n<li>Nella finestra di dialogo che appare, assicuratevi che sia selezionato <strong>Form<\/strong>. Fornite un nome descrittivo dell&#8217;endpoint e selezionate il fuso orario appropriato. Quindi, cliccate su <strong>Create<\/strong>.\n<figure id=\"attachment_172511\" aria-describedby=\"caption-attachment-172511\" style=\"width: 1259px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/getform-dialog-box.png\" alt=\"Finestra di dialogo per la creazione dell'URL dell'endpoint di invio del modulo di Getform\" width=\"1259\" height=\"677\"><figcaption id=\"caption-attachment-172511\" class=\"wp-caption-text\">Finestra di dialogo per la creazione dell&#8217;endpoint URL di invio del modulo di Getform.<\/figcaption><\/figure>\n<p>Getform generer\u00e0 un URL di invio del modulo, che dovrete aggiungere all&#8217;attributo <code>action<\/code> dell&#8217;elemento modulo.<\/li>\n<\/ol>\n<h3>Creare un modulo con HTML e CSS<\/h3>\n<p>Ora che avete configurato il servizio di gestione dei moduli, potete utilizzare <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/ottimizzare-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a> per creare il modulo.<\/p>\n<ol start=\"1\">\n<li>Nel terminale, create una cartella di progetto chiamata <strong>forms<\/strong> e cambiate la directory corrente in quella del progetto:\n<pre><code class=\"language-bash\">mkdir forms\ncd forms<\/code><\/pre>\n<\/li>\n<li>Aggiungete i seguenti file di progetto:\n<pre><code class=\"language-bash\">#unix-based systems\ntouch index.html styles.css script.js \n\n#windows\necho. &gt; index.html & echo. &gt; styles.css & echo. &gt; script.js<\/code><\/pre>\n<\/li>\n<li>Successivamente, create un modulo HTML. Per gli scopi di questa guida, il codice fornito di seguito vi aiuter\u00e0 a creare un modulo che include campi di input per un nome e un indirizzo e-mail, un&#8217;area di testo per i messaggi e un pulsante di invio. Aggiungete questo codice al file <strong>index.html<\/strong>:\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Contact Form&lt;\/title&gt;\n    &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;h1 class=\"form-title\"&gt;Contact Us&lt;\/h1&gt;\n        &lt;form class=\"contact-form\" name=\"contactForm\" action=\"&lt;Getform URL&gt;\" method=\"POST\"&gt;\n            &lt;div class=\"input-group\"&gt;\n                &lt;label for=\"name\" class=\"form-label\"&gt;Name:&lt;\/label&gt;\n                &lt;input type=\"text\" id=\"name\" name=\"name\" class=\"form-input\" required&gt;\n\n                &lt;label for=\"email\" class=\"form-label\"&gt;Email:&lt;\/label&gt;\n                &lt;input type=\"email\" id=\"email\" name=\"email\" class=\"form-input\" required&gt;\n\n                &lt;label for=\"message\" class=\"form-label\"&gt;Message:&lt;\/label&gt;\n                &lt;textarea id=\"message\" name=\"message\" class=\"form-textarea\" rows=\"4\" required&gt;\n                &lt;\/textarea&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=\"form-control\"&gt;\n                &lt;button type=\"submit\" id=\"submitBtn\" class=\"form-submit\"&gt;Submit&lt;\/button&gt;\n            &lt;\/div&gt;  \n        &lt;\/form&gt;\n    &lt;\/div&gt;\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<\/li>\n<li>Accedete alla dashboard di Getform e copiate l&#8217;URL dell&#8217;endpoint. Quindi, incollate questo URL nell&#8217;attributo <code>action<\/code> all&#8217;interno del tag di apertura del modulo nel codice HTML.<\/li>\n<li>Infine, potete aggiungere gli stili CSS nel file <strong>styles.css<\/strong> per personalizzare il design e l&#8217;aspetto del modulo.<\/li>\n<\/ol>\n<h2>Implementare la convalida dei dati con JavaScript<\/h2>\n<p>La convalida dei dati verifica che l&#8217;input dell&#8217;utente soddisfi criteri specifici e regole di convalida prima di elaborarlo o memorizzarlo.<\/p>\n<p>L&#8217;esecuzione della convalida dei dati aiuta a evitare l&#8217;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&#8217;integrit\u00e0 e l&#8217;accuratezza dei dati.<\/p>\n<p>Esistono diversi modi per implementare la convalida dei dati, tra cui l&#8217;utilizzo di <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> 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&#8217;email fornita sia nel formato corretto.<\/p>\n<ol start=\"1\">\n<li>Per prima cosa, definite la funzione di convalida aggiungendo il seguente codice al file <strong>script.js<\/strong>:\n<pre><code class=\"language-js\">function validateForm() {\n    const name = document.getElementById('name').value;\n    const email = document.getElementById('email').value;\n    const message = document.getElementById('message').value;\n    if (name.trim() === '' || message.trim() === '') {\n        alert('Please fill out all fields.');\n        return false;\n    }\n    const emailRegex = \/^[^s@]+@[^s@]+.[^s@]+$\/;\n    if (!emailRegex.test(email)) {\n        alert('Please enter a valid email address.');\n        return false;\n    }\n    return true;\n}<\/code><\/pre>\n<p>La funzione <code>validateForm()<\/code> ha due scopi: innanzitutto controlla che i campi nome e messaggio siano vuoti, poi convalida il campo email utilizzando un&#8217;espressione regolare e verifica che l&#8217;indirizzo email sia in un formato valido.<\/p>\n<p>Se i campi sono vuoti o il formato dell&#8217;email non \u00e8 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.<\/p>\n<p>\u00c8 anche possibile aggiungere altre regole di validazione per garantire l&#8217;accuratezza e l&#8217;integrit\u00e0 dei dati inviati. Ad esempio, potete verificare la lunghezza degli input dell&#8217;utente o limitare l&#8217;invio di determinati caratteri nel messaggio, prevenendo potenziali vulnerabilit\u00e0 di sicurezza come gli attacchi di tipo injection.<\/li>\n<li>Quindi, richiamate la funzione di cui sopra per attivare la convalida utilizzando un callback dell&#8217;event listener <code>click<\/code>. Questo callback attiva la funzione ogni volta che un utente clicca sul pulsante <strong>submit<\/strong>. Per richiamare la funzione, aggiungete il seguente codice al file <strong>script.js<\/strong>:\n<pre><code class=\"language-js\">document.addEventListener('DOMContentLoaded', function () {\n\tconst submitButton = document.getElementById('submitBtn');\n\n\tif (submitButton) {\n\t\tsubmitButton.addEventListener('click', function (event) {\n\t\t\tevent.preventDefault();\n\t\t\tif (validateForm()) {\n\t\t\t\tdocument.forms['contactForm'].submit();\n\t\t\t\tresetFormAfterSubmission();\n\t\t\t}\n\t\t\treturn false;\n\t\t});\n\t}\n});\n\nfunction resetFormAfterSubmission() {\n\tsetTimeout(function () {\n\t\tconst contactForm = document.forms['contactForm'];\n\t\tcontactForm.reset();\n\t}, 500);\n}<\/code><\/pre>\n<p>Notate che la funzione <code>preventDefault()<\/code> \u00e8 inclusa nel codice per impedire l&#8217;azione predefinita di invio del modulo. In questo modo, potete convalidare il modulo prima di inviare le informazioni a Getform.<\/p>\n<p>Inoltre, dopo che la convalida e l&#8217;invio del modulo sono andati a buon fine, viene attivata la funzione <code>resetFormAfterSubmission()<\/code> che ripristina il modulo dopo un ritardo di mezzo secondo per consentire altri invii.<\/li>\n<\/ol>\n<h2>Distribuire un sito statico con Kinsta<\/h2>\n<p>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 <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>.<\/p>\n<p>Per distribuire il vostro sito statico con Kinsta, innanzitutto inviate i codici al vostro provider Git preferito. Quindi, seguite i passaggi qui sotto:<\/p>\n<ol start=\"1\">\n<li><a href=\"https:\/\/my.kinsta.com\/login\/?lang=it?lang=en\" target=\"_blank\" rel=\"noopener noreferrer\">Accedete<\/a> al cruscotto MyKinsta.<\/li>\n<li>Nella dashboard, cliccate sul menu a tendina <strong>Aggiungi servizio<\/strong> e selezionate <strong>Sito statico<\/strong>.<\/li>\n<li>Se state ospitando un progetto per la prima volta con Kinsta, selezionate e attivate il vostro fornitore di servizi Git preferito.<\/li>\n<li>Selezionate il repository del progetto.<\/li>\n<li>Selezionate il branch da distribuire e fornite un nome univoco per il sito.<\/li>\n<li>Specificate il percorso principale della directory di pubblicazione che contiene i file HTML e le risorse da distribuire aggiungendo un punto.<\/li>\n<li>Infine, cliccate su <strong>Crea sito<\/strong>.<\/li>\n<\/ol>\n<p>Entro pochi secondi, MyKinsta distribuir\u00e0 il vostro sito.<\/p>\n<p>Per integrare il modulo in un sito esistente, copiate e incollate l&#8217;HTML del modulo direttamente nella sezione desiderata del sito. Assicuratevi di includere le propriet\u00e0 CSS e il codice JavaScript associati per garantire uno stile e una funzionalit\u00e0 coerenti.<\/p>\n<p>In alternativa, dato che il modulo \u00e8 gi\u00e0 stato distribuito separatamente, potete fornire agli utenti l&#8217;URL &#8211; come un collegamento ipertestuale o un pulsante &#8211; da cliccare per accedere al modulo.<\/p>\n<p>Per testare la funzionalit\u00e0 del sito live, cliccate sull&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-un-url\/\">URL<\/a> 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&#8217;utente, mostri gli avvisi di errore quando necessario e invii i dati validi per un&#8217;ulteriore elaborazione.<\/p>\n<p>Dopo aver inviato il modulo, Getform vi reindirizzer\u00e0 a una pagina di conferma o di ringraziamento, indicando che l&#8217;invio \u00e8 andato a buon fine.<\/p>\n<figure id=\"attachment_172511\" aria-describedby=\"caption-attachment-172511\" style=\"width: 1259px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/confirmation-page.png\" alt=\"Pagina di conferma dell'invio del modulo di Getform con un link alla pagina precedente\" width=\"1259\" height=\"677\"><figcaption id=\"caption-attachment-172511\" class=\"wp-caption-text\">La pagina di conferma dell&#8217;invio del modulo di Getform.<\/figcaption><\/figure>\n<p>Per esaminare le risposte del modulo, accedete alla dashboard di Getform e visualizzate gli invii nella casella di posta in arrivo.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Ora che il modulo \u00e8 stato implementato con successo, le opportunit\u00e0 di personalizzarlo sono praticamente infinite. Ad esempio, potete migliorare il design e la funzionalit\u00e0 del modulo, modificandolo ulteriormente con i CSS o con il linguaggio del preprocessore che preferite e implementando tecniche di validazione avanzate.<\/p>\n<p>Oltre al servizio di Hosting di Siti Statici, Kinsta offre anche un servizio di <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni<\/a>, pensato per applicazioni pi\u00f9 dinamiche, come le applicazioni web che richiedono un&#8217;elaborazione lato server, interazioni con il database e altre funzionalit\u00e0 complesse.<\/p>\n<p>Con l&#8217;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.<\/p>\n<p><em>Ora potete trasformare il vostro sito statico in un&#8217;esperienza dinamica grazie ai servizi di gestione dei moduli. Quale servizio preferite o avete gi\u00e0 sperimentato? Condividetelo nei commenti qui sotto.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I siti web variano per design, scopo e complessit\u00e0, ma in genere possono essere statici o dinamici. I siti statici sono prerenderizzati e servono lo stesso &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76024,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25883],"class_list":["post-76023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-strumenti-di-sviluppo-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come implementare i moduli nei siti statici - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Trasforma il tuo sito statico in un&#039;esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come implementare i moduli nei siti statici\" \/>\n<meta property=\"og:description\" content=\"Trasforma il tuo sito statico in un&#039;esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T14:35:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T17:26:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Trasforma il tuo sito statico in un&#039;esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Come implementare i moduli nei siti statici\",\"datePublished\":\"2024-01-19T14:35:41+00:00\",\"dateModified\":\"2024-01-22T17:26:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\"},\"wordCount\":1849,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\",\"name\":\"Come implementare i moduli nei siti statici - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"datePublished\":\"2024-01-19T14:35:41+00:00\",\"dateModified\":\"2024-01-22T17:26:54+00:00\",\"description\":\"Trasforma il tuo sito statico in un'esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Strumenti di Sviluppo Web\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/strumenti-di-sviluppo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come implementare i moduli nei siti statici\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come implementare i moduli nei siti statici - Kinsta\u00ae","description":"Trasforma il tuo sito statico in un'esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/","og_locale":"it_IT","og_type":"article","og_title":"Come implementare i moduli nei siti statici","og_description":"Trasforma il tuo sito statico in un'esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.","og_url":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-01-19T14:35:41+00:00","article_modified_time":"2024-01-22T17:26:54+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Trasforma il tuo sito statico in un'esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"11 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Come implementare i moduli nei siti statici","datePublished":"2024-01-19T14:35:41+00:00","dateModified":"2024-01-22T17:26:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/"},"wordCount":1849,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/","url":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/","name":"Come implementare i moduli nei siti statici - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","datePublished":"2024-01-19T14:35:41+00:00","dateModified":"2024-01-22T17:26:54+00:00","description":"Trasforma il tuo sito statico in un'esperienza utente dinamica utilizzando un servizio di gestione dei moduli seguendo questa guida.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/how-to-implement-forms-in-static-sites.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/moduli-per-siti-statici\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Strumenti di Sviluppo Web","item":"https:\/\/kinsta.com\/it\/argomenti\/strumenti-di-sviluppo-web\/"},{"@type":"ListItem","position":3,"name":"Come implementare i moduli nei siti statici"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/76023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=76023"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/76023\/revisions"}],"predecessor-version":[{"id":76040,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/76023\/revisions\/76040"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/76023\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/76024"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=76023"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=76023"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=76023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}