Crea e incorpora moduli di iscrizione

Published: 16 luglio 2026 · Last updated: 21 luglio 2026 · By Marcus Biel

Un modulo incorporato viene inserito direttamente all'interno di una pagina esistente del tuo sito web. Rimane parte del contenuto circostante invece di apparire al di sopra di esso.

I moduli incorporati sono ideali per articoli del blog, landing page sul tuo sito web, sezioni dedicate alle newsletter, barre laterali e piè di pagina. La posizione in cui aggiungi il codice del modulo determina dove verrà visualizzato.

Questa guida illustra i passaggi specifici dei moduli incorporati. Le funzioni comuni di modifica visiva sono spiegate nella guida principale al generatore di moduli di iscrizione.

Creazione di un modulo incorporato

Apri “Signup Forms”, fai clic su “Create Form” e seleziona “Embedded Form”. Inserisci un nome interno chiaro e prosegui nel generatore.

Puoi anche modificare un modulo esistente facendo clic sul suo nome nella panoramica dei moduli di iscrizione.

Il nome interno non viene visualizzato automaticamente dai visitatori. Assegna al modulo un nome che ne indichi la posizione o lo scopo, ad esempio “Newsletter homepage”, “Piè di pagina del blog” o “Aggiornamenti sui prodotti”.

Scelta di un design di partenza

I moduli incorporati offrono un modulo vuoto, un modulo standard e quattro template progettati:

• Nota tranquilla
• Striscia coupon
• Editoriale scuro
• Blu minimale

Scegli il design che si abbina meglio allo spazio e al tono del sito web in cui verrà visualizzato il modulo. Ogni design di partenza può essere modificato completamente dopo la selezione.

Progettazione del modulo incorporato

Usa “Layout” e “Content” per organizzare il modulo. Un modulo incorporato può contenere il modulo di iscrizione insieme a testo di supporto, immagini, elenchi, pulsanti, link social, un contatore degli iscritti, spaziatori o divisori.

Per una barra laterale o un piè di pagina stretti, un design a una colonna è generalmente più facile da leggere. In una sezione più ampia della pagina, un layout a due colonne può posizionare una breve spiegazione o un'immagine accanto ai campi.

Seleziona il blocco del modulo di iscrizione per scegliere i campi degli iscritti, i campi obbligatori, le etichette, i tag nascosti, un indicatore di avanzamento e un contatore degli iscritti opzionale. Puoi quindi definire separatamente lo stile del contenitore del modulo, dei campi e del pulsante di invio.

Apri “Page settings” per modificare lo sfondo e le impostazioni predefinite del design generale della tela del modulo incorporato. Tieni conto del sito web circostante. Uno sfondo trasparente o semplice spesso si integra in modo più naturale, mentre uno sfondo a contrasto aiuta a mettere in risalto l'offerta di iscrizione.

Le istruzioni complete per layout, contenuti, livelli, campi, tag, tipografia e aspetto sono disponibili in Utilizzo del generatore di moduli di iscrizione.

Collegamento del flusso di iscrizione

Usa il controllo del flusso di iscrizione nell'intestazione del generatore per verificare cosa accade dopo l'invio, quale email Double Opt-in viene inviata e cosa vede il visitatore dopo la conferma.

Puoi selezionare un flusso esistente, modificare quello assegnato o crearne uno nuovo. Se il flusso selezionato è condiviso con altri moduli, ricorda che modificarlo può avere effetto anche su tali moduli.

Anteprima e salvataggio

Fai clic su “Preview” per esaminare il modulo completo prima di inserirlo nel tuo sito web. Controlla l'ordine dei campi, le etichette, lo spazio per gli errori, il testo del pulsante e la quantità di contenuti di supporto.

Fai clic su “Save changes” per salvare la versione corrente. Torna alla panoramica dei moduli di iscrizione quando sei pronto a incorporarlo.

Attivazione del modulo

Il modulo incorporato deve essere attivo prima di poter utilizzare il relativo codice pubblico.

Se il modulo è inattivo, apri il menu delle azioni con tre puntini nella panoramica dei moduli di iscrizione e scegli “Activate”. Un modulo attivo mostra l'azione “Show Code Snippet”.

Disattiva il modulo quando non deve più essere disponibile sul tuo sito web. La disattivazione mette il modulo offline senza eliminare il design o i dati dei report precedenti.

Copia del codice JavaScript

Fai clic su “Show Code Snippet” e apri la scheda “JavaScript”. Maildroppa fornisce uno script breve contenente l'ID univoco del modulo.

Il codice segue questa struttura:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Copia il codice completo senza modificare l'indirizzo dello script o l'ID del modulo.

L'opzione JavaScript carica il modulo salvato corrente tramite il runtime dei moduli Maildroppa. Quando in seguito modifichi e salvi lo stesso modulo in Maildroppa, lo snippet esistente continua a fare riferimento a quell'ID del modulo. Non è necessario creare un nuovo modulo solo per modificarne il testo o il design.

Aggiunta del modulo al tuo sito web

Incolla lo script nella posizione della pagina in cui deve apparire il modulo incorporato.

I passaggi esatti dipendono dal sistema del tuo sito web. In un page builder o in un sistema di gestione dei contenuti, usa un blocco che accetti HTML o codice script personalizzato. In un sito web personalizzato, aggiungi lo script al template o al markup della pagina pertinente.

Alcuni editor di siti web rimuovono i tag script per motivi di sicurezza. Se il modulo non appare dopo la pubblicazione della pagina, verifica innanzitutto che l'editor abbia conservato lo script Maildroppa completo. Potrebbe essere necessario usare l'area dedicata al codice personalizzato del sistema o chiedere assistenza alla persona che gestisce il sito web.

Non incollare più volte lo stesso snippet di un modulo incorporato nella stessa pagina, a meno che tu non voglia intenzionalmente visualizzare lo stesso modulo in più posizioni e abbia testato questa configurazione.

Utilizzo della scheda HTML

La scheda “HTML” fornisce il markup generato del modulo. Questa opzione è pensata per implementazioni personalizzate in cui vuoi lavorare direttamente con l'HTML visualizzato.

Se scegli questo metodo, copia il markup completo. Poiché un'integrazione HTML personalizzata può essere influenzata dagli stili e dall'implementazione del tuo sito web, testa attentamente i campi, la convalida, l'invio e il flusso di conferma.

Per il normale modulo gestito da Maildroppa, lo snippet JavaScript è l'integrazione più breve e carica la configurazione pubblica corrente del modulo tramite il relativo ID.

Test del modulo incorporato

Pubblica o visualizza in anteprima la pagina del sito web che contiene il codice. Quindi testa il modulo come farebbe un visitatore:

1. Verifica che il modulo appaia nella posizione corretta.
2. Visualizza la pagina su uno schermo ampio e su uno stretto.
3. Compila tutti i campi obbligatori.
4. Invia il modulo ed esamina la risposta.
5. Apri l'email Double Opt-in.
6. Conferma l'indirizzo ed esamina la risposta finale.
7. Verifica che l'iscritto e gli eventuali tag nascosti siano visualizzati correttamente in Maildroppa.

Se il modulo è più largo del contenitore del sito web, modifica nel generatore la larghezza del modulo, il layout delle colonne, la spaziatura interna o le impostazioni di disposizione su dispositivi mobili. Evita di risolvere i problemi di layout modificando il codice Maildroppa generato.

Aggiornamento di un modulo incorporato

Apri lo stesso modulo in Maildroppa, apporta le modifiche, visualizzale in anteprima e fai clic su “Save changes”. Lo snippet JavaScript sul tuo sito web continua a usare lo stesso ID del modulo e carica la configurazione pubblica salvata.

Se il modulo deve essere rimosso temporaneamente, disattivalo dalla panoramica dei moduli di iscrizione. Se non è più necessario, rimuovi anche lo snippet dal sito web, così la pagina non conterrà codice inutilizzato.