Плагин контактных форм Contact Form 7 для WordPress

neformat / Авг.12.2015. / 1 комментарий

Плагин для wordpress contact form 7

Данная статья посвящена наверное самому известному плагину для настройки форм обратной связи на сайте Contact Form 7. На мой взгляд это очень гибкий, бесплатный и простой плагин для WordPress, но в тоже время в плагине есть достаточно различных функции, что бы сделать  сложную форму. Так же преимуществом данного плагина является, то что он переведен на множество языков в том числе и на русский это позволит вам более точно настроить плагин. Еще одним преимуществом плагина станет реализованная в нем форма оправки письма, что то же несомненно удобно.

И так приступим непосредственно к установке и настройке плагина.

Скачать плагин вы можете здесь или добавить через стандартный репозиторий WordPress в админ панели вашего сайта.

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

Для того что бы установить форму вам  необходимо скопировать код вставки вашей формы в настройках плагина он выглядит примерно вот так

form1

 

И вставить в поле редактирования контента в нужное вам место на вашей странице.

form2

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

По умолчанию форма выглядит очень простенько и состоит из 4 полей.

form3

 

Что бы форма выглядела в одном стилевом исполнении  с вашим сайтом, вам необходимо поправить файл стилей плагина или изменить файл стилей вашего сайта.

Файл со стилями плагина расположен в директории /wp-content/plugins/contact-form-7/includes/css/styles.css.

В качестве примера приведу свой файл стилей, вы можете взять его за основу для оформления стилей своей формы.

 

.wpcf7-form input[type=”submit”] {
font-family: “Segoe UI Semilight”, Tahoma, Helvetica, Sans-Serif;
border:none;
border-radius:0px;
color:#fff;
padding: 10px 15px 14px 15px;
font-size:18px;
background: #5cbfd7;
width:150px;
margin-right:0px;
display:block;
cursor:pointer;
-moz-transition: all 0.2s 0.01s ease-in;
-o-transition: all 0.2s 0.01s ease-in;
-webkit-transition: all 0.2s 0.01s ease-in;

}

.wpcf7-form input[type=”submit”]:hover{
color:#fff;
background: #dc5a54;
border:none;
}

.wpcf7-form textarea {
display: block;
margin-top: 5px; /* верхний отступ от поля Текст сообщения*/
background: #fff;
border: 1px solid #5cbfd7; /* граница поля Текст сообщения*/
width: 90%;
color: #222;
padding: 10px 10px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.wpcf7-form input[type=”email”], .wpcf7-form input[type=”text”] {
background:#fff ;
border: 1px solid #5cbfd7; /* граница текстовых полей*/
width: 50%;
color: #222;
height:30px; /* высота текстовых полей*/
padding: 0 10px; /* внутренние границы текстовых полей*/
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
div.wpcf7 {
margin: 0;
padding: 0;
}

div.wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
}

div.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
margin: 0;
padding: 0;
border: 0;
}

div.wpcf7-mail-sent-ok {
border: 2px solid #5cbfd7;
}

div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}

div.wpcf7-spam-blocked {
border: 2px solid #dc5a54;
}

div.wpcf7-validation-errors {
border: 2px solid #dc5a54;
}

span.wpcf7-form-control-wrap {
position: relative;
}

span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
display: block;
}

.use-floating-validation-tip span.wpcf7-not-valid-tip {
position: absolute;
top: 20%;
left: 20%;
z-index: 100;
border: 1px solid #ff0000;
background: #fff;
padding: .2em .8em;
}

span.wpcf7-list-item {
margin-left: 0.5em;
}

.wpcf7-display-none {
display: none;
}

div.wpcf7 img.ajax-loader {
border: none;
vertical-align: middle;
margin-left: 4px;
}

div.wpcf7 div.ajax-error {
display: none;
}

div.wpcf7 .placeheld {
color: #888;
}

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

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



Комментариев 1 Добавить комментарий

  • Подскажите пожалуйста рабочий способ сделать cf7 адаптивной, буду очень благодарен!

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

Войти с помощью: 


<------------->