Как добавить свой CSS в Contact Form7 — стиль и кнопка

Привет друзья!

Иногда нужно изменить стиль в контактной форме  — Contact Form7  я часто ее использую в разработке сайтов, и все время нужно , что — то поменять 🙂

Я надеюсь вам поможет изменить стиль контактной формы 

 

Во первых, где можно добавить свой стиль?

 

 

 

Contact Form 7 form фон и границы формы в  CSS

/* Contact Form 7 Form Background And Border CSS
 -----------------------------------------------*/
 .wpcf7 {
     background: #A3A3A3;
     border: 10px solid #494949;
     width: 700px;
     padding: 20px 20px 20px 50px !important;
 }

Contact Form 7 поля ввода и поле текста в CSS

/* Contact Form 7 Input CSS 
 ---------------------------*/
 .wpcf7 input[type="text"],
 .wpcf7 input[type="email"],
 .wpcf7 input[type="tel"],
 textarea {
     font-size: 16px;
     background-color: #f5f5f5;
     border: none;
     width: 95%;
     padding: 2%;
 }

Contact Form 7 Кнопка «Отправить» ( ‘Submit Button’) CSS

/* Contact Form 7 Submit Button 
-------------------------------*/
.wpcf7 input[type="submit"] {
color: 111
font-size: 18px;
font-weight: 700;
background: ffc576
padding: 15px 25px 15px 25px;
border: none;
border-radius: 0px;
width: auto;
text-transform: uppercase;
letter-spacing: 1px;
}
.wpcf7 input:hover[type="submit"] {
background: #494949;
transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
background: ffc576;
color:#fff;
}

ЧекБокс

/* Checkbox CSS
----------------*/
input[type="checkbox"] {
transform: scale(1.3);
margin-left: 5px;
}

span.wpcf7-list-item {
margin: 0;
padding-bottom: 20px;
}

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *