Сontact form 7 готовые формы и стили

В статье Меняем стили для Contact Form 7, стилизация форм в WordPress было описано как изменить внешний вид формы.

В этой статье мы хотим предоставить две готовые формы для стилизации форм плагина contact form 7 в wordpress.

Стилизация contact form 7 не намного сложнее чем создание формы, хотя требует определённых навыков и знаний html и CSS. В этой статья я хочу с Вами поделится готовой формой contact form 7.
По умолчанию форма выглядит так:

contact form 7 форма по умолчанию

 

Хотя возможно она будет выглядеть у вас по-другому, все зависит от стилей  установленной темы.

 

Форма 1

 

contact form 7 стилизованная форма1

Вносить изменения будет в стилевую разметку темы. Стили темы находятся в по следующему пути wp-content/themes/НАЗВАНИЕ ВАШЕЙ ТЕМЫ/style.css

Код стиля, его необходимо поставить в конец файла со стилями вашей темы:
.form-design4uru-info {

border: 2px solid rgba(34, 34, 34, 0.09019607843137255);
-webkit-box-shadow: 0px -1px 11px 1px rgba(0,0,0,0.05), inset -4px 4px 125px -6px rgba(237,237,237,0.2);
-moz-box-shadow: 0px -1px 11px 1px rgba(0,0,0,0.05), inset -4px 4px 125px -6px rgba(237,237,237,0.2);
box-shadow: inset 0px -1px 11px 1px rgba(0,0,0,0.05), -4px 4px 125px -6px rgba(237,237,237,0.2);

margin: 20px;
border-radius: 10px;
padding: 20px;

background-color: rgba(225, 194, 159, 0.06);
width: 500px;
}

.form-design4uru-info:hover {

background-color: rgba(237,237,237,0.2);
border: 2px solid rgba(34, 34, 34, 0.2);
}

.form-design4uru-info input, .form-design4uru-info textarea {

height: 42px;
width: 100%;
border-radius: 4px;
border: 2px solid rgba(169, 166, 163, 0.25);

}

.form-design4uru-info textarea {
height: auto;
}

.form-design4uru-info textarea:hover, .form-design4uru-info textarea:focus {

border: 2px solid #d4d2cf;

}

.form-design4uru-info input:hover, .form-design4uru-info input:focus {

border: 2px solid #d4d2cf;

}

.form-design4uru-info label {
color: #333;
display: block;
font-weight: 400;
margin-bottom: 0.5em;
}

.form-design4uru-info .name {
background-image: url(images/profile.png);
}

.form-design4uru-info .email {
background-image: url(images/mail.png);
}

.form-design4uru-info .subj {
background-image: url(images/mail.png);
}

.form-design4uru-info .icons {
background-repeat: no-repeat;
background-position: left 15px center;
padding: 10px 10px 10px 45px;
}

 

Так же в вашу тему в каталог images необходимо скопировать три иконки

иконка почты для стилизации плагина contact form 7 иконка темы сообщения для стилизации плагина contact form 7 иконка имени отправителя сообщения для стилизации плагина contact form 7

Затем зайти в панель управления (1), в меню выбираем Contact Form 7  и в подменю нажимаем на пункт меню контактные формы. Здесь Вы можете либо создать новую форму, либо изменить старую.  В поле «Шаблон формы» (2)  вставляем следующий код:

 

<div class=»form-design4uru-info»>

<label> Ваше имя (обязательно)</label>[text* your-name class:icons class:name]

<label> Ваш e-mail (обязательно)</label>[email* your-email class:icons class:email]

<label> Тема </label>[text your-subject class:icons class:subj]

<label> Сообщение </label>[textarea your-message]

[submit «Отправить»]

</div>

 

Сохраняем, вставляем код (3) в нужную публикацию на сайте и смотрим результат.

Исходный код первой формы можете скачать здесь.

 

contact form 7 настройки для стилиации формы част1 contact form 7 настройки для стилиации формы част2

 

Форма 2

Отличается только изменениями в файле стилей.

 

contact form 7 стилизованная форма2

 

Для второй формы файл стиле должен выглядеть так:

.form-design4uru-info {

padding: 20px;
border: 1px #0000004a solid;

}

.form-design4uru-info:hover {

}

.form-design4uru-info input, .form-design4uru-info textarea {

color: #7f7f7f;
font-size: 13px;
border: 1px solid #afafaf;
-webkit-border-radius: 3px;
border-radius: 3px;

background-repeat: no-repeat;
background-position: left 15px center;
width: 100%;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;

}

.form-design4uru-info .wpcf7-submit {

margin-bottom: 20px;
background-color: #fff;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
height: 45px;
line-height: 45px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 13px;
font-weight: 400;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
padding: 0 20px;
white-space: nowrap;
border: 1px solid #027cc7;
color: #000;
background-position: left 20px center;

}

.form-design4uru-info .wpcf7-submit:hover{
background: white;
}

.form-design4uru-info input{
padding: 10px 10px 10px 45px;
}

.form-design4uru-info textarea:hover, .form-design4uru-info textarea:focus {

-webkit-box-shadow: 0 7px 21px rgba(1,31,59,.2);
box-shadow: 0 7px 21px rgba(1,31,59,.2);
border: 1px solid #788897;

}

.form-design4uru-info input:hover, .form-design4uru-info input:focus {

-webkit-box-shadow: 0 7px 21px rgba(1,31,59,.2);
box-shadow: 0 7px 21px rgba(1,31,59,.2);
border: 1px solid #788897;

}

.form-design4uru-info label {
font-size: 12px;
font-weight: bold;
}

.form-design4uru-info .name {
background-image: url(images/profile.png);
}

.form-design4uru-info .email {
background-image: url(images/mail.png);
}

.form-design4uru-info .subj {
background-image: url(images/mail.png);
}

.form-design4uru-info .icons {
background-repeat: no-repeat;
background-position: left 15px center;
padding: 10px 10px 10px 45px;
}

 

Исходный код второй стилизованной  формы можете скачать здесь.

Читайте также: