How to Enqueue a Stylesheet for Conversational Forms

Visualizza Markdown

Vuoi accodare il tuo foglio di stile per il componente aggiuntivo Moduli Conversazionali? Puoi aggiungere il tuo CSS utilizzando uno qualsiasi di questi metodi da questo tutorial, 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

Innanzitutto, dovrai creare un modulo conversazionale e aggiungervi i tuoi campi. Se hai bisogno di aiuto per farlo, ti preghiamo di consultare questa documentazione.

Una volta aggiunti i tuoi campi, assicurati di abilitare i moduli conversazionali dalla scheda delle impostazioni.

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 puntato 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 solo, quanto segue:




 	Tema 1


 	Tema 2


 	Tema 3


 	Plugin Gratuito 1


 	Plugin Gratuito 2


 	Plugin Gratuito 3

Accodamento di un foglio di stile per moduli conversazionali

Prima di poter accodare il nostro foglio di stile per moduli conversazionali, dobbiamo prima aggiungere questo snippet di codice che lo consentirà.

Se hai bisogno di aiuto per aggiungere codice al tuo sito, ti preghiamo di consultare questo tutorial.

/**
 * Enqueue your own stylesheet for conversational forms
 * 
 * @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 di styling standard per link ed elenchi puntati. Abbiamo anche stilizzato il titolo del modulo conversazionale e rimosso il testo che solitamente vedi accanto al pulsante Avvia.

Una volta create le regole CSS, è ora di caricarle utilizzando FTP o un plugin di tipo FTP, caricale nella directory del tema. Per caricare tramite FTP, puoi seguire questo tutorial.

Per il nostro tutorial, abbiamo utilizzato un plugin WordPress menzionato in questo tutorial per avere accesso al nostro server.

Crea il tuo file CSS con le tue regole CSS univoche e caricalo nella directory del tuo tema

Visualizzazione del modulo conversazionale

Ora, quando i visitatori visualizzeranno la pagina, vedranno i nuovi stili aggiunti semplicemente accodando il nostro foglio di stile unico.

Metti in coda il tuo foglio di stile univoco per i moduli conversazionali per mantenere il tuo CSS organizzato e facile da trovare.

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.

Azione di riferimento

wpforms_conversational_forms_enqueue_styles

FAQ

D: Posso usarlo anche per l'addon Form Pages?

R: Per avere un enqueue univoco per l'addon Form Pages, usa invece questo snippet di codice. Puoi leggere di più su questa azione esaminando questa documentazione.

/**
 * Enqueue your own stylesheet for the Form Pages addon
 * 
 * @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 );

Come includere un foglio di stile per i Moduli Conversazionali

Riassunto AI