### [Come accodare un foglio di stile per i moduli conversazionali](https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/)
**Pubblicato:** 4 dicembre 2020
**Autore:** Team editoriale
**Estratto:** Questo tutorial ti mostrerà come accodare un foglio di stile per qualsiasi modulo con i moduli conversazionali abilitati.
**Contenuto:**
Vuoi accodare il tuo foglio di stile per il componente aggiuntivo **Moduli Conversazionali**? Puoi aggiungere il tuo CSS utilizzando uno di questi metodi da [questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms"), ma sapevi che puoi anche usare un filtro per accodare un foglio di stile dedicato per i tuoi moduli conversazionali. Questo metodo può renderlo molto più semplice per scopi organizzativi e in questo tutorial ti mostreremo come accodare un foglio di stile dedicato per questi moduli.
## Creazione del tuo modulo conversazionale
Per prima cosa, dovrai creare un modulo conversazionale e aggiungere i tuoi campi. Se hai bisogno di aiuto per farlo, [rivedi questa documentazione](https://wpforms.com/docs/how-to-install-and-use-the-conversational-forms-addon/ "Come installare e utilizzare il componente aggiuntivo Moduli Conversazionali").
## Personalizzazione del modulo conversazionale
Una volta creato il tuo modulo conversazionale, ai fini di questo tutorial, aggiungeremo del testo al campo **Messaggio** nella scheda **Modulo Conversazionale**. Questo è un messaggio che i tuoi visitatori vedranno non appena il modulo verrà caricato.
Puoi aggiungere ciò di cui hai bisogno, ma noi aggiungeremo del testo, un link e un elenco non ordinato con quanto segue.
`Stai per completare un modulo d'ordine per il pacchetto tema 3. Per rivedere i termini e le condizioni, fai clic qui. Che include, ma non è limitato a: Tema 1 Tema 2 Tema 3 Plugin gratuito 1 Plugin gratuito 2 Plugin gratuito 3`
## Accodamento di un foglio di stile per i moduli conversazionali
Prima di poter accodare il nostro foglio di stile per i moduli conversazionali, dobbiamo prima aggiungere questo snippet di codice che lo consentirà.
Se hai bisogno di aiuto per aggiungere codice al tuo sito, [rivedi questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzati per WPForms").
```
/**
* Accoda il tuo foglio di stile per i moduli conversazionali
*
* @link https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/
*/
function wpfdev_convoform_custom_css() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}
add_action( 'wpforms_conversational_forms_enqueue_styles', 'wpfdev_convoform_custom_css', 10 );
```
## Creazione e caricamento del foglio di stile nella directory del tuo tema
Una volta aggiunto il codice, ora devi creare il tuo file CSS.
Ecco alcuni stili CSS di base che abbiamo utilizzato per questo tutorial
```
.wpforms-title {
color: #e27730!important;
font-size: 36px !important;
}
.wpforms-description {
line-height: 1.6em;
text-align: left;
white-space: normal !important;
max-width: 90%;
font-size: 18px !important;
margin: 0 auto;
}
.wpforms-description a {
color: #e27730;
text-decoration: none;
}
.wpforms-description a:hover {
color: #c45e1b;
}
.wpforms-description ul li {
list-style: circle !important;
list-style-position: inside !important;
font-size: 16px;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn {
background-color: #e27730 !important;
color: rgba(255,255,255,1) !important;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn:hover {
background-color: #c45e1b !important;
}
.wpforms-conversational-form-btn-desc {
display: none !important;
}
```
Queste sono solo alcune regole CSS standard per link e elenchi non ordinati. Abbiamo anche stilizzato il titolo del modulo conversazionale e rimosso il testo che di solito vedi accanto al pulsante **Avvia**.
Una volta create le regole CSS, è ora di caricarle utilizzando FTP o un plugin di tipo FTP, caricarle nella directory del tema. Per caricare tramite FTP, puoi [seguire questo tutorial](https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/ "Come usare FTP per caricare file su WordPress per principianti").
Per il nostro tutorial, abbiamo utilizzato un [plugin WordPress menzionato in questo tutorial](https://wordpress.org/plugins/wp-file-manager/ "File Manager") per avere accesso al nostro server.
## Visualizzazione del modulo conversazionale
Ora, quando i visitatori visualizzano la pagina, vedranno i nuovi stili aggiunti semplicemente accodando il nostro foglio di stile unico.
E questo è tutto ciò che ti serve per accodare un foglio di stile specifico per il componente aggiuntivo **Moduli Conversazionali**. Vuoi collegare il logo che appare sui tuoi moduli conversazionali? Dai un'occhiata alla nostra documentazione su [Come collegare il logo del tuo modulo conversazionale](https://wpforms.com/developers/how-to-link-your-conversational-form-logo/ "Come collegare il logo del tuo modulo conversazionale").
## Azione di riferimento
[wpforms\_conversational\_forms\_enqueue\_styles](https://wpforms.com/developers/wpforms_conversational_forms_enqueue_styles/ "Utilizzo dell'azione wpforms_conversational_forms_enqueue_styles")
## FAQ
#### D: Posso usarlo anche per il componente aggiuntivo **Pagine Modulo**?
**R:** Per avere un accodamento unico per il componente aggiuntivo **Pagine Modulo**, usa invece questo snippet di codice. Puoi leggere di più su questa azione rivedendo [questa documentazione](https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/ "Utilizzo del filtro wpforms_form_pages_enqueue_styles").
```
/**
* Accoda il tuo foglio di stile per il componente aggiuntivo Pagine Modulo
*
* @link https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/
*/
function wpfdev_formpages_custom_css() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}
add_action( 'wpforms_form_pages_enqueue_styles', 'wpfdev_formpages_custom_css', 10 );
```
**Categorie:** Componenti aggiuntivi
**Tag:** PHP
---