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 set specifico di tag e attributi. Tutto ciò che non rientra in questo set viene rimosso automaticamente al rendering del tuo modulo, quindi non tutto l'HTML che scrivi apparirà sul sito. Le sezioni sottostanti elencano quali tag e attributi sono supportati e quali vengono sempre rimossi.

Prima di iniziare

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

• Il blocco HTML personalizzato è disponibile solo sui piani Klaviyo a pagamento. Questa funzionalità è in fase di implementazione graduale, quindi potresti non vederla ancora nel tuo account.
• Il tuo HTML viene igienizzato automaticamente per motivi di sicurezza. Il blocco HTML conserva solo i tag e gli attributi supportati e rimuove tutto il resto, compresi gli script e i gestori eventi, al momento del rendering del tuo modulo. Questo protegge i visitatori del tuo sito da codice dannoso. Di conseguenza, parte dell'HTML che hai scritto potrebbe non apparire sul sito se non è supportato. Consulta l'elenco di tag dell'assistenza qui di seguito.
• 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. Nel pannello blocchi, trova il blocco HTML e trascinalo sul tuo modulo dove desideri che appaia 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

L'editor di codice inizia a essere vuoto. Inserisci direttamente il tuo HTML, utilizzando solo i tag e gli attributi supportati. I tag e gli attributi non supportati vengono rimossi automaticamente al rendering del tuo modulo.

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">See terms and conditions</a></p>

Per applicare uno stile al tuo HTML, aggiungi i tuoi nomi class agli elementi e applica loro CSS personalizzati. Ad esempio, imposta class="promo-heading" sul titolo, poi applica lo stile a .promo-heading nell’editor CSS personalizzato. Consulta Come utilizzare CSS personalizzato nel modulo d'iscrizione per scoprire come abilitare e scrivere CSS personalizzato.

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 viene rimosso al rendering del tuo modulo.

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

Link (href) e sorgenti immagine (src) può utilizzare solo questi schemi di URL: http, https, mailto, tele percorsi relativi o #fragment ancora. URL che utilizzano qualsiasi altro schema (ad esempio javascript: o data:) vengono rimossi. Quando un link utilizza target="_blank", rel="noopener noreferrer" viene applicato automaticamente per proteggere il link.

Tag e attributi rimossi per motivi di sicurezza

Per proteggere il tuo sito e i tuoi visitatori, il blocco HTML rimuove automaticamente tutto ciò che potrebbe eseguire codice o dirottare il tuo modulo, una classe di attacco nota come cross-site scripting (XSS). I seguenti elementi vengono sempre rimossi, anche se sono comuni nell'HTML:

• Script: <script> e <noscript>
• 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 una parte del tuo codice scompare al rendering del modulo, è molto probabile che abbia utilizzato un tag o un attributo non presente nell'elenco supportato precedente.

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. Pubblica il tuo modulo su una pagina non rivolta al pubblico per verificare la sua visualizzazione sul sito.
4. Invia un'iscrizione di prova sul tuo modulo pubblicato per verificare che tutti gli input e i pulsanti funzionino ancora.
5. Pubblica il tuo modulo.

Modificare o rimuovere l'HTML personalizzato

Per modificare il tuo HTML, seleziona il blocco HTML e aggiorna il codice nelle relative impostazioni.

Per rimuovere l'HTML personalizzato, seleziona il blocco HTML ed eliminalo. In questo modo il blocco e il suo contenuto vengono rimossi dal tuo modulo, mentre il resto del modulo rimane invariato. Rimuovere il blocco è anche il modo più rapido per verificare se un problema di visualizzazione è causato dal tuo codice personalizzato.

Risoluzione dei problemi

Alcuni dei miei HTML non appaiono.
Il blocco HTML rimuove qualsiasi tag o attributo non supportato al momento del rendering del tuo modulo. Confronta il tuo codice con i tag e gli attributi supportati riportati sopra e conferma che non stai utilizzando un tag o un attributo rimosso per motivi di sicurezza.

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 solo sui piani a pagamento e viene implementato gradualmente. Se hai un piano a pagamento e non lo vedi ancora, torna tra qualche istante.

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é mi è stato rimosso un po' di codice?
Per motivi di sicurezza, il blocco HTML conserva solo i tag e gli attributi supportati ed elimina tutto il resto, come gli script e i gestori eventi, per evitare che sul tuo sito venga eseguito codice dannoso. Per motivi di sicurezza, consulta l'elenco di tag e attributi rimossi qui sopra.

Posso aggiungere un <script> o un altro JavaScript nel mio modulo?
No. Gli script e gli attributi del gestore eventi vengono sempre rimossi per proteggere i visitatori del tuo sito. Questo non può essere disattivato.

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.