---
title: "Impostazioni di interazione dei Pop-up personalizzati"
description: "Configura campi di input HTML personalizzati, pulsanti di invio e pulsanti di chiusura per raccogliere i dati dei contatti e monitorare le prestazioni dei Pop-up."
url: https://help.user.com/it/articles/262-impostazioni-di-interazione-dei-pop-up-personalizzati
collection: "Pop-up"
updated: 2026-10-28
language: it
alternates: [en, pl, fr, de, es]
---

# Impostazioni di interazione dei Pop-up personalizzati

Configura campi di input HTML personalizzati, pulsanti di invio e pulsanti di chiusura per raccogliere i dati dei contatti e monitorare le prestazioni dei Pop-up.

Creare Pop-up con HTML personalizzato offre al tuo team completa libertà creativa per adattarli esattamente alle linee guida del tuo brand e ai requisiti di design. Se preferisci un'alternativa visiva e senza codice, puoi progettare i Pop-up utilizzando il [visual builder](https://help.user.com/en/articles/150-how-to-create-a-pop-up.md) in "Website Experience".

Quando utilizzi HTML personalizzato, seguire le regole di interazione descritte in questa guida garantisce che i dettagli dei contatti vengano mappati correttamente nel tuo workspace e che le statistiche sulle prestazioni del tuo Pop-up (comprese le interazioni mostrate, cliccate e inviate) vengano registrate con precisione.

## Configurare i campi di input

I campi di input di base nei Pop-up raccolgono i dettagli essenziali dei contatti, come nomi, indirizzi email o numeri di telefono. Per garantire una corretta mappatura dei dati in Positive User, l'attributo `name` di ogni campo di input deve corrispondere al nome del campo del contatto associato. Positive User supporta campi standard come "First name", "Last name" e "Phone number", oltre a campi personalizzati definiti per esigenze specifiche di business come consensi marketing o statistiche e-commerce. Specificare il tipo di campo (come `text`, `email` o `number`) e aggiungere un testo segnaposto descrittivo guida i contatti e garantisce una raccolta dati accurata.

### Configurare i campi di input obbligatori

I campi di input obbligatori garantiscono che i contatti forniscano informazioni essenziali prima di inviare un form del Pop-up. Includi l'attributo `required` nell'elemento input per abilitare la validazione a livello di browser, invitando i contatti a completare il campo prima dell'invio. Abbinare questo a un testo segnaposto o a etichette chiare ne migliora l'usabilità.

Esempio: input obbligatorio

```javascript
<input type="email" name="email" placeholder="Enter your email address" required>
```

In questo esempio:

-   `type="email"` garantisce che l'input venga validato come indirizzo email.
    
-   `name="email"` mappa il campo all'attributo email del contatto nel tuo workspace Positive User.
    
-   `"required"` garantisce che il campo debba essere compilato prima dell'invio del form.
    
-   `placeholder="Enter your email address"` guida il contatto.
    

### Configurare i campi di input facoltativi

I campi di input facoltativi completano quelli obbligatori consentendo ai contatti di fornire dati aggiuntivi non obbligatori. Per configurare un campo facoltativo, includi l'attributo `name` per la mappatura dei dati, ma ometti l'attributo `required`.

Esempio: configurazione di campi di input obbligatori e facoltativi

```javascript
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">
```

In questo esempio:

-   L'input "email" è obbligatorio perché include l'attributo `required`.
    
-   L'input "first name" è facoltativo perché l'attributo `required` è omesso.
    
-   `name="email"` e `name="first_name"` garantiscono che i dati vengano mappati sui campi corretti in Positive User.
    

### Configurare gli input con singola casella di controllo

Una singola casella di controllo viene spesso utilizzata per scelte binarie, come concedere un consenso. Utilizza `<input type="checkbox">` e mappa l'attributo `name` al campo del contatto in Positive User. Quando la casella viene selezionata, il valore "true" viene inviato a Positive User. Racchiudere l'input in un tag `<label>` rende il testo cliccabile e migliora l'usabilità.

Esempio: casella di controllo per il consenso alla newsletter

```javascript
<label>
  <input type="checkbox" name="newsletter_consent">
  I agree to receive the newsletter.
</label>
```

In questo esempio:

-   `type="checkbox"` crea una singola casella di controllo.
    
-   `name="newsletter_consent"` mappa l'input al campo del contatto "newsletter\_consent".
    
-   `<label>` rende il testo cliccabile, migliorando l'usabilità.
    

### Configurare i campi a scelta multipla

Gli input a scelta fissa consentono ai contatti di selezionare una o più opzioni predefinite da un elenco, ideali per raccogliere dati su interessi o preferenze di comunicazione. Utilizza più elementi `<input type="checkbox">` che condividono lo stesso attributo `name`, in modo che tutti i valori selezionati vengano mappati su quell'unico campo del contatto. Prima di aggiungerli al codice, vai su "Workspace Settings" → "Attributes" per [creare il campo personalizzato](https://help.user.com/en/articles/38-how-to-create-a-custom-attribute.md) e definirne le opzioni. Il valore dell'attributo nel tuo HTML deve corrispondere esattamente al nome dell'opzione creata nelle impostazioni del workspace.

Esempio: configurazione di input a scelta multipla

```javascript
<p>What topics are you interested in?</p>

<label>
  <input type="checkbox" name="interests" value="product_updates">
  Product Updates
</label>
<br>
<label>
  <input type="checkbox" name="interests" value="monthly_newsletter">
  Monthly Newsletter
</label>
<br>
<label>
  <input type="checkbox" name="interests" value="special_offers">
  Special Offers
</label>
```

In questo esempio:

-   `type="checkbox"` crea una casella selezionabile per ciascuna opzione.
    
-   `name="interests"` è uguale per tutti e tre gli input. Questo li raggruppa, garantendo che tutti i valori selezionati vengano salvati nel campo del contatto "Interests".
    
-   `value="..."` specifica il testo univoco che verrà salvato per ciascuna opzione quando viene selezionata. Importante: i valori forniti nell'attributo `value` (ad esempio "product\_updates") devono essere stati creati in precedenza come opzioni per il corrispondente campo personalizzato (ad esempio "Interests") all'interno del tuo workspace. Il valore nell'HTML deve corrispondere esattamente all'opzione creata nell'app.
    
-   L'elemento `<label>` migliora l'usabilità consentendo ai contatti di cliccare sul testo per selezionare la casella di controllo corrispondente.
    

## Configurare i pulsanti di invio

Configura i pulsanti di invio per elaborare le sottomissioni dei form e raccogliere statistiche importanti sulle prestazioni del tuo Pop-up.

### Configurare le sottomissioni standard dei form

Assegna `id="submitButton"` a un elemento pulsante all'interno del tuo tag `<form>`. Questo ID specifico è fondamentale per attivare il reindirizzamento e per raccogliere le statistiche di invio del Pop-up in Positive User. Permette di validare gli input, mappare i campi, monitorare le statistiche di invio e avviare workflow automatizzati.

Esempio: form con input e pulsante di invio

```javascript
<form>
  <input type="email" name="email" placeholder="Enter your email address" required>
  <button id="submitButton">Submit</button>
</form>
```

### Configurare le sottomissioni con reindirizzamento

Configura un pulsante di invio che reindirizzi i contatti a un'altra pagina utilizzando un tag anchor `<a>` con `id="submitButton"`. Questo ID specifico è fondamentale perché attiva il reindirizzamento consentendo al contempo a Positive User di raccogliere le statistiche di invio del Pop-up. Utilizza l'attributo `href` nel tag `<a>` per specificare l'URL di destinazione, rendendo questa configurazione ideale per indirizzare i contatti a pagine di ringraziamento o offerte speciali dopo il clic.

Se il tuo pulsante include elementi annidati complessi (come testo stilizzato o immagini), assicurati che solo il tag `<a>` stesso riceva l'evento clic. Applica `pointer-events: none;` tramite CSS a tutti gli elementi all'interno del tag `<a>` per evitare che gli elementi interni blocchino il reindirizzamento o il tracciamento dei clic.

Esempio: configurazione di un pulsante di reindirizzamento con elementi annidati

```javascript
<a id="submitButton" href="https://example.com/thank-you">
  <b>Click here to continue</b>
  <img src="https://example.com/image.png" alt="Submit" onerror="this.style.display='none'">
</a>
<style>
  #submitButton * {
    /* This prevents any element inside the link from capturing the click event. */
    pointer-events: none;
  }
</style>
```

## Configurare i pulsanti di chiusura

Consenti ai contatti di chiudere i Pop-up in modo pulito senza inviare dati.

### Abilitare la chiusura tramite attributi

Aggiungi l'attributo `data-dismiss="true"` a qualsiasi elemento HTML valido, come un'icona di chiusura `<span>` o `<svg>`. Cliccando su questo elemento si segnala a Positive User di chiudere il Pop-up e di tracciare l'azione di chiusura.

Esempio: configurazione di un pulsante di chiusura

```javascript
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">&times;</span>
```

### Configurare la chiusura tramite clic sull'overlay

Per impostazione predefinita, l'overlay (l'area di sfondo esterna al contenuto del Pop-up) può anch'esso chiudere il Pop-up. Tuttavia, se un contatto clicca accidentalmente all'interno del Pop-up e il suo clic finisce sull'area dell'overlay all'interno dell'iframe, può chiuderlo involontariamente. Per evitarlo, puoi aggiungere uno script che garantisca che solo i clic diretti sullo sfondo dell'overlay attivino un'azione di chiusura.

```javascript
// Handle overlay clicks to close popup
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
    // Only close if clicking directly on the overlay background
    if (event.target === this) {
        // Find and click the close button to trigger User.com's close function
        const closeBtn = document.querySelector('[data-dismiss="true"]');
        if (closeBtn) {
            closeBtn.click();
        }
    }
});
```

### Nota importante

L'unico metodo valido per chiudere un Pop-up in Positive User è utilizzare l'attributo `data-dismiss="true"`. Non devi mai scrivere JavaScript personalizzato per nascondere manualmente il Pop-up.

Poiché il Pop-up viene visualizzato all'interno di un `<iframe>` che copre l'intera pagina, utilizzare codice personalizzato per nascondere il contenuto del Pop-up lo renderà semplicemente invisibile. L'`<iframe>` stesso rimarrà attivo, coprendo la pagina sottostante e bloccando tutti i clic. Si tratta di un errore critico che può rendere il tuo sito web inutilizzabile per i visitatori.

## Articoli correlati

-   [Come creare un Pop-up](https://help.user.com/en/articles/150-how-to-create-a-pop-up.md)
    
-   [Statistiche dei Pop-up](https://help.user.com/en/articles/222-pop-up-statistics.md)