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

Contact Form 7 - хороший плагин для создания форм обратной связи

Опубликовано: Январь 2, 2015 в 15:13 Категории: Формы обратной связи


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

Все дружно (это относится к поисковикам) порекомендовали Contact Form 7 Style — мудрые люди сказали — правь css и не морочь никому голову, «Блокнот» в руки и вперед. Забегая вперед — мудрые люди были правы.

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

Contact Form 7 Style

После установки создает в корне меню админки раздел «Contact style». В этом разделе есть два пункта содержащие шаблоны на день Валентина и Рождество и «Custom Style» где можно полностью настроить вывод формы. Собственно раздел «Custom Style» и интересует больше всего, подробнее о доступных настройках:

«GENERALS SETTINGS» — можно определить цвет фона, ширину формы (задается в px, % не пробовал),  толщина бордюра, форма (пунктир, сплошная и т.д.), цвет, скругление.

«INPUTS AND LABELS SETTINGS» — фон полей ввода, цвет шрифта ввода, фонт (список не велик и с кириллицей там едва ли что-то будет) и его размер. Цвет границ полей, стиль (пунктир сплошная и т.д.), толщина, скругление. Фонт ввода и его размер. Параметры полей в px — высота/ширина, отступы. Фонт метки, стиль, размер, цвет.

«SUBMIT BUTTON SETTINGS» — настройки кнопки отправки формы. Доступные настройки — размер кнопки, скругление, цвет, тип и цвет границы.

Проблемы в использовании.

Ознакомившись с настройками можно прийти к выводу, что все очень хорошо — практика показала обратное. Настроек действительно много, но их не хватает —  нет настроек отступа внутри формы, поэтому все блоки собираются на левой границе вплотную к краю форму. Странные настройки «по умолчанию» — где поле ввода размером 100*100 px. Если выставить правильно размеры полей, то выпадающего списка это не коснется и он потащит стиль основной темы. Сбросить на исходные настройки не получилось до удаления плагина…

Пока кроме как вручную поменять стили более менее пристойно не получилось… Чуда не произошло.

Важное примечание! Плагин Contact Form 7 Style недавно обновился и что то поменялось в настройках довольно значительно, так что надо смотреть и тестировать.

Запомнить, поделиться - Настройка внешнего вида Contact Form 7

Поделиться ВКонтакте Поделиться в Facebook Добавить в Twitter Поделиться с друзьями в Одноклассниках Поделиться В Моем Мире Поделиться в Гугл+

Всего комментариев: 4

  • Михаил
    Автор: Михаил Добавлено Июль 12, 2017 в 09:53

    Добрый день, у меня такая вот проблема, стоит дата Дата прибытия [date date-378] формат стоит дд.мм.гггг
    а в письме приходит формат гггг.мм.дд
    ВОТ как поменять что бы в письме приходило дд.мм.гггг

    Ответить
    • MR Nobody
      Автор: MR Nobody Добавлено Июль 12, 2017 в 16:24

      Добрый день.
      Задайте формат поля Дата в письме. Пример:

      Дата заезда: [_format_date-zaezd «d M Y, D»]

      Перед наименованием поля добавляется _format_. В кавычках задается формат даты, в примере «день месяц год, день недели».

      Ответить
  • Tala Prutkova
    Автор: Tala Prutkova http://talaprutkova.wordpress.com/ Добавлено Август 13, 2015 в 13:00

    Добрый день! Подскажите, пожалуйста, можно ли в Contact Form 7 изменить высоту поля для сообщения? Если да, то где именно в коде его искать?

    Ответить
    • MR Nobody
      Автор: MR Nobody Добавлено Август 13, 2015 в 13:09

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

      20×10
      20 колонок и 10 строк.

      [textarea text-test 20×10 «…»]

      Если нужно настраивать внешний вид элементов форм, то тут поможет шаблон (в качестве примера) и еще пара ссылок по теме:
      http://alldream.org/wordpress/plugins/formyi-obratnoy-svyazi/contact-form-7-formyi-obratnoy-svyazi/

      Ответить

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

Ваш email не будет опубликован.