Comment mettre en file d'attente une feuille de style pour les formulaires conversationnels

Souhaitez-vous mettre en file d'attente votre propre feuille de style pour le module complémentaire Conversational Forms ? Vous pouvez ajouter votre propre CSS en utilisant l'une de ces méthodes de ce tutoriel, mais saviez-vous que vous pouvez également utiliser un filtre pour mettre en file d'attente une feuille de style dédiée à vos formulaires conversationnels. Cette méthode peut faciliter grandement l'organisation et, dans ce tutoriel, nous vous montrerons comment mettre en file d'attente une feuille de style dédiée pour ces formulaires.

Création de votre formulaire conversationnel

Tout d'abord, vous devrez créer un formulaire conversationnel et y ajouter vos champs. Si vous avez besoin d'aide pour cela, veuillez consulter cette documentation.

Personnalisation du formulaire conversationnel

Une fois que vous avez créé votre formulaire conversationnel, dans le cadre de ce tutoriel, nous allons ajouter du texte au champ Message dans l'onglet Formulaire conversationnel. C'est un message que vos visiteurs verront dès le chargement du formulaire.

Vous pouvez ajouter ce dont vous avez besoin, mais nous ajoutons du texte, un lien et une liste non ordonnée avec ce qui suit.

<p>Vous êtes sur le point de compléter un formulaire de commande pour le package de thèmes 3.</p>
<p>Pour consulter les termes et conditions, <a href="#">veuillez cliquer ici</a>.</p>
<p>Ce qui comprend, sans s'y limiter, les éléments suivants :</p>
<ul>
<li>Thème 1</li>
<li>Thème 2</li>
<li>Thème 3</li>
<li>Plugin gratuit 1</li>
<li>Plugin gratuit 2</li>
<li>Plugin gratuit 3</li>
</ul>


Mise en file d'attente d'une feuille de style pour les formulaires conversationnels

Avant de pouvoir mettre en file d'attente notre propre feuille de style pour les formulaires conversationnels, nous devons d'abord ajouter cet extrait de code qui le permettra.

Si vous avez besoin d'aide pour ajouter du code à votre site, veuillez consulter ce tutoriel.

/**
 * 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 );

Création et téléchargement de la feuille de style dans votre répertoire de thème

Une fois le code ajouté, vous devez maintenant créer votre fichier CSS.

Voici quelques styles CSS de base que nous avons utilisés pour ce tutoriel

.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;
}

Ce ne sont que quelques règles CSS de style standard pour les liens et les listes non ordonnées. Nous avons également stylisé le titre du formulaire conversationnel et supprimé le texte que vous voyez habituellement à côté du bouton Démarrer.

Une fois que vous avez créé les règles CSS, il est maintenant temps de les télécharger en utilisant FTP ou un plugin de type FTP, téléchargez-les dans le répertoire du thème. Pour le téléchargement via FTP, vous pouvez suivre ce tutoriel.

Pour notre tutoriel, nous avons utilisé un plugin WordPress mentionné dans ce tutoriel pour avoir accès à notre serveur.

Visualisation du formulaire conversationnel

Maintenant, lorsque les visiteurs consultent la page, ils verront les nouveaux styles ajoutés simplement par la mise en file d'attente de notre feuille de style unique.

Et c'est tout ce dont vous avez besoin pour mettre en file d'attente une feuille de style spécifique pour le module complémentaire Conversational Forms. Souhaitez-vous lier le logo qui apparaît sur vos formulaires conversationnels ? Consultez notre documentation sur Comment lier le logo de votre formulaire conversationnel.

Action de référence

wpforms_conversational_forms_enqueue_styles

FAQ

Q: Puis-je également l'utiliser pour le module complémentaire Form Pages ?

R: Pour avoir un enqueue unique pour le module complémentaire Form Pages, utilisez plutôt cet extrait de code. Vous pouvez en savoir plus sur cette action en consultant cette documentation.

/**
 * 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 );