Contact Form 7 Плагин WordPress

Опубликовано 18.12.2018 автор | 0 комментариев

Contact Form 7 Плагин WordPress

Contact Form 7 Плагин WordPressЗдравствуйте, уважаемые посетители блога, сегодня расскажу вам, как вчера вечером, потратив много времени создал красивую форму обратной связи на плагине Contact Form 7. Стиль формы который заложен в плагин по умолчанию не вписывался в дизайн моего будущего сайта.

Для чего нужна форма обратной связи в WordPress?

  • Помогает установить связь с Вами (читателям, рекламодателям и т.п.)
  • Позволяет задавать Вам вопросы, не через комментарии
  • Из-за того, что форма обратной связи будет на отдельной странице, читателям намного проще будет связаться с Вами.

Установка плагина Contact Form 7

Установка плагинов WordPress дело простое. Всегда убедитесь, что у вас есть последняя резервная копия базы данных, прежде чем установить или обновить что-нибудь на вашем сайте. После того как вы сделали резервную копию сайта, вот тогда можно устанавливать плагин Contact Form 7.

Многие читатели блога спрашивают, как правильно устанавливать плагины. Для начинающих здесь опишу пошагово.

Шаг 1. Скачиваем и активируем плагин:

  1. Войти в систему (админку), на Ваш сайт WordPress.
  2. В разделе «Плагины» нажмите на кнопку «Добавить».
  3. В разделе «Поиск» введите «Contact Form 7».
  4. После перезагрузки страницы Нажмите на кнопку «Установить сейчас» под Contact Form 7.
  5. Нажмите «OK», архив плагина загружается на ваш сервер.
  6. После загрузки плагина нажать кнопку «Активировать плагин».
  7. Теперь внизу слева появилась надпись «Контакты (CF7)«, жмем на нее и редактируем будущею форму обратной связи.
  8. Плагин русифицирован и прост в настройках.

Шаг 2. Устанавливаем форму (контакты) на сайт

  1. Создаём страницу, Пример (Контакты).
  2. Копируем код формы и переносим его на страницу.
  3. Вот и все, форма обратной связи создана.
  4. Посмотреть форму обратной связи по умолчанию, можно на моем блоге (Контакты).

Стили Contact Form 7

Теперь о главном, создаем красивую форму обратной связи на плагине Contact Form 7, добавляем стиль формы обратной связи в файл CSS вашей темы WordPress.

Contact Form 7 стиль 1.

Всё очень просто, вставляете данный код в файл CSS вашей темы сайта.

/*---------------------------------------------------------------------------------*/
/* Contact Form 7 CSS */
/*---------------------------------------------------------------------------------*/
span.wpcf7-form-control-wrap input, span.wpcf7-form-control-wrap textarea, .wpcf7-submit{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
background: -webkit-gradient( linear, left top, left bottom, color-stop(.5, white), color-stop(1, rgba(233, 233, 233, .5)) );
background: -moz-linear-gradient( center bottom, rgb(233,234,235) 0%, rgba(255,255,255,0) 85% );
border: 1px solid #aeaeae; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; box-shadow: 0 0 5px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2); -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
line-height:12px;
margin: 0 0 0 5px;
padding: 10px;
width: 520px;
}
span.wpcf7-form-control-wrap input{
width: 300px;
}
span.wpcf7-form-control-wrap input:focus, span.wpcf7-form-control-wrap textarea:focus{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff');
background-image: none;
border: 1px solid #666666; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none;
}
.wpcf7-submit{
background:#F1F2F3; box-shadow: -1px 1px 3px rgba(0,0,0,.25); -webkit-box-shadow: -1px 1px 3px rgba(0,0,0,.25); -moz-box-shadow: -1px 1px 3px rgba(0,0,0,.25);
font-family:sans-serif;
text-align: center;
width: 90px;
cursor:pointer;
text-transform:uppercase;
float:right;
margin: 0 50px 0 5px;
padding: 3px;
}
.wpcf7-submit:hover{
border:1px solid #888;
}
.wpcf7-not-valid-tip, div.wpcf7-validation-errors{
border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; box-shadow: 0 0 3px rgba(0,0,0,.25); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.25); -moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
padding:8px 5px 5px !important;
}
.wp_syntax {
width: 530px !important;
}

В итоге вы получаете результат, Смотреть: Демо

Contact Form 7 стиль 2.

Здесь немного наворотов, честно этот стиль мне не очень понравился-на любителя.
Создаём форму обратной связи за два шага:

Шаг 1. Замените код в «форме» текстовое поле, следующим кодом:

  • Your Name(*) [text* your-name]
  • Your Email(*)[email* your-email]
  • Subject[text your-subject]
  • Your Message[textarea your-message]
  • [submit «Send»]

Шаг 2. Добавляем код в файл CSS темы

#contact{
	list-style:none;
	margin:0;
}
#contact li{
	float: left;
    height: 60px;
	margin:0 0 20px;
    position: relative;
    width: 540px;
}
#contact li .text{
	background: #F0EFEF;
	padding:15px 10px 10px 0;
	position:absolute;
	z-index:100;
	min-width:85px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	text-indent: 5px;
}
#contact li .required{
	position:absolute;
	right:10px;
	top:10px;
	z-index:100;
}
#contact li .wpcf7-form-control-wrap{
	position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
	background:#fff;
	border:solid 5px #F0EFEF;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:15px 10px 25px;
	width: 509px;
	text-indent:95px;
	z-index:100;
	margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
	background:#F0EFEF
}
#contact li .wpcf7-form-control-wrap textarea{
	line-height: 28px;
    padding: 10px;
	height:200px;
}
#contact li#message{
	min-height:220px;
}
#contact li#submit input{
	color:#fff;
	text-decoration:none;
	margin:10px 30px 0 0;
	background:#09b2f3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69d2f9', endColorstr='#09b2f3');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
	background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-0-border-radius:3px;
	border-radius:3px;
	display:block;
	padding:10px 25px;
	text-align:center;
	text-shadow:0 1px 0 #09b2f3;
	text-transform:uppercase;
}
#contact li#submit input:hover{
	background:#69d2f9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#09b2f3', endColorstr='#69d2f9');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
	background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	color:#06506c;
	text-shadow:0 1px 0 rgba(255,255,255,.25);
	text-transform:uppercase;
	cursor:pointer;
}
div.wpcf7-validation-errors {
    clear: left;
}

Смотрим результат:
Форма контакты 1

Contact Form 7 стиль 3.

Еще простая форма, вставляете данный код в файл CSS вашей темы сайта.

.wpcf7-form p{
font-family:cursive;
font-size:small;
text-align:left;

}
.wpcf7-form p input, .wpcf7-form p textarea{

font-size:larger;
background-color:#ddddff;
color:#000055;
border-left-color:#4283B9;
border-top-color :#4283B9;
border-bottom-color:#bbbbff;
border-right-color:#bbbbff;
padding:2px;
}

.form7submit  {
display: block;
width: 307px;
}

Пробуйте экспериментировать со стилями, изменять ширину формы, цвета, чтобы контактная форма вписывалась в дизайн вашего сайта.

Поделиться с друзьями

Еще по теме

Комментарии

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.