Contenu
Formulaire de contact 7 est un plug-in de plate-forme de publication WordPress qui permet aux utilisateurs de créer rapidement des formulaires de contact personnalisés. Bien que les formulaires soient faciles à créer et à déployer, leurs champs sont peu personnalisés, ce qui permet une intégration avec n’importe quel site. Créez vos styles personnalisés et implémentez-les dans les champs de formulaire générés par ce plugin.
Les instructions
-
Ouvrez la feuille de style de thème de votre WordPress et faites défiler jusqu'à la fin. Créez une zone annotée pour pouvoir facilement localiser votre code. Exemple:
/ C'est ici que commence mon code CF7 personnalisé /
-
Personnalisez les styles de vos champs et zones de texte. Pour ce faire, créez une entrée dans votre feuille de style. Exemple:
.wpcf7 input [type = "text"], .wpcf7 areadotexto {}
Ajoutez des bordures, des arrière-plans, des marges et des tailles d'éléments de texte. Exemples:
.wpcf7 input [type = "text"] {background: aucune répétition scroll 0 0 # F9F9F9; bordure: 1px solide # 8E9BA9; rembourrage: 5px; largeur: 200px; }
-
Personnaliser les styles des menus déroulants et de sélection.Pour ce faire, créez une entrée dans votre feuille de style. Exemple:
.wpcf7 input [type = "select"] {
}
Personnalisez les champs de sélection similaires aux champs de texte. Les champs de sélection ne sont pas aussi larges que les champs de texte, ajoutez donc quelques pixels supplémentaires à votre largeur. Exemple:
.wpcf7 entrée [type = "sélectionné"] {arrière-plan: aucune répétition défiler 0 0 # F9F9F9; bordure: 1px solide # 8E9BA9; rembourrage: 5px; largeur: 210px; }
-
Personnalisez le style de votre bouton d'envoi. Pour ce faire, créez une entrée dans votre feuille de style. Exemple:
.wpcf7 input [type = "soumission"] {
}
Personnalisez le bouton d'envoi pour compléter l'apparence de votre site (il devrait continuer à se démarquer de l'arrière-plan). Exemple de bouton d'envoi rouge:
.wpcf7 input [type = "soumission"] {background-color: # 990000; bordure: solide 4px # B34040; couleur: #FFFFFF; }
-
Enregistrez les modifications dans votre feuille de style et transférez les données dans le dossier du thème.
Comment
- Essayez différents styles et différentes couleurs de bordure.
- Effectuez une nouvelle vérification des formulaires dans Firefox, Safari et Internet Explorer, car chaque navigateur fournit des champs de saisie légèrement différents.
Avis
- Ajoutez du CSS personnalisé à la feuille de style de votre thème et non à la feuille de style du plugin. Si vous procédez ainsi, lors de la mise à jour du plug-in, la personnalisation des fichiers de votre dossier risque d'être perdue.
Ce dont vous avez besoin
- Accès à la feuille de style WordPress