Formulaire de Contact personnaliser

(Avant) la base 

(Apres) lorsque j'ai personaliser 

On a tous ou presque tous ce Gadger de formulaire quon a installer dans une colonne. Il est basic mais maintenant vous pouvez le personaliser. Voici comment j'ai faites le code qui se trouve plus bas .

(rappel) Une derniere chose n'ecrivez pas entre les codes sinon sa entre en conflit. Faut vous notez cest quoi en anglais sur ujn papier ou un bloc note et non sur le code direct. Jai vue cette erreur de plusieurs d'entre vous et la plupart du temps sa entre en conflit que les effets fonctionne pas  a 100% comme il devrait. 

==== Explication ======

Voici la traduction des mots de anglais en francais

widht= largeur /heigh= hauteur/ padding = marge interieur/ button-submit= bouton envoyer/contact-form-email-message= la boite du formulaire contact / font size = taille police ecriture/ border = bordure/

contact-form-button-submit:hover= bouton  envoyer survol /  line-height= l'espace en hauteur pour le texte (pour le bouton) / contact-form-widget= Gadget du formulaire de contact / text-align center= texte centrer/ 

Le  code ''Color'' est la couleur de l'ecriture. 

Bordures:  dotted = pointillé/ solid=simple/ dashed=tiret

Choix police ecriture en css :

 https://www.w3schools.com/css/css_font.asp

OU

https://www.w3.org/Style/Examples/007/fonts.en.html#:~:text=Font%20styles-,Font%20families,%2C%20monospace%2C%20cursive%20and%20fantasy.&text='fantasy':%20decorative%20fonts%2C%20for%20titles%2C%20etc.

OU

https://www.tutorialbrain.com/css_tutorial/css_font_family_list/

====  INFO CSS============

Note:Si le code fonctionne pas en Css essayez en Modifier Html  avant ....]]></b:skin> et si sa fonctionne toujours pas dernier option que je connais est avant   .....}]]></b:template-skin>

======== CODE ==========

 .contact-form-widget {

width: 400px; 

border-radius: 55px 3px;

max-width: 100%;

padding: 4px;

background: #152820; 

font-family: Fantasy, papyrus;

 text-align: center; 

 font-size: 18px;

color: #729485; 

border: 8px double #45896b;

}

.contact-form-name, .contact-form-email, 

.contact-form-email-message { width: 100%; max-width: 400px; }

.contact-form-button-submit {

border: 3px dotted #4f4089;

background: #ab9be9;  

color: #ffffff;  

width: 100%; 

 height: 40px; 

 line-height: 30px;

font-family: Fantasy, papyrus; 

 text-align: center; 

  font-size: 18px; 

}

.contact-form-button-submit:hover{

border: 2px solid #342f4d;

background: #342f4d;

==================Des Modeles pour vous ==================

J'ai faites quelques modeles pour vous aidez .

https://les-astuces-blogger.blogspot.com/p/formulaire-contact-de-couleur-lot-1.html

https://les-astuces-blogger.blogspot.com/p/formulaire-contactchoix-de-couleurs-lot.html