Едва ли не единственным плагином для WordPress, который обеспечивает нормальное функционирование формы обратной связи является хорошо знакомый нам Contact Form 7. Я уже писал о том, как можно исправить ошибку отправки почты посредством этого плагина.
Плагин хорош тем, что можно легко настроить любые поля и переключатели внутри формы так, что это может выполнять функции заказа товара с множеством опций. Все подобные изменения описаны на FAQ страничке — http://contactform7.com/faq/
Но сегодня не об этом, не смотря на широкую функциональность — плагин фактически не обладает возможностями настройки внешнего вида форм и кнопок, так что дефолтная тема выглядит несколько устаревшей и скучной. Благо, что настройка внешнего вида Contact Form 7 осуществляется очень просто посредством добавления кода CSS. Один из примеров такой темы оформления привожу ниже.
Чтобы внешний вид вашей Contact Form 7 изменился из скучной стандартной темы — просто скопируйте нижеследующий CSS-код в конец файла-стилей плагина Contact Form 7. Находится он здесь:
http://vashsite.com/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; }
Вот и всё, цвета можно менять прямо в этом коде 🙂
Спасибо большое) Все так просто на самом деле.
Пожалуйста, всё действительно не сложно 🙂
Вот применил ваши настройки к своей контактной форме http://coralwater.org.ua/kontakty, отлично смотрится. Вы бы еще может составили другие шаблоны для формы для большего разнообразия для других сайтов
рад, что помогло. Если будет еще что-то интересное — обязательно поделюсь.
Супер решение! Мне, как дизайнеру, оно очень понравилось! Только у меня поля встали все друг под другом, а не как у вас — имя и почта в одной строчке, ну и кнопка Отправить растянулась на ширину этих полей. Можно ли это исправить? И ещё вопрос — как увеличить высоту поля для текстового сообщения, а то это поле тоже выводится одной строчкой, как все остальные?
Да, все эти параметры можно менять непосредственно в самом CSS-коде. Просто поэкспериментируйте со значениями.
Ммм… Я не такой знаток, как вы ) Подскажите хотя бы, в какой категории эти значения находятся — я про длину кнопки Отправить и высоту поля для сообщения
Добрый вечер! Но при обновлении плагина все исчезнет? Как быть
Можно заморочиться через functions.php и дочернюю тему, а можно хранить измененные файлы локально и после обновления плагина синхронизировать изменения.
Сначала все сработало, потом решил исправить поля, покопался в этом немного. В итоге все сбилось и не хочет вставать обратно. Не знаю, что теперь делать. Единственное, пользовался не ftp программой, а ftp админом на хостинге. Никто не знает, что теперь делать?)
Например: скачайте плагин, достаньте из него файл стилей и залейте на сайт этот не измененный файл. А затем экспериментируйте снова
Спасибо большое, все отлично работает!
ТЫ удалил то что было указано в самом файле или просто дополнил эго?
Привет. Благодарю. Элегантное решение вопроса.
Chrckbox выходит просто отвратительно. Да и кнопки «file» тоже «не айс»… 🙁