Come utilizzare il blocco HTML personalizzato nei moduli d'iscrizione

Cosa imparerai

Scopri come utilizzare il blocco HTML personalizzato per aggiungere il tuo markup ai moduli d'iscrizione di Klaviyo, andando oltre i blocchi disponibili nell'editor dei moduli. Il blocco HTML ti offre un controllo preciso sul contenuto e sul layout, ovvero intestazioni personalizzate, testo formattato, elenchi, tabelle, immagini e link, in modo che i tuoi moduli possano corrispondere esattamente al tuo brand e alla tua messaggistica.

Per motivi di sicurezza, il blocco HTML supporta solo un insieme specifico di tag e attributi. L'HTML non supportato impedisce il salvataggio delle modifiche e l'editor mostra un errore che spiega cosa correggere. Le sezioni seguenti elencano i tag e gli attributi supportati ed esempi comuni che non sono consentiti.

Prima di iniziare

Prima di utilizzare l'HTML personalizzato, tieni presente quanto segue:

• Il blocco HTML personalizzato è disponibile solo con i piani a pagamento di Klaviyo.
• Il tuo HTML viene controllato per motivi di sicurezza prima di essere salvato. Tag e attributi non supportati, inclusi script e gestori di eventi, impediscono il salvataggio delle modifiche. Queste restrizioni proteggono chi visita il tuo sito da codice dannoso. Controlla i tag e gli attributi supportati qui sotto e correggi eventuali errori mostrati nell'editor.
• Il blocco HTML personalizzato aggiunge solo nuovi contenuti. Il blocco HTML ti consente di aggiungere i tuoi elementi a un modulo. Non puoi utilizzarlo per modificare l'HTML dei blocchi esistenti del tuo modulo.
• L'assistenza di Klaviyo non può risolvere i problemi relativi al codice personalizzato. I problemi causati dall'HTML personalizzato (ad esempio, layout frammentati, contenuti che non vengono visualizzati, problemi di stile) sono di tua responsabilità per quanto riguarda il debug e la risoluzione. Se un modulo con HTML personalizzato non viene visualizzato o non si comporta correttamente, rimuovi prima il blocco HTML per verificare se la causa è il tuo codice.
• Testa prima di pubblicare. L'HTML personalizzato può influire sul layout e sull'usabilità del modulo. Prima della pubblicazione, visualizza sempre l'anteprima e testa il tuo modulo sia su desktop che su mobile.

Aggiungi un blocco HTML al tuo modulo

Per aggiungere un HTML personalizzato a un modulo:

1. Vai ai moduli d'iscrizione e apri il tuo modulo nell'editor.
2. Seleziona Aggiungi blocchi, trova il blocco HTML e trascinalo nel modulo nel punto in cui vuoi che venga visualizzato il contenuto personalizzato.

3. Seleziona il blocco HTML per aprirne le impostazioni. Nella barra laterale del blocco appare un editor di codice.

Il blocco HTML funziona come qualsiasi altro blocco nell'editor di moduli: puoi aggiungerne più di uno, riposizionarli ed eliminarli. L'HTML personalizzato è contenuto nel suo blocco, quindi non influisce sul resto della struttura del tuo modulo.

Scrivi il tuo HTML

Sostituisci l'HTML segnaposto nell'editor di codice con il tuo HTML, utilizzando solo tag e attributi supportati. Le modifiche vengono salvate automaticamente. Se l'editor mostra un errore, correggi i contenuti non supportati prima di continuare.

Esempio

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank" rel="noopener noreferrer">See terms and conditions</a></p>

Gli attributi style in linea e i tag <style> non sono supportati. Per applicare uno stile al tuo HTML, aggiungi i tuoi nomi class agli elementi e selezionali con CSS personalizzato. Ad esempio, imposta class="promo-heading" nel titolo, quindi applica uno stile a .promo-heading nell'editor CSS personalizzato. Consulta Come usare i CSS personalizzati nei moduli d'iscrizione per scoprire come abilitare e scrivere CSS personalizzati.

Attributi e tag HTML supportati

Per motivi di sicurezza, il blocco HTML supporta i seguenti tag e attributi. Qualsiasi tag o attributo non presente in questo elenco impedisce il salvataggio delle modifiche.

Attributi globali: sono consentiti in tutti i tag supportati: id, class, dir, lang, rolee aria-* (attributi di accessibilità).

Le tabelle seguenti elencano gli attributi aggiuntivi consentiti su tag specifici, oltre agli attributi globali di cui sopra.

Testo e formattazione

Intestazioni

Elenchi

Tabelle

Media e link

Schemi URL consentiti

I link (href) e le origini delle immagini (src) possono usare solo questi schemi URL: http, https, mailto, tel e percorsi relativi o ancore #fragment. Gli URL che usano qualsiasi altro schema (come javascript: o data:) impediscono di salvare le modifiche. Quando un link usa target="_blank", aggiungi rel="noopener noreferrer" per mantenere il link sicuro.

Tag e attributi HTML non supportati

Per proteggere le persone che visitano il tuo sito da codice dannoso, il blocco HTML rifiuta tag, attributi e URL non supportati durante il salvataggio. I seguenti elementi non sono consentiti, anche se sono comuni in HTML:

• Script: <script> e <noscript>
• Controlli del modulo: <form>, <input>, <button>, <select> e <textarea>. Usa i blocchi standard di input e pulsante dell’editor per raccogliere le iscrizioni.
• Attributi del gestore eventi: qualsiasi attributo il cui nome inizia con on (ad esempio onclick, onload, onerror, onmouseover)
• Cornici e incorporati: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Tag vettoriali e in linguaggio markup: <svg>, <math>
• Tag dei documenti e delle risorse: <base>, <meta>, <link>e <style> tag
• Schemi URL pericolosi in link o fonti: javascript:, vbscript:, data:, filesystem:
• Attributi di sostituzione dell'invio del modulo: formaction, formmethod, formtarget, formenctype
• Tag storici o obsoleti: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Se le modifiche non possono essere salvate, usa il messaggio di errore per individuare e rimuovere o sostituire il tag, l'attributo o l'URL non supportato. Prima di continuare, verifica che il tuo codice sia conforme all'elenco supportato sopra.

Anteprima e pubblicazione

Dopo aver scritto il tuo HTML:

1. Utilizza l'anteprima dell'editor per controllare l'aspetto del tuo modulo.
2. Verifica il tuo modulo sia su desktop che su mobile, poiché l'HTML personalizzato può influenzare ognuno in modo diverso.
3. Per un modulo con targeting URL, limitane la visualizzazione alla tua pagina di test prima di pubblicarlo. Apri Targeting e comportamento di visualizzazione > Targeting. In URL, attiva Mostra solo su determinati URL, scegli Corrispondenza esatta e sostituisci eventuali URL consentiti esistenti con l’URL completo della pagina di test.
4. Pubblica il modulo su una pagina non pubblica per verificare come viene visualizzato sul sito. Clicca su Pubblica o programma, seleziona Pubblica ora, poi clicca su Pubblica ora. Risolvi eventuali avvisi di blocco prima di pubblicare.
5. Invia un'iscrizione di prova sul tuo modulo pubblicato per verificare che tutti gli input e i pulsanti funzionino ancora.
6. Ripristina le impostazioni di targeting previste, quindi usa Pubblica o pianifica e Pubblica ora per pubblicare il tuo modulo per il tuo pubblico.

Modificare o rimuovere l'HTML personalizzato

Per modificare l'HTML, seleziona il blocco HTML e aggiorna il codice nelle relative impostazioni. Visualizza in anteprima le modifiche, poi pubblicale per aggiornare il modulo attivo.

Per rimuovere l'HTML personalizzato, seleziona il blocco HTML ed eliminalo. In questo modo rimuovi il blocco e i suoi contenuti dal modulo; il resto del modulo non viene modificato. Rimuovere il blocco è anche il modo più rapido per verificare se un problema di visualizzazione è causato dal tuo codice personalizzato. Pubblica la modifica per rimuovere il blocco dal modulo live.

Risoluzione dei problemi

Le modifiche HTML non vengono salvate.
Leggi l’errore nelle impostazioni del blocco HTML. Rimuovi o sostituisci il tag, l’attributo o l’URL non supportato, quindi conferma che l’errore scompaia. Seleziona Scopri di più sui tag consentiti nel messaggio di errore per controllare l’elenco dei tag supportati.

Il mio modulo sembra rotto.
Controlla il tuo HTML per individuare i tag non chiusi o non corrispondenti e le regole di layout che riposizionano o si sovrappongono ad altri blocchi. Poiché il tuo codice si trova nel suo blocco, puoi eliminare il blocco HTML per confermare che è la causa, quindi aggiungerlo nuovamente e testare modifiche di minore entità.

Lo stile non viene applicato al mio HTML.
Verifica che i nomi di class nel tuo HTML corrispondano ai selettori nel tuo CSS personalizzato, che il CSS personalizzato sia attivato e che tu abbia pubblicato la versione più recente del modulo. Consulta Come usare CSS personalizzati nel modulo d'iscrizione.

Non vedo il blocco HTML.
L’HTML personalizzato è disponibile nei piani Klaviyo a pagamento. Verifica che il tuo account abbia un piano a pagamento, quindi cerca HTML in Aggiungi blocchi nell’editor del modulo.

Domande frequenti

Posso modificare l'HTML dei blocchi esistenti del mio modulo?
No. Il blocco HTML ti consente di aggiungere nuovi contenuti personalizzati a un modulo. Non modifica l'HTML dei blocchi esistenti del tuo modulo.

Perché non posso salvare HTML non supportato?
Klaviyo rifiuta l’HTML non supportato per proteggere i visitatori del tuo sito da codice dannoso. Rimuovi tag e attributi non supportati, come script e gestori di eventi, e sostituisci gli URL non sicuri prima di continuare. Vedi gli esempi HTML non supportati qui sopra.

Posso aggiungere un <script> o altro JavaScript al mio modulo?
No. Gli script e gli attributi del gestore di eventi non sono consentiti e l’HTML che li contiene non può essere salvato. Questa limitazione protegge chi visita il tuo sito e non può essere disattivata.

Posso applicare lo stile al mio blocco HTML?
Sì. Aggiungi i tuoi nomi class agli elementi HTML e selezionali con CSS personalizzato. Consulta Come utilizzare CSS personalizzato nel modulo d'iscrizione.

L'assistenza di Klaviyo mi aiuterà a scrivere o correggere il mio HTML?
No. L'assistenza di Klaviyo non può scrivere, rivedere o risolvere i problemi relativi al codice personalizzato. Se un modulo con HTML personalizzato presenta un problema, ti verrà chiesto di rimuovere il blocco HTML per escluderlo prima che l'assistenza possa indagare ulteriormente.