Un modulo di contatto che esiste solo su una pagina standalone è un'opportunità mancata. I moduli di contatto più efficaci appaiono dove i visitatori già si trovano — su pagine di prodotto, articoli del blog, landing page, barre laterali e footer — senza richiedere ai visitatori di navigare prima su una pagina di contatto separata.
Questa guida tratta i due principali metodi di incorporamento (snippet JavaScript e iFrame), quando usare ciascuno e come implementarli correttamente sulle piattaforme web più comuni.
Due Metodi di Incorporamento: Snippet JS vs. iFrame
Snippet JavaScript (Consigliato per la Maggior Parte dei Casi)
Un embed JavaScript è un singolo tag <script> che incollate nel vostro HTML. Lo script viene eseguito nel browser del visitatore e renderizza il modulo in linea, adattandosi al layout della pagina.
Vantaggi:
- Può corrispondere ai caratteri e allo stile generale della pagina circostante
- Può essere inviato senza un ricaricamento completo della pagina (migliore UX)
- Può aumentare o ridurre l'altezza dinamicamente in base allo stato del modulo
- Può comunicare con la pagina principale (analisi, tracciamento delle conversioni)
- Generalmente più veloce da caricare rispetto a un iFrame perché non crea un contesto di navigazione separato
Limitazioni:
- Richiede che il sito host consenta script esterni (la maggior parte lo consente)
- JavaScript deve essere abilitato nel browser del visitatore
- Richiede test accurati per garantire che il modulo non entri in conflitto con gli script esistenti della pagina
iFrame
Un iFrame incorpora il modulo di contatto come una "finestra" separata all'interno della vostra pagina. Il modulo viene eseguito in un contesto completamente isolato.
Vantaggi:
- Nessun conflitto con il CSS o JavaScript del sito host — è completamente isolato
- Funziona su piattaforme che limitano gli script esterni (alcuni ambienti CMS)
- Non richiede JavaScript sulla pagina host
Limitazioni:
- L'altezza deve essere fissa o gestita con JavaScript; gli iFrame non si ridimensionano automaticamente in base al contenuto
- Lo stile è isolato — il modulo non eredita nessuno dei caratteri o dei colori della pagina principale a meno che non sia configurato nello strumento del modulo
- Alcuni tracciamenti analitici sono più difficili attraverso i confini degli iFrame
- Può apparire visivamente scollegato dalla pagina circostante
Quando usare iFrame:
- La piattaforma host limita gli script JavaScript esterni
- State incorporando su una piattaforma in cui i conflitti di script sono frequenti e difficili da correggere
- Il modulo viene incorporato in un'email o in un ambiente che non può eseguire JavaScript
Incorporamento su WordPress
Metodo 1: Blocco HTML con Snippet JS
Nell'editor a blocchi WordPress (Gutenberg):
- Cliccate + per aggiungere un nuovo blocco
- Cercate e selezionate HTML personalizzato
- Incollate il vostro codice embed JavaScript nel blocco
Funziona in modo affidabile per la maggior parte dei siti WordPress. Lo script viene eseguito quando la pagina si carica e renderizza il modulo al posto del blocco.
Importante: se il vostro sito WordPress utilizza un plugin di cache (WP Rocket, W3 Total Cache, ecc.), aggiungete la pagina del modulo all'elenco di esclusione della cache. Le pagine in cache potrebbero non eseguire correttamente gli script incorporati dopo un invio del modulo.
Metodo 2: Blocco iFrame
Nell'editor a blocchi:
- Aggiungete un blocco HTML personalizzato
- Incollate il codice iFrame:
<iframe src="https://vostromodulo.url" width="100%" height="600" frameborder="0"></iframe>
Regolate l'attributo height in base all'altezza effettiva del vostro modulo. Se il modulo ha errori di validazione che ne espandono l'altezza visibile, l'iFrame mostrerà una barra di scorrimento all'interno della finestra incorporata — che sembrerà difettosa. Testate tutti gli stati del modulo (vuoto, errore, successo) e impostate l'altezza sullo stato più alto.
Metodo 3: Area Widget o Footer
Per un modulo di contatto nel footer o nella barra laterale, usate un widget Testo:
- Andate su Aspetto → Widget
- Aggiungete un widget HTML personalizzato alla vostra barra laterale o footer
- Incollate il codice embed
Incorporamento su Webflow
Il componente embed nativo di Webflow supporta JavaScript:
- Nel designer di Webflow, trascinate un componente Embed sulla vostra pagina
- Cliccate sul componente e aprite l'editor di codice embed
- Incollate il vostro snippet JavaScript
- Cliccate Salva e chiudi
- Pubblicate la pagina
Per gli embed iFrame, si applica lo stesso procedimento — incollate il tag iFrame nel componente Embed.
Nota su Webflow: la modalità di anteprima di Webflow all'interno del designer potrebbe non eseguire gli script esterni. Pubblicate sul vostro dominio di staging o produzione per testare il modulo.
Incorporamento su Squarespace, Wix e Costruttori Simili
La maggior parte dei costruttori di siti web dispone di un blocco "codice personalizzato" o "embed HTML":
- Squarespace: aggiungete un blocco Codice a qualsiasi pagina e incollate lo snippet embed
- Wix: inserite un elemento HTML iframe (tramite Aggiungi → Incorpora → HTML iframe) e incollate il vostro codice iFrame o JS
- Showit: usate un widget HTML nel canvas di design
Nota su Wix: il contenitore embed di Wix è tecnicamente un iFrame anche quando incollate uno snippet JavaScript. Gli script esterni all'interno di un embed HTML di Wix vengono eseguiti in un contesto iframe isolato. Ciò significa che il modulo funzionerà, ma l'integrazione analitica tra pagine è limitata.
Incorporamento su un Sito Web HTML Personalizzato
Per siti HTML/CSS semplici o siti costruiti con un generatore statico (Hugo, Jekyll, Eleventy):
Snippet JavaScript: incollate il tag <script> appena prima di </body> su qualsiasi pagina dove volete che appaia il modulo. Aggiungete un <div id="contact-form"></div> segnaposto dove il modulo dovrebbe renderizzarsi se lo script necessita di un elemento target.
iFrame: incollate il tag <iframe> direttamente nell'HTML della pagina nella posizione dove dovrebbe apparire il modulo.
Considerazioni sulle Prestazioni di Caricamento
Un modulo di contatto incorporato non dovrebbe rallentare la vostra pagina. Verificate:
Caricamento asincrono: il tag script dovrebbe includere l'attributo async in modo da non bloccare il rendering del contenuto principale della pagina.
<script src="https://cdn.example.com/form.js" data-key="your-key" async></script>
Lazy loading: per i moduli below the fold, alcuni sistemi embed supportano il lazy loading — lo script del modulo non si carica finché il visitatore non scorre nelle vicinanze del modulo. Questo migliora il tempo di caricamento iniziale della pagina.
Distribuzione CDN: il JavaScript del modulo dovrebbe essere servito da una rete di distribuzione dei contenuti (CDN) con punti edge globali, in modo che il tempo di caricamento sia rapido per i visitatori indipendentemente dalla loro posizione.
Tracciamento delle Conversioni Dopo l'Incorporamento
Se utilizzate Google Analytics, Meta Pixel o un altro strumento analitico, configurate il tracciamento degli invii del modulo in modo che si attivi quando il modulo incorporato viene inviato con successo.
Per gli embed JavaScript, il provider del modulo dovrebbe supportare una callback o un evento che si attiva all'invio riuscito:
// Esempio — la sintassi effettiva varia a seconda del provider
onContactFormSubmit(function() {
gtag('event', 'contact_form_submit', { event_category: 'engagement' });
});
Per gli embed iFrame, usate window.postMessage per comunicare l'evento di invio dall'iFrame alla pagina principale, quindi attivate l'evento analitico sulla pagina principale. Questo è tecnicamente più complesso — verificate se il vostro provider di moduli lo supporta in modo nativo.
Testare il Vostro Modulo Incorporato
Prima di pubblicare, testate:
- Invio vuoto — confermate che la validazione dei campi obbligatori si attivi correttamente
- Email non valida — confermate che il campo email mostri un errore di validazione
- Invio riuscito — confermate che lo stato di successo appaia e che l'invio venga ricevuto
- Mobile — aprite la pagina su un telefono reale e testate i target di tocco, il comportamento della tastiera e lo scorrimento del modulo
- Con la cache abilitata — se il vostro sito utilizza una cache, testate che il modulo funzioni su un caricamento di pagina in cache
- Con un'estensione del browser — alcuni blocchi di annunci bloccano gli script esterni; testate in un profilo browser pulito
Come Nura24 Fornisce l'Incorporamento dei Moduli di Contatto
Il modulo di pagina contatti di Nura24 genera sia uno snippet embed JavaScript che un codice embed iFrame dal dashboard, pronti da incollare su qualsiasi sito web senza programmazione. Lo script widget si carica in modo asincrono ed è servito da un CDN. Le impostazioni visive — colore, carattere, raggio del bordo, modalità scura/chiara — vengono configurate nel dashboard di Nura24 e applicate automaticamente al modulo incorporato, quindi aggiornare il brand in un posto lo aggiorna ovunque il modulo sia incorporato. Gli invii vengono instradati al sistema di ticketing Nura24 e attivano facoltativamente notifiche email agli agenti ed email di risposta automatica al visitatore.