воскресенье, 9 октября 2016 г.

Урок №11. Contact Form 7 изменение


1.2. Вставляем капчу
Капча нужна! Надеюсь, что слово КАПЧА вам уже знакома и нет смысла про нее писать.  Итак, для начала:Авторизируемся в гугл и переходим сюда 
https://www.google.com/recaptcha/intro/index.html
Нажимаем кнопку войти. 
Вписываем название и свой сайт. 

 Соглашаемся с уведомлением или не соглашаемся и получаем ключи.
Заходим в плагин Контактной формы и в разделе Интеграция вписываем ключи.
Не забываем сохранить.
После этого можно смело проходить в форму и добавлять карчу.

1.2. НОВАЯ КРАСИВАЯ ФОРМА 

В админке wordpress с помощью специального инструмента модуля вы сможете добавить в вашу форму разные типы полей — соответствующий код для этого генерируется достаточно наглядно. Кроме того, можно добавлять защиту от спама, полностью определять структуру отправляемых писем и задавать текстовые сообщения для тех или иных событий/ошибок. Модуль Contact Form 7 — отличное решение, а разобраться в нем не сложно.
Чтобы внешний вид вашей Contact Form 7 изменился из скучной стандартной темы — просто скопируйте нижеследующий CSS-код в конец файла-стилей плагина Contact Form 7. Находится он здесь:



http://САЙТ.ru/wp-content/plugins/contact-form-7/includes/css/styles.css



Просто откройте этот файл вашим ftp-клиентом (FileZilla etc.) и добавьте код:


.wpcf7 input,
.wpcf7 textarea{
     
    width: 90%;
    padding:10px;
    color:#8e8e8e;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height: 20px;
    border: solid 1px #9f9f9f;
     
    box-shadow: inset 2px 2px 8px #bababa;
     
    -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
     
}
.wpcf7 .wpcf7-list-item{
  padding-left: 0;
  margin-left: 0;
  margin-right: 25px;
}
.wpcf7 .wpcf7-list-item input{
  border: none;
  padding-left: 0;
  margin-left: 0;
}
.wpcf7 select{
  outline: none;
  font-size:16px;
  font-family:Arial, Helvetica, sans-serif;
}
.wpcf7 input:hover,
.wpcf7 input:focus,
.wpcf7 input:active,
.wpcf7 textarea:hover,
.wpcf7 textarea:focus,
.wpcf7 textarea:active {
  background: #ebf7f5;
  outline: none;
}
.wpcf7 input.wpcf7-submit{
    -webkit-transition: 0;
  -moz-transition: 0;
  -o-transition: 0;
  transition: 0;
   
  border: none;
  position: relative;
   
  color: #fff;
   
  text-shadow: 1px -2px 0px black;
   
  text-transform: uppercase;
   
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
   
  font-size: 14px;
   
  padding-top: 11px;
  padding-bottom: 10px;
  padding-left: 35px;
  padding-right: 35px;
   
  /* Gradient background */
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#000000)); 
  background:  -moz-linear-gradient(top, #4d1b5c, #000000); 
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#000000');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#000000)";
   
  /* Drop Shadow */
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
   
}
/* On hover */
.wpcf7 input.wpcf7-submit:hover{
   
  cursor: pointer;
  text-decoration: none;
   
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#6d2f80)); 
  background:  -moz-linear-gradient(top, #4d1b5c, #6d2f80); 
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#6d2f80');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#6d2f80)";
}
/* On click */
.wpcf7 input.wpcf7-submit:active{
  top: 1px;
   
  color: #d8c6e2;
   
  background-color: #000000;
  background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c)); 
  background:  -moz-linear-gradient(top, #4d1b5c, #4d1b5c); 
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d1b5c', endColorstr='#4d1b5c');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d1b5c, endColorstr=#4d1b5c)";
   
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
/* CF7 Messages */
.wpcf7 .wpcf7-validation-errors{
    border:none;
    background-color:#f4ae46;
    margin:0;
    padding:20px;
     
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.wpcf7 .wpcf7-mail-sent-ok{
    border:none;
    background-color:#7ad33f;
    margin:0;
    padding:20px;
     
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.wpcf7 .wpcf7-mail-sent-ng{
    border:none;
    background-color:#cf2d38;
    margin:0;
    padding:20px;
   
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
   
    color: white;
}
.wpcf7 span.wpcf7-not-valid-tip{
    border:none;
    background-color:#cf2d38;
    padding:10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius:10px;
    width: 180px;
    color: white;
     
    /* Drop shadow */
    -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
.wpcf7-form .fleft{
  float: left;
}
.wpcf7-form .mright20{
  margin-right: 20px;
}
.wpcf7-form .mright40{
  margin-right: 40px;
}
.wpcf7-form .clear{
  clear: both;


Есть одно но! (Прям как всегда).... Дело в том, что после обновления плагина настройки слетают......Так что запасаемся терпением и переставляем каждый раз стили , ну или если вы знаток то можно изменить через функции. К сожалению, не могу похвастать знаниями по этому делу.

Если хотите, чтоб в сообщениях были стилизованы ошибки, то прописываем в файле стилей плагина (Корневая папка> САЙТ> wp-content> plugins> contact-form-7> includes> css> styles.css)
следующие строчки:
.wpcf7-not-valid-tip {
2    position: absolute !important;
3    left: -50px !important;
4    top: 0 !important;
5    width: 50px !important;
6    height: 44px !important;
7    padding: 0 !important;
8    background: url(https://картинка.png) !important;
9    overflow: hidden;
10    text-indent: -9999px !important;
11    padding: 0;
12    border: none !important;
13}
Вы можете скачать картинку 
 по адресу https://yadi.sk/i/fRf7eIcUwVdqW и указать в настройках ее адрес.

Для того, чтобы переадресовать после отправки человека на нужную страницу добавьте в форме в раздел "Дополнительные настройки" строчку кода:

 on_sent_ok: "location.replace('http://САЙТ.ру/spasibo/');"


 2 вариант 


Если вы не хотите лесть в настройки, но вам необходимо сделать изменения в форме обратной связи то можно воспользоваться специальным плагином Easy Modal

Мне понравилось это видео:


Один минус , этот палгин не обновлялся уже год... Если вас это не пугает , то вперед!

Настройкой внутри самого виджета в админке WP
Для этого просто нужно подставить нужные функции и у вас получится чуесная форма.
Так для того чтобы сделать вот такую форму


Нужно всего лишь вставить в форму вот такой код:
И подработать стили.
Можно задать стиль в самой форме , тогда прямо тут добавляем к <p class="noviy-cf7"
И стилизовать его.


Автор: на
Ярлыки: ,

Комментариев нет:

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

Подписаться на: Комментарии к сообщению (Atom)