Contact form 7 настройка внешнего вида

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

Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

  1. Вкладка Contact Form 7 для правки формы.
  2. Страницу на сайте с формой обратной связи.
  3. Редактор с открытым файлом CSS.

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

Добавляем классы к форме Contact Form 7.


Когда мы откроем форму для правки мы увидим примерно следующую картину:

contact form 7 внешний видcontact form 7 настройка внешнего вида

Такая форма обратной связи будет выглядеть примерно так:

contact form 7 изменить внешний вид

Скучно, не пропорционально, скажем прямо не красиво.

Для изменения внешнего вида формы нужно немного поработать со стилями, но для начала добавим несколько классов в шаблон формы. Для этого открываем форму для правки (как на картинке выше) и дописываем следующие классы:

contact form 7 стили

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


Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.

Определяем ID формы на странице.

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

Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.

красивая форма contact form 7

В открывшемся коде ищем начало нашей формы, выглядит это так:

стилизуем contact form 7

Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.


стилизуем contact form 7

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

Ну что, очередной шаг сделан, мы определили id, прописали наши классы, теперь приступим непосредственно к изменению внешнего вида.

Стилизация формы Contact Form 7, работа с файлом style.css

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

Изменяем цвет фона, отступы, шрифт формы.

После проделанной работы переходим к стилям. Сперва изменим (если это нужно) фоновый цвет формы, подгоним наши отступы, подберем необходимый шрифт и цвет текста. Все эти настройки будем проводить заранее зная ID. Как его узнать, мы рассматривали выше.

Сперва обратимся к файлу style.css, добавим первые правила для ID формы (добавлять нужно в самом низу файла), в моем случае это wpcf7-f172-p34-o1, вам же нужно подставить ваш идентификатор:

#wpcf7-f172-p34-o1 {
margin: 5px;
padding: 10px;
background: #B3AFAF;
font-family: Georgia, «Times New Roman», Times, serif;
color: #000;
}

Теперь разберем все подробнее:


  1. Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
  2. Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
  3. Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
  4. Цвет текста определяет свойство color, которое сейчас стоит в черном цвете (color: #000).

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

Определяем отступы между полями, изменяем рамку.

Переходим к нашим полям, добавим отступов:

#wpcf7-f172-p34-o1 p{
margin:5px;
}

Это отступы по краям полей, что бы текст и блоки не сливались в одно целое.


Следующим этапом будут рамки, я дам свой вариант, а вы сможете найти в сети множество вариантов которые вам понравятся и заменить их.

#wpcf7-f172-p34-o1 input,textarea {
border: 3px double #000;
}

О рамках немного подробнее. Значение в 3px это ширина рамки, double двойное использование (если не нужно, можно удалить это слово), #000 цвет рамки так же можете подобрать свой.

Можете сохранить изменения и посмотреть на то что у вас получилось. Далее перейдем непосредственно к полям и изменению их размеров и расположения.

Меняем ширину полей и их расположение.

Ранее мы немного изменили нашу форму и добавили классы, именно сейчас это и пригодится. По умолчанию ширина всех полей одинакова и это не очень красиво и удобно. Сейчас мы это исправим. Добавляем к нашему файлу стилей следующие правила:

.name-cf {
float:left;
padding: 2px;
}
.name-cf input {
width: 270px;
}
.thems-cf input {
width: 100%;
}
.clear-cf {
clear: both;
}
.text-cf textarea {
width: 100%;
}

Теперь разберем все поподробнее:

  1. Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
  2. Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input { width: 270px; }). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.

  3. Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input { width: 100%;}). Если вы хотите свое, точное значение укажите его в пикселях.
  4. Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input {width: 100%; }).
  5. Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea {width: 100%;}).

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

Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.

Переходим к нашей кнопке, выровняем по центру и добавим фон:

.submit-cf {
width: 200px; /*ширина блока*/
height: 25px; /*высота*/
margin: 0 auto; /* Отступ слева и справа */
}
.submit-cf input {
width: 200px;
background:#96B195;
}

Традиционно объясняю что к чему:

  1. Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
  2. Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px, желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).

Сохраняем наши настройки и смотрим что у нас получилось:

contact form 7 ширина, размер полей

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

Надеюсь для вас статья была полезной, если же что-то не так или возникли проблемы оставьте свой комментарий и я постараюсь ответить (подправить).

 

yrokiwp.ru

Немножко о «Вордпрессе»

Одним из наиболее популярных и самых распространенных инструментов для разработки и наполнения информационных ресурсов является «Вордпресс». Изначально этот программный продукт был ориентирован на создание простеньких блогов. Но затем профильные специалисты дополнили его функционал, что позволило создавать с помощью этой системы управления контентом уже и другие интернет-ресурсы.

contact form 7 настройка плагина

Специализация «Контакт форм 7»


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

Порядок установки плагина

Существует три способа установки плагинов на платформе «Вордпресс»:

  • Путем скачивания ZIP-архива из глобальной паутины и «заливки» его в соответствующий каталог интернет-ресурса.

  • С использованием различного рода FTP-клиентов.

  • Загрузка минипрограммы с применением административной панели управления сайтом, блогом или порталом.

Наиболее безопасным из приведенных трех вариантов инсталляции плагинов является последний. В этом случае программный код скачивается с официального сайта и в нем точно нет различного рода вредоносных, опасных фрагментов. Сам же порядок установки плагина в этом случае следующий:

  • Заходим в административную панель «Вордпресса».

  • Затем необходимо переместиться в раздел «Плагины».


  • В открывшемся окне выбираем пункт «Добавить новый».

  • В строке поиска вводим название плагина — Contact Form 7 — и после этого наводим указатель мышки на кнопку «Поиск» и делаем однократный клик. После этого начнется операция поиска необходимого программного обеспечения.

  • По ее окончании высветится список найденных плагинов. В этом списке находим тот, который нам нужен, и кликаем по кнопке с надписью «Установить», которая расположена напротив него.

  • После этого система управления контентом автоматически загрузить и установит этот плагин.

  • На следующем этапе необходимо активировать инсталлированного программное обеспечение. Для этого переходим на вкладку «Плагины» и в списке находим Contact Form7. Рядом с ним находится надпись: «Активировать», по ней и кликаем один раз мышкой.

  • Обновляем административную панель системы управления контентом и находим среди ее пунктов Contact Form7. Это и есть условие успешной инсталляции этого популярного и функционального плагина.

настройка contact form 7 для wordpress

Алгоритм настройки «Контакт форм 7»

Настройка Contact Form 7 состоит из таких пунктов:

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


  • На следующем этапе выбираем язык формы и задаем ее название.

  • Затем нужно, при необходимости, переконфигурировать ее шаблон.

  • Сохраняем внесенные изменения.

  • Создаем новую страницу с полученным ранее кодом.

  • Потом необходимо опубликовать новую страницу.

  • На завершающем этапе необходимо перейти на сайт и проверить корректную работу созданного элемента интерфейса интернет-ресурса.

Создаем новую форму

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

  • Заходим в меню этого плагина и выбираем пункт «Формы».

  • В окне, которое откроется после этого, необходимо поставить флажок напротив пункта «Контактная форма1».

  • Затем сверху над ней, в выпадающем списке «Действия», выбираем пункт «Удалить».

  • В ответ появится вопрос на подтверждение выполняемых действий. Необходимо подтвердить удаление формы и кликнуть мышкой на кнопке «Да».

  • На следующем выбираем пункт меню: «Создать новую» в административной панели «Вордпресс» «Contact Form7».

  • В открывшемся окне в выпадающем списке выбираем язык интерфейса будущей формы — «русский». После жмем кнопку «Создать».

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

Задаем название формы

После выполнения всех ранее приведенных действий появиться окно ввода названия новой формы в Contact Form 7 Style. Настройка этого элемента интерфейса именно и начинается с этой несложной операции с одной стороны. Но название формы лучше давать исходя из поисковой оптимизации. Поэтому наиболее оптимальным будет в этом случае, например, «Форма обратной связи» или «Задаем вопрос администратору сайта». Как только определились с названием этого элемента интерфейса, набираем его в соответствующем поле окна запроса.

contact form 7 настройка почты

Редактируем шаблон «Контакт форм 7»

В этом же самом окне с названием созданной формы есть 4 вкладки. Первая из них — «Шаблон». По умолчанию здесь сформировано лишь 5 элементов:

  • Место набора имени посетителя интернет-ресурса.

  • Поле набора адреса электронного почтового ящика посетителя, задавшего вопрос.

  • Еще одно поле позволяет набрать тему вопроса.

  • Далее большое текстовое поле предназначено для набора непосредственно самого сообщения.

  • Последний элемент формы по умолчанию — это кнопка с надписью «Отправить».

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

Настройка длины полей и не только

В этом же самом месте можно изменить длину поля ввода в Contact Form 7. Настройка ширины любого текстового поля выполняется следующим образом:

  • Например, необходимо увеличить до 55 количество символов в имени посетителя интернет-ресурса. По умолчанию их 40.

  • Для этого в коде [text * your-name] в конце добавляем цифры 60/55. В результате будет получен код [text * your-name 60/55]. После сохранения внесенных изменений длина этого поля будет равна 60, а максимальное количество символов, которое в нем можно набрать — 55.

Аналогичным образом можно изменить размеры текстового поля сообщения. Только в этом случае необходим изменить код данного элемента следующим образом [textarea your-message 40 х 30]. В этом случае 40 — это количество букв в одной строке, а 30 — общее количество срок в этом элементе интерфейса в Contact Form 7. Настройка внешнего вида самой же формы осуществляется именно путем подбора значений параметров каждого отдельно взятого элемента. Поэтому рекомендуется в коде каждого элемента указывать конкретные значения каждого приведенного в этом разделе параметра.

contact form 7 style настройка

Остальные вкладки формы

Как было отмечено, первая вкладка носит название «Шаблон формы». Следующая за ней в этом окне — «Письмо». В ней задаются параметры того места, в которое будет отправлять почта с этого интернет-ресурса. На вкладке «Уведомление» формируется текст сообщения, которое будет выводиться в случае успешной отправки письма. Тут же есть также возможность заготовить сообщение и на тот случай, если не получится связаться с администратором сайта с помощью средств. Последняя вкладка в Contact Form 7 — «Дополнительные настройки». В ней находятся те параметры, которые на практике используются весьма и весьма редко. Например, можно с ее помощью настроить отслеживание введенного пользователем текста средствами «Яндекс» — метрики.

Поля, которые можно добавить с помощью этого плагина в эту форму

Настройка Contact Form 7 для WordPress позволяет добавить такие элементы интерфейса на форму обратной связи:

  • Тестовое поле — универсальный элемент интерфейса, в который можно ввести любой набор символов.

  • E-Mail – место ввода названия электронного почтового ящика.

  • URL – поле набора адреса интернет-странички.

  • Номер телефона — позволяет ввести номер телефона в международном формате.

  • Элемент «Число (spinbox)» позволяет создать поле ввода любого целочисленного значения (например, возраста посетителя).

  • Элемент «Число (Slider)» добавляет на форму ползунок, с помощью которого можно будет выбрать числовое значение из заданного диапазона.

  • Пункт «Дата» создает специальное поле ввода, в котором можно указать необходимую дату. При активации этого элемента интерфейса внизу выпадает календарь, в котором можно сразу выбрать необходимую дату.

  • В свою очередь, пункт выпадающего меню «Текстовое поле» предназначен для набора текстовой части электронного письма.

  • Следующий пункт — «Выпадающее меню» — позволяет из фиксированного списка выбрать необходимый параметр.

  • А вот «CheckBoxes» предназначен для выбора одного или нескольких значений из заданного списка.

  • Элемент интерфейса «Radio Buttons» практически идентичен предыдущему. Разница лишь в том, что в этом случае можно выбрать лишь один правильный вариант, в то время как «CheckBoxes» может иметь несколько правильных значений.

  • Пункт «Acceptance» позволяет добавить всего один флажок на создаваемую форму. Как правило, он используется для ознакомления с какими — либо условиями и без их принятия в дальнейшем не будет возможна отправка электронного письма.

  • Пункт «Меню» позволяет создать специальный раздел в интерфейсе, который будет обеспечивать защиту почтового ящика от спама. В этом случае перед отправкой необходимо будет дать правильный ответ на поставленный вопрос.

  • Второй вариант защиты — это «CAPTCHA». При его выборе на форме добавиться отдельный раздел, в котором будет отображаться картинка с символами и дополнительное поле для их ввода.

  • Следующий пункт — «Отправка файла». Позволяет добавить к тексту письма файл с различного рода пояснениями и комментариями для администратора ресурса.

  • Последний пункт — «Кнопка отправки» — позволяет добавить соответствующий элемент интерфейса.

Сохраняем внесенные изменения

После того как необходимые значения заданы, а форма должны образом сконфигурирована, необходимо все это сохранить. Для этого в окне редактирования плагина подымаемся в его верхнюю часть. Здесь должна быть кнопка «Сохранить». Наводим указатель манипулятора на нее и делаем однократное нажатие на ней. В ответ появится код формы, который выделяем с помощью все того же указателя мышки и копируем. Далее перемещаемся в административной панели системы управления контентом в пункт «Страницы». Затем создаем новую страницу с необходимым названием (например, «обратная связь», «Контакты» или «Задать вопрос администратору ресурса»). Потом переводим курсор набора в поле ввода ее кода. При этом необходимо перевести режим набора кода в «Текст» на панели параметров. После этого вставляем ранее полученный код формы. Далее в правой части интерфейса находим кнопку «Опубликовать» и наводим на нее мышку. На следующем этапе совершаем однократное нажатие левой кнопки мышки на этом элементе интерфейса системы управления контентом.

contact form 7 настройка внешнего вида

Проверяем полученный результат

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

Плюсы и минусы плагина. Альтернативные варианты

Отличным решением для начинающего разработчика по созданию формы обратной связи является мини-программа Contact Form 7. Настройка отправки почты, создание элементов интерфейса и прочих важных элементов интерфейса в этом случае большей частью автоматизировано и требует минимальных знаний пользователя. Поэтому для простенького интернет-ресурса начального уровня и с начинающим администратором — это отличное решение. Но ведь любой плагин — это дополнительная нагрузка на ресурсы интернет-странички, которая снижает быстродействие. Как результат, более продвинутые пользователи рекомендуют уходить от такого простого способа создания формы обратной связи. Ее также можно и самостоятельно создать с помощью HTML, CSS и JS, пусть и с меньшим уровнем функциональности. При этом снизится потребность в вычислительных ресурсах сайта и существенно повысится уровень быстродействия.

contact form 7 настройка

Итоги

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

autogear.ru

Друзья самый лучший плагин для отправки писем с сайта не всегда мы используем на все 100%

Настройка Contact Form 7 . В этом видео я рассказываю:
Как создать простую форму

  1. Как настроить и изменить стандартные уведомления
  2. Создадим форму со своими полями
  3. Научимся загружать файлы через Contact Form7
  4. Создадим письмо со своим текстом
  5. Поменяем стили формы
  6. Оформим контакт форм при помощи плагинов
  7. Создадим страницу спасибо

Я разбил этот урок на 2 части.

В первой части настройки Contact Form 7,  мы научимся создавать простую форму (кто еще не умеет), добавим свои поля для формы, и напишем свое письмо, которое будет получать пользователь. Научимся использовать шорткоды для подстановки значений имени е-maila темы и сообщения а так же любых полей. Научимся делать в форме загрузку файлов.

А вторая часть полностью посвещана внешнему оформлению форм.

1) Кастомный css https://youtu.be/4CXiYcCuh9Y?t=44
2) Расположить поля горизонтально https://youtu.be/4CXiYcCuh9Y?t=541
3) Плагин для создания красивых форм https://youtu.be/4CXiYcCuh9Y?t=720
4) Создаем форму по своим стилям https://youtu.be/4CXiYcCuh9Y?t=806

Текст который я использовал при настройке Contact Form 7

Код для страницы спасибо

Вставьте свою страницу спасибо.

Код для формы с кастомными стилями

 

 

===========================

Код которым я оформлял всю форму

========================

А этот код я вставлял в кастомайзер

 

Спасибо что посмотрели это видео, Настройка Contact Form 7 следить за обновлением можно подписавшись на канал по ссылке http://www.youtube.com/channel/UCOvS3wi2Tr9Q15xVnWpgBtQ?sub_confirmation=1

Мой второй канал с различными лайфхаками для жизни тут http://www.youtube.com/user/mosgy?sub_confirmation=1

Если нужна личная консультация всегда пожалуйста, пишите на yarg@bitrix24.ru договоримся.

Или начните обучение бесплатно на моем курсе https://e-integrate.ru

e-integrate.ru

Отключаем стандартные contact form 7 стили

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

Стандартные contact form 7 сообщения

Для этого, в файле functions.php  добавляем следующий код:

Теперь, когда старые стили удалены, можно сверстать/взять новые css стили сообщений (например тут) и прикрутить их к contact form 7. Для примера, я уже имею свои готовые стили alert-ов и буду использовать их:

Шаблон сообщений для cf7

Отключение скриптов

Возвращаемся в functions.php файл и добавляем следующий код:

В коде выше, мы перезаписываем нативный скрипт contact form плагина на наш и подключаем его через функцию wp_enqueue_script . Кстати, если вы начинающий (или нет) разработчик и хотите узнать больше о встроенных функция в WordPress, то возможно вам будет интересна данная статья.

NEW_PATH — путь до нового js файла в теме, который нужно скопировать из wp-content/plugins/contact-form-7/includes/js/scripts.js

Зачем подключать новый скрипт?

Все просто. При отправке формы, сообщения/их статус «подтягиваются» через AJAX, т.е грубо говоря contact form после submit возвращает какой-то кусок html кода, который каждый раз перезаписывается, и естественно отслеживать постоянно на триггерах, когда обновится форма — неправильно. Можно конечно динамически отслеживать DOM через MutationObserver , но и он имеет свои определенные недостатки. Гораздо проще перезаписать главный скрипт cf7 плагина и уже внутри изменить js код под свои нужды.

Меняем внешний вид

Далее осталось только открыть скопированный js файл и внести нужные изменения. В моем случае, необходимо только добавлять/удалять классы для сообщений в зависимости от статуса — spam / mail_sent / mail_failed и т.д . Для этого в методе var ajaxSuccess = function( data, status, xhr, $form ) {  в case выборке просто манипулируем нужными классами.  В итоге при отправке формы, получаем красивые стилизованные сообщения:

Стилизованные сообщения

ziscod.com

Основные возможности плагина

  • Тонкая настройка под любые потребности пользователя;
  • Простой интерфейс и понятные опции;
  • Удобный просмотр электронной почты;
  • Поддержка множества языков, включая русский;
  • Надежная защита от спама текстовым вопросом или капчей;
  • Поддержка Ajax запросов;
  • Настройка внешнего вида через CSS стили;
  • Полезная документация, отвечающая на многие вопросы.

Использование плагина

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

Первое, что вы заметите после активации плагина, это появление нового пункта в административной панели WordPress под названием «Contact Form 7», где осуществляется вся настройка плагина. В качестве альтернативы, вы можете зайти туда через список установленных плагинов, найдя Contact Form 7 и нажав «Setting».

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

Сознание новой формы

Для того, чтобы приступить к созданию новой контактной формы, нужно нажать кнопку «Добавить новую». Перед вами откроется окно, в котором, первым делом, нужно дать ей название. Ниже, вы увидите содержание текущего шаблона, в нем уже будет вставлено несколько тегов, чтобы дать вам общее представление о том, как это должно выглядеть. Вы можете использовать любые другие теги, такие как:

  1. Текстовое поле, адрес электронной почты (text, email);
  2. Ссылка (url);
  3. Номер телефона, диапазон чисел, дата (tel, number, date);
  4. Текстовое поле в несколько строк (textarea);
  5. Флажки, переключатели и выпадающее меню (checkbox, radio, select);
  6. Проверка капчей (captchac и captchar);
  7. Проверка контрольным вопросом (quiz);
  8. Флажок согласия (acceptance);
  9. Прикрепление файлов (file);
  10. Кнопка отправки (submit).

Кроме того, для каждого из них можно задать определенные параметры, например, сделать поле обязательным для заполнения, указать значение по умолчанию, а также добавить идентификатор или класс для того, чтобы воспользоваться им при оформлении через CSS стили.

В качестве примера, можно добавить к готовому шаблону такие поля, как: никнейм, номер телефона, текстовый вопрос для защиты от спама. Это будет самая простая форма отправки сообщения администратору сайта. Для ее создания понадобятся теги (text, tel, quiz).

Сперва добавим новое поле для никнейма автора сообщения, с именем «Ваш никнейм», как написано в других готовых полях (можно просто скопировать). Теперь, в разделе «Шаблон формы» выбираем «text» и задаем нужные параметры. Например, можно сделать обязательное заполнение, поставив галочку на «Required field». В качестве альтернативы, можно сделать это поле обязательным для заполнения просто добавив звездочку (text*).

contact-form-7-signup

Имя поля можно оставить по умолчанию или задать любое другое, например, «your-nickname». Чтобы поле имело содержание по умолчанию, которое поможет пользователю сориенироваться быстрее, нужно добавить его в строчку «Значение по умолчанию». Если поставить галочку на «Use this text as the placeholder of the field», то это содержание будет исчезать при нажатии. Далее, можно задать атрибуты «ID» или «Class», чтобы использовать их для оформления поля через CSS стили. Теперь остается только нажать «Insert Tag», и сгенерированный тег появится в содержимом. Он должен выглядеть так:

<p>Ваш никнейм<br />
(text your-nickname id: your-nickname placeholder "Никнейм") </p>

Аналогичные действия нужно провести и при добавления остальных полей (tel, quiz). Только, в случае с вопросом для защиты от спама (quiz), нужно будет написать вопрос и ответ одной строкой, через разделитель «|». Это должно выглядеть примерно так (Сколько будет 2+3?|5). Обратите внимание, что очередность тегов в содержании шаблона определяет расположение полей на сайте.

Теперь, остается только нажать кнопку «Сохранить», после чего, наверху появится сгенерированный шорткод для вставки в пост, страницу, или текстовый виджет. Если все сделано правильно, то готовая форма отобразиться на вашем сайте WordPress там, где вы вставили этот шорткод.

Настройка адресата и содержания писем

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

  1. «To» – адрес почтового ящика администратора;
  2. «From» — имя отправителя;
  3. «Тема» — тема письма;
  4. Additional Headers – дополнительные заголовки;
  5. Message Body – содержимое письма;
  6. Прикрепленные файлы.

Некоторые из них уже заполнены данными по умолчанию, но вы можете изменить их под свои нужны. Например, можно добавить телефон отправителя, скопировав название соответствующего тега из шаблона формы. Не забывайте нажать «Сохранить» после внесения изменений.

обратной-связи-contact-form-7-настройка

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

Любой посетитель может делать ошибки в некоторых полях при отправке сообщения, тогда ему должны отображаться соответствующие уведомления. Их можно найти в разделе «Уведомления при отправке формы». Они все на английском языке, поэтому нужно будет перевести их на русский, или заполнить собственным текстом. Это обязательно нужно сделать, иначе посетитель просто не поймет, что он делает не так.

Дополнительные параметры

Вы можете задать дополнительные параметры для каждой контактной формы, добавив часть кода, в определенном формате, в специальное поле раздела «Дополнительная настройка». К примеру, строка «demo_mode: on» включает демонстрационный режим, в котором не будут отправляться электронные письма, а будет только выводиться сообщение об успешной отправке. Кроме того, если вставить строку

acceptance_as_validation: on

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

Персонализация

По умолчанию, для всех полей в Contact Form 7 используется стандартная стилизация из шаблона WordPress, не отличающаяся особой красотой. Из-за этого, многие пользователи ищут альтернативные решения, с более привлекательным внешним видом. Но для тех, кто знаком с CSS, будет очень просто изменить внешний вид полей по своему вкусу. Для этого можно воспользоваться атрибутами «ID» и «Class», которые задаются в параметрах каждого тега.

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

tema_contact_form_7

Дополнение

В качестве дополнения, стоит упомянуть одну очень хорошую особенность в Contact Form 7 для WordPress, с помощью которой можно фильтровать большие потоки писем от посетителей. Бывают ситуации, когда их действительно очень много, поэтому быстро ответить на все невозможно, а фильтровать вручную очень долго. Конечно, в таком случае, можно использовать метки и фильтры непосредственно в почтовом ящике, но это тоже потребует много времени. Гораздо проще будет осуществить фильтрацию еще на стадии отправки, воспользовавшись тегом «select» в Contact Form 7, отображающим раскрывающийся список. В этом списке можно предоставить пользователю выбор категории сообщения, чтобы по ней определять важность приходящей корреспонденции.

Создайте новое поле, выбрав «drop-down menu», и установите ему обязательное заполнение. Затем, добавьте в строку «Options» несколько вариантов категорий для сообщений, в зависимости от направления деятельности вашего сайта (например, «Общие вопросы», «Отзывы по работе компании», «Верните мои деньги»). Каждая категория должна начинаться с новой строки. Также, желательно поставить галочку на «Insert a blank item as the first option», чтобы первым пунктом списка была пустая строка, и пользователю пришлось выбирать подходящую причину, а не оставлять первый вариант.

Теперь, нажмите «Insert Tag» и скопируйте его название. Затем, перейдите в раздел «Письмо», и вставьте скопированное в строку «Тема», обязательно перед «[your-subject]». Готово, теперь в теме каждого пришедшего письма будет значиться выбранная пользователем категория, что значительно облегчит фильтрацию.

Вывод

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

Похожие статьи

wordpresslib.ru

Плагин Contact Form 7 поможет организовать обратную связь на вашем сайте.

Скачать плагин Contact Form 7 можно на официальном сайте WordPress

Скачать плагин Really Simple CAPTCHA можно на официальном сайте WordPress

Как установить и подключить этот плагин мы рассмотрели в уроке «Форма обратной связи для сайта«, сейчас разберемся с дополнительными функциями плагина  Contact Form 7. Форма корректно работает на мониторах, планшетах, телефонах и ноутбуках. Кстати если у вас сломался ноут, то есть сервис где делают ремонт ноутбуков HP.

После того как вы скачали и активировали плагин зайдите в настройки плагина  перейдя в новый раздел панели управления «Контакты».

Наведите мышкой на название формы и выберите «Редактировать»

редактировать Contact Form7

Откроется окно изменения параметров формы

имя формы ContactForm7

 

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

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

Для добавления новых полей в форму нажмите на выпадающий список №3 — «Сгенерировать тэг» и из выпадающего списка выберите необходимый элемент.

Подсказки и поля формы по умолчанию располагаются так: вверху подсказка, внизу элемент.  Если хотите расположить описание и элемент в одну строку — уберите после текста тэг <br />
. Весь блок с описанием и элементов должен быть в одну строку и находиться внутри тэга <p>.

Текстовое поле

Contact form 7 настройка внешнего вида

Из выпадающего списка выберем элемент «Текстовое поле»

добавить текстовое поле Contact Form 7

Если любая функция которую добавляете обязательна — поставьте галочку 1 и не забудьте от этом написать в описании.

Можно в поле ввода добавить дополнительную информацию, чтобы сделать более понятным заполнение формы. Отметьте галочкой пункт 2 «Использовать как заполнитель (placeholder)?» и рядом в поле впишите подсказку. При заполнении этого поля в форме текст подсказки исчезнет. Дальше следуйте подсказкам плагина. В результате получится такое вот поле в готовой форме:

Contact form 7 настройка внешнего вида

Обязательно вставьте код в шаблон письма, иначе данные из этого поля не передадутся на почту! Это касается не только текстовых полей но и любых других элементов.

E-mail

поле email

Используется для передачи в форму адреса почтового ящика отправителя

URL

поле url

Позволяет добавить в форму адрес сайта.

Номер телефона

поле телефон

В это поле возможно вписать только цифры

Число (spinbox)

поле число

Поле, в котором можно установить количество чего-либо, например товара. Количество устанавливается стрелками вверх/вниз.

Дата

поле дата

Вставляет в форму календарь с возможностью выбора даты. Например используется для резервации номеров в отеле. Дата заезда, дата отбытия.

Текстовое поле

текстовое поле

Да, не удивляйтесь 🙂 Еще одно текстовое поле. На этот раз, это поле имеет большие размеры и позволяет писать в него много текста. Например отзывы, комментарии.

Выпадающее меню

выпадающий список

Когда много вариантов чего-либо и необходимо выбрать какой то пункт из большого списка, например список городов, улиц, товаров.

поле выпадающий список

Список необходимо разместить в поле Выбор, каждый пункт с новой строки.

Checkboxes

поле чекбоксынастройка чекбоксов

Флажком, или на жаргоне разработчиков чекбоксом, называется элемент, который создает поле для проставления галочки. Это поле имеет два состояния — отмечена галочка или нет. Возможен множественный выбор. Располагаются только в ряд, если отметить галочкой «Сделать чек-боксы взаимоисключающими?» то будет возможен выбор только одного параметра.

Radio buttons

поле радокнопокRadio buttons настройка

Переключатели (жарг. радиокнопки) используют, когда необходимо выбрать один единственный вариант из нескольких предложенных. Отметив галочкой пункт » Разместить сначала метку, а потом чек-бокс?» меняется расположение метки и поля выбора, по умолчанию сначала выбор, потом метка.

Acceptance

поле соглашение

Подтверждение чего-либо. Допустим соглашение принятия условий описанных выше.

Вопрос

поле вопрос

настройка вопроса Contact Form 7Это первая линия обороны от спама, самая элементарная. В настройка пишите какой то вопрос, можно цифрами, можно буквами или и так и так, и указываете правильный ответ. Если ответ при заполнении формы будет правильным, то форма отправится. Зеленым отмечено какая часть этой формулы будет отображаться на сайте перед полем ввода ответа, красным — ответ. Правильный ответ в формуле пишется после знака | (вертикальной черты)

CAPTCHA

Добавляет в форму защиту от спама.

поле капча

Для работы этой функции необходим еще один плагин .  Скачивайте, устанавливаете, активируйте плагин.

Далее возвращаемся к редактированию формы и добавляем функцию CAPTCHA.

добавление captcha Contact Form 7

Настройки можно не менять, копируете и вставляете 2 строчки перед кнопкой отправить.

Отправка файла

поле отправки файла

добавить загрузку файла Contact Form7

К форме отправки сообщения можно прикрепить файл. В настройках можно указать максимальный размер в байтах, и разрешенные форматы для загрузки, например .jpg .tiff .doc

Кнопка отправки

Отправка формы. В настройках в разделе «Ярлык» — можно дать название кнопки (Отправить, ответить, послать 🙂 )

Настройка внешнего вида Contact Form 7

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

За отображение формы, ее полей и прочих элементов отвечает код:

 

.wpcf7 { background-color:#ddd;	} /*цвет фона формы */  .wpcf7 input,  .wpcf7 textarea{    padding:5px;  color:#1D1D1D;  font-family:Arial, Helvetica, sans-serif;  font-size:16px;  line-height: 20px;    border: 1px solid #C7C7C7;    box-shadow: inset 2px 2px 8px #F9F9F9;    -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: #FDFDFD;    outline: none;  }  

Что есть тут что.

 .wpcf7 input, .wpcf7 textarea — стиль поля ввода (текстового поля)

  1. padding — задает отступ от содержимого до границы элемента. Здесь — отступ от вводимого в поле текста до границы поля. Устанавливается значение в пикселях Xpx, где X количество пикселей. Пример: padding: 5px 3px 6px 8px;
  2. color — цвет текста.
  3. font-family — шрифт полей ввода.
  4. font-size — размер шрифта
  5. line-height — высота строки
  6. border — рамка вокруг поля ввода
  7. box-shadow — тень блока. inset указывает на то, что тень внутренняя. Если нужна внешняя тень, пропустите это значение. Второе и третье значения 2px 2px указывают на смешение тени по горизонтали и вертикали соответственно. Четвертое значение 8px задает радиус размытия тени. Пятое — #F9F9F9 — цвет тени.

 

Настройка кнопки Contact Form 7

 

.buttons_form {   padding: 0px;   height: 30px;   width: 150px !important;   border: none !important;   cursor: pointer;   color: #fff;   -webkit-border-radius: .5em;   -moz-border-radius: .5em;   border-radius: .5em;   color: #faddde;   border: solid 1px #980c10;   background: #d81b21;   background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));   background: -moz-linear-gradient(top, #ed1c24, #aa1317);   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');  }  

Стиль уведомлений Contact Form 7

Он отвечает за сообщения об ошибках или успешной отправке

.wpcf7 .wpcf7-validation-errors{  border:none;  background-color:#246416;  color:#fff;  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:#349622;  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:#349622;  padding:5px;  padding-left: 5px;  padding-right: 5px;  border-radius:10px;  width: 290px;  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 { background-color:#ddd;	} /*цвет фона формы */  .wpcf7 input,  .wpcf7 textarea{ /* Данная часть кода отвечает за стиль полей ввода, текстовые области */    padding:5px; /* Устанавливает отступ от полей элемента до его содержимого, можно поставить любое знаниче, например 10px */    color:#1D1D1D; /* Цвет текста в полях ввода */    font-family:Arial, Helvetica, sans-serif; /* Шрифт текста в полях ввода */    font-size:16px; /* Размер текста в полях ввода */    line-height: 20px; /* Высота стоки в полях ввода */    border: 1px solid #C7C7C7; /* Рамка вокруг полей. Первое значение - ширина в пикселах, второе - стиль рамки, третье - ее цвет */    box-shadow: inset 2px 2px 8px #F9F9F9; /* Тень от полей ввода. 2px - сдвиг по оси x, 2px - сдвиг по оси y, 8px - радиус размытия тени, #F9F9F9 - цвет тени */    -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: #FDFDFD; /* Фон поля ввода при наведении указателя мыши на него */    outline: none; /* Внешняя граница поля ввода текста */  }    .wpcf7 input.wpcf7-submit{/* Данная часть кода отвечает за стиль кнопки Отправить в форме */    -webkit-transition: 0;  -moz-transition: 0;  -o-transition: 0;  transition: 0;    border: none; /* Рамка вокруг кнопки */  position: relative;    color: #fff; /* Цвет текста */    text-transform: uppercase; /* Преобразование текста (uppercase значит, что текст на кнопке будет отображаться заглавными буквами) */    /* Скругление углов кнопки. Значения следующих трех свойств должны быть одинаковы, так как это одно и то же, только для разных браузеров */    -webkit-border-radius: 6px; /* Скругление углов для Chrome */  -moz-border-radius: 6px; /* Скругление углов для Mozilla FireFox */  border-radius: 6px; /* Скругление углов для всех остальных браузеров, в том числе мобильных */    font-size: 14px; /* Размер текста кнопки */  font-weight: bold; /* Стиль текста (bold значит жирный) */  padding-top: 11px; /* Отступ сверху от края элемента до его содержимого */  padding-bottom: 10px; /* Отступ снизу от края элемента до его содержимого */  padding-left: 35px; /* Отступ слева от края элемента до его содержимого */  padding-right: 35px; /* Отступ справа от края элемента до его содержимого */    /* Gradient background - Градиентный фон кнопки */    background-color: #000000; /* Цвет фона кнопки, если градиент не поддерживается браузером */    /*В следующих свойствах цвета должны быть указаны одинаково, так как это одно и то же, только для разных браузеров. Разберем первое свойство. Часть from(#676767), to(#3B3B3B) значит, что надо отобразить градиент, где от цвета #676767) идет переход к цвету #3B3B3B */    background: -webkit-gradient(linear, left top, left bottom, from(#676767), to(#3B3B3B));  background: -moz-linear-gradient(top, #349622, #246416);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#349622', endColorstr='#246416');  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)";    /* Drop Shadow - Тень кнопки. Цвет тени указан в RGBA */  -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(#246416), to(#349622));  background: -moz-linear-gradient(top, #246416, #349622);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#246416', endColorstr='#349622');  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)";  }    /* On click - стиль кнопки при нажатии на нее се почти то же самое, что и в предыдущем блоке */  .wpcf7 input.wpcf7-submit:active{  top: 1px;    color: #d8c6e2; /* Цвет текста кнопки при нажатии на нее */    background-color: #000000;  background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416));  background: -moz-linear-gradient(top, #FF0000, #246416);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#246416');  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)";    -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;  }    /* CF7 Messages - Стиль сообщений об успешной отправке, ошибках и т.д. */    .wpcf7 .wpcf7-validation-errors{ /* Стиль сообщений при ошибках валидации */  border:none; /* Рамка блока сообщения */  background-color:#246416; /* Фон */  color:#fff; /* Цвет текста */  margin:0; /* Внешний отступ */  padding:20px; /* Внутренний отступ */    /* Скругление углов для разных браузеров - следующие 3 свойства */  -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; /* Внутренний отступ */    /* Скругление углов для разных браузеров - следующие 3 свойства */  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;  }    .wpcf7 .wpcf7-mail-sent-ng{  border:none;  background-color:#349622;  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:#349622;  padding:5px;  padding-left: 5px;  padding-right: 5px;  border-radius:10px;  width: 290px;  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;  }  

urokwp.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Adblock
detector