Comment ajouter des styles CSS personnalisés pour WPForms

Voulez-vous ajouter des styles CSS personnalisés à votre site ? Ce tutoriel vous donnera plusieurs options sur la façon d'ajouter ces extraits à votre site avec des instructions étape par étape pour chaque option que vous choisirez d'ajouter votre CSS.

Avec ce guide utile, vous pourrez facilement choisir la méthode que vous souhaitez pour ajouter les extraits à votre site. Une fois que vous aurez sélectionné votre méthode d'implémentation, vous pourrez commencer à explorer la documentation du développeur pour choisir les extraits CSS que vous souhaitez commencer à ajouter à votre site !

Pour jeter un coup d'œil à l'ensemble des extraits disponibles, veuillez consulter notre documentation pour développeurs.

Veuillez consulter notre tutoriel vidéo pour une vue plus pratique de la façon d'ajouter des extraits CSS personnalisés à votre site.

Options d'implémentation

Le CSS est un outil puissant pour styliser votre site, ainsi que vos formulaires. Il existe 3 approches principales pour ajouter du CSS personnalisé à votre site.

Utilisation du plugin WPCode (recommandé)

L'utilisation du plugin WPCode est très rapide et facile pour ajouter des extraits CSS à votre site.

L'une des nombreuses raisons pour lesquelles nous recommandons fortement l'utilisation de ce plugin pour ajouter des extraits personnalisés à votre site est qu'il dispose d'une vérification intégrée avant d'enregistrer votre extrait. Si un point-virgule est manquant ou si une parenthèse supplémentaire est ajoutée, l'extrait ne sera pas enregistré. Cela évite tout problème potentiel sur votre site en raison d'un extrait CSS copié et collé incorrect. Et oui, même avec la version gratuite, vous bénéficierez de cette vérification supplémentaire avant que votre extrait ne soit activé.

Une fois le plugin installé, accédez au menu Code Snippets depuis le menu latéral gauche de votre tableau de bord WordPress et sélectionnez + Add Snippet. Ensuite, cliquez simplement sur Add Your Custom Code (New Snippet), puis cliquez sur le bouton bleu Use Snippet pour créer un nouvel extrait CSS.

Lorsque votre nouvel écran d'extrait apparaît, donnez un nom à l'extrait qui ait du sens pour vous afin que vous et les administrateurs de votre site compreniez son objectif. Dans le menu déroulant Code Type, sélectionnez CSS car nous n'ajouterons que du CSS à cet extrait.

Dans la section Code Preview, ajoutez votre CSS. Voici un exemple à utiliser dans le cadre de cette documentation.

/* write your CSS code here */
	ul#wpforms-999-field_27 li label, 
	ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
	}
	
	ul#wpforms-999-field_27 li.wpforms-selected label, 
	ul#wpforms-999-field_27 li label:hover, 
	ul#wpforms-999-field_26 li.wpforms-selected label, 
	ul#wpforms-999-field_26 li label:hover {
		cursor: pointer;
		border-radius: 2px;
		background-position: right top;
	}
	
	ul#wpforms-999-field_27 li input, 
	ul#wpforms-999-field_26 li input {
		display: none;
	}
	
	ul#wpforms-999-field_27 li, 
	ul#wpforms-999-field_26 li {
		float: left;
		width: auto;
		display: inline-block;
		padding: 10px 10px 10px 0!important;
	}

Ensuite, vous verrez la section Insertion. Comme nous ajoutons du CSS, nous sélectionnerons Auto-Insert pour la méthode d'insertion et Site Wide Header pour l'emplacement.

Une fois que vous avez ajouté votre extrait de code, cliquez sur Enregistrer l’extrait. Cela enregistrera l’extrait, mais ne l’activera pas automatiquement. Une fois que vous avez enregistré initialement, vous remarquerez que le statut de l’extrait est défini sur Inactif par défaut. Basculez simplement le commutateur de Inactif à Actif et cliquez sur Mettre à jour pour définir l’extrait comme Actif.

Utilisation de CSS Hero

Si vous préférez ne pas toucher au code, WPForms propose un tutoriel complet sur l'utilisation de CSS Hero. Pour en savoir plus à ce sujet, veuillez suivre ce tutoriel.

Création d'un thème enfant

Les thèmes enfants sont recommandés pour le développement avancé. Vous pouvez découvrir comment créer un thème enfant en suivant ce tutoriel.

Chaque thème enfant contient le fichier requis style.css, c'est dans ce fichier que vous ajouteriez votre CSS personnalisé.

Utilisation du personnaliseur WordPress

Depuis la version 4.5 de WordPress, WordPress nous a fourni un outil intégré pour ajouter des styles CSS personnalisés à votre thème ou à tout plugin que vous avez installé, ce qui en fait un choix populaire pour ajouter votre CSS.

Pour en savoir plus sur le personnaliseur WordPress, consultez leur documentation.

Vous pouvez trouver le personnaliseur WordPress en naviguant vers Apparence » Personnaliser » CSS additionnel.

N'oubliez pas, après avoir ajouté votre CSS, de cliquer sur le bouton Publier pour enregistrer vos modifications. Tant que le thème reste actif, votre CSS personnalisé sera appliqué.

Notes

Lorsque vous ajoutez tout type de code personnalisé à votre site, il est important de vous assurer que vous protégez votre code. Donc, quelle que soit l'approche que vous choisissez, il est toujours conseillé de sauvegarder votre site d'abord. De cette façon, vous aurez accès aux anciennes versions des fichiers du site et de la base de données si nécessaire.

Liens supplémentaires

Pour plus d'informations sur le CSS personnalisé pour WPForms, consultez ces liens de référence :

• Documentation de style pour WPForms
• Une liste complète de la documentation pour styliser WPForms en utilisant CSS

FAQ

Q : Comment cela m'aide-t-il à ajouter du CSS personnalisé pour WPForms ?

R : Ce tutoriel n'est pas spécifiquement destiné au CSS personnalisé de WPForms, mais à tout CSS personnalisé que vous pourriez vouloir ajouter à votre site.

Trouvez simplement l'option qui vous convient le mieux pour ajouter des extraits de code, y compris les extraits de code WPForms mentionnés dans la section Tutoriels et Extraits.