Contact form 7 внешний вид: Меняем внешний вид Contact form 7

Меняем внешний вид Contact form 7

Приветствую Вас, дорогой читатель моего блога.

Сегодня я покажу вам как очень быстро и просто изменить внешний вид contact form 7, что бы она стала более привлекательной.

Навигация по статье:

Изначально Сontact Form7 выглядит достаточно невзрачно. К счастью это поправимо! Для изменения внешнего вида этой формы мы с вами можем воспользоваться либо специальным плагином, либо прописать в файл style.css нашей темы несколько своих стилей.

Обзор плагина Сontact Form7 Style

Итак, начнем с плагина. Устанавливать мы будем плагин Сontact Form7 Style. Переходим в консоль нашего сайта, далее выбираем здесь Плагины -> Добавить новый. В поле поиска вводим название плагина и нажимаем Enter , далее кнопка установить, а затем активируем плагин.

Теперь в боковом меню нашей панели управления сайтом появился отдельный пункт Contact Style.

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

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

После того, как вы все выставили нажимаем на кнопку «Обновить».

Меняем внешний вид Contact Form7 при помощи собственного стиля.

Для этого переходим в пункт Сontact Form7 Style ->Add new. Сразу же вводим название нашего стиля.

И переходим к заданию стилей.

Стили для формы

form Background – цвет всей формы.

form widht — это ширина формы. По умолчанию стоит 100%, если вас это не устраивает, вы можете задать ширину в пикселях, например 600.

form box sizing — определяет алгоритм расчета ширины и высоты того ил иного элемента на странице. Рекомендую оставить по умолчанию.

form

form border style — определяет стиль границы нашей формы.

Здесь возможно несколько вариантов:

• none — граница отсутствует;
• solid — сплошная линия;
• doted — пунктирная граница;
• double — двойная линия;
• groove — эффект вогнутости границы;
• ridge — эффект выпуклости границы;
• inset — эффект вдавленности формы;
• outset — эффект выпуклости формы.

form padding — внутренний отступ, расстояние от границы формы до внутренних элементов формы, т.е. до всех надписей, полей и т.д. Рекомендую устанавливать хотя бы пикселе 20, потому, что изначально элементы прилипают к границе формы, это выглядит не очень красиво.

form margin — это внешний отступ, т.е. это отступ от границ вашей формы до каких-то внешних элементов, который окружают форму.

form border color — цвет границы формы.

form border radius — определяет радиус скругления углов. Задается в пикселях.

form line height — высота строк в форме или междустрочный интервал, задаётся в пикселях.

Стили для полей ввода

input background – цвет фона полей.

input color — цвет текста который будет отображаться внутри полей.

input border color — цвет границы полей ввода.

input font size — размер шрифта.

input line height — высота строки.

input border widht — ширина границы поля ввода.

input border style — стиль границы поля ввода.

input border radius — скругление углов поля ввода.

input font style — стиль текста, отображаемого в полях ввода.

Можно задать:

• default — стиль по умолчанию;
• normal — обычный;
• italic — курсив;
• oblique — жирный.

input font weight — жирность шрифта.

• default — стиль по умолчанию;
• normal — обычный;
• bold — жирный;
• bolder — более жирный;
• lighter — тоньше;
• initial — исходный;
• inherit — это наследование, т.е. будут наследоваться стили родительского элемента. Если к примеру для формы или страницы применен стиль жирный, то и для текса внутри этих полей тоже будет применяться жирный шрифт. Я оставлю здесь «normal».

input width — ширина поля для ввода текста. По умолчанию задается 100%. Если Вам нужно задать в пикселях — ставите в пикселях.

input box sizing — оставляем по умолчанию.

input height — высота полей ввода.

input padding — внутренний отступ от границы поля ввода текста до текста.

input margin — внешний отступ.

Изменяем внешний вид для текстового поля

textarea background color — цвет фона.

textarea height — высота поля для ввода сообщения.

textarea widht — ширина поля

textarea box sizing – алгоритм расчёта ширины и высоты элементов (оставляем стандартные)

textarea border-size — толщина границы

textarea border color – цвет границы

Стили меток

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

Прямо под блоком, где мы задавали стили для поля Textarea есть блок стилей для меток. Здесь мы можем изменит стиль шрифта, его толщину, его размер, а также высоту строки, и цвет.

Стили для кнопки отправки сообщения.

submit button width — ширина кнопки.

submit button box sizing — оставляем по умолчанию.

submit button height — высота кнопки.

submit button border radius — скругленные углы.

submit button font size — размер шрифта текста на кнопке.

submit button line height — высота строки на нашей кнопке (междустрочный интервал).

submit button border width — толщина границы кнопки.

submit button border style — стиль границы.

submit button color — цвет текста кнопки.

submit button background — цвет фона кнопки.

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

Не забудьте нажать кнопку «Обновить» после того как все стили будут заданы.

Изменяем внешний вид Contact Form 7 без плагина.

Если вы хоть немного разбираетесь в CSS то легко сможете изменить внешний вид формы Contact Form 7 и без плагина. Для этого вам достаточно знать какой класс за что отвечает.

Значения классов для Contact Form 7

.wpcf7-form

.wpcf7-form input — поля для ввода имени, темы и т.д., а также кнопка «Отправить»

.wpcf7-form input[type=»text»] – только поля для ввода текста и темы (могут быть и другие в случае если вы добавляли свои поля)

.wpcf7-form input[type=»email»] – поле для ввода email

.wpcf7-form input[type=»submit»] или .wpcf7-submit – кнопка отправки

Для редактирование подписей полей можно использовать .wpcf7-form или .wpcf7

. wpcf7-response-output – вывод уведомлений об отправке сообщения

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

Например:

#wpcf7-f159-p29-o1 .wpcf7-form { width:700px; }

Если у вас остались какие то вопросы, то советую посмотреть видеоинструкцию, которую я для вас подготовила.

На этом пожалуй всё 🙂

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

Вот теперь точно всё! Удачной вам стилизации Contact Form 7 !

С уважением Юлия Гусарь

Настройка contact form 7. Добавляем поля

Приветствую вас, дорогой читатель!

У вас уже бывали ситуации, когда вам не хватает стандартных полей Contact form 7 и нужно добавить ещё чтобы расширить функционал вашей формы?

Если да, то эта статья именно для вас.

Из этой статьи вы узнаете про  про особенности настройки  Contact form 7, научитесь добавлять и настраивать разные типы полей, раскрывающиеся списки, а также элементы checkbox и radio button.

Навигация по статье:

Для чего нужны дополнительные поля в Contact form 7?

Когда вы устанавливаете плагин ContactForm7, то в форме обратной связи? которая создается по умолчанию есть всего четыре поля: ваше имя, ваш e-mail, тема сообщения, само сообщение и кнопка отправить. Иногда этих полей бывает не достаточно. Например, вы создаете форму оформления заказа и вам необходимо ввести еще номер телефона, время, когда удобнее всего позвонить, адрес, дополнительный e-mail, добавить возможность выбора определённых опций из выпадающего списка, и т.д.

Устанавливаем плагин Сontact form 7

Устанавливается он как обычно. Переходим в административную часть нашего сайта, заходим в меню «Плагины» => «Добавить новый». Вводим название в строку поиска, нажимаем «Enter» и теперь нажимаем на кнопку «Установить». А затем активируем плагин.

Создаём и настраиваем новую форму Contact form 7

Для создания новых полей и их настройки создадим новую форму.

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

Нажимаем кнопку «Добавить новую», и вводим название формы.

Рассмотрим интерфейс настроек Contact form 7. Здесь мы видим четыре вкладки:

—  «Шаблон формы» — здесь мы создаем поля и выводим какой-то текст.

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

— «Уведомления при отправке формы» — на этой вкладке мы можем редактировать сообщений, которые выводятся при отправке письма. Например сообщение об успешной отправке или возникновении определённой ошибки.

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

Для того, что бы подробнее об этом узнать, вы можете нажить на ссылку «Дополнительные настройки». У вас откроется страница с описанием. Правда она на английском 🙂

Добавление и настройка текстового поля в Contact Form 7

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

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

Открывается такое окно для генерации специального шорт-кода, который позволит вставить поле в вашу форму:

Давайте рассмотрим, какие настройки здесь есть:
Field type — required field — если нужно чтобы это поле было обязательным для заполнения, то поставьте здесь галочку.
Поле «Имя» – генерируется автоматически и должно обязательно быть уникальным. Здесь ни чего не меняем.
Значение по умолчанию – если вы хотите что бы в вашем поле, по умолчанию было написано, к примеру, «Имя», или «Введите имя», или что то еще, то вы задаёте это здесь.
И еще здесь можно поставить галочку на «Use this text as the placeholder of the field».
Эта позволить вам сделать так чтобы внутри вашего поля по умолчанию уже был какой то текст, который исчезает при заполнении. Такая штука называется placeholder (плейсхолдер)
Если есть необходимость проверять поле при помощи плагина Akismet, то ставите галочку напротив «Это поле требует имя автора»
Id attribute и class attribute –здесь можно вписать название класса или идентификатор для данного элемента, после чего вы сможете прописать для него стили в CSS файле вашей темы.
После того, как мы здесь все ввели, нажимаем на кнопку «Insert tag».
Для того чтобы ваши поля находились одно под другим, и между ними было какое-то расстояние, каждый из этих шорт-кодов я советую оборачивать в тег

.

Если вы хотите добавить ещё одно текстовое поле, то перед тем как это делать обязательно сохраните форму, иначе могут возникнуть ошибки и ваша форма будет работать некорректно!

Добавление и настройка поля e-mail в Contact Form 7

Поле e-mail выглядит абсолютно точно так же, как и поле текст, единственное его отличие заключается в том, что на этапе отправки формы, когда проверяется корректность введённых данных, используются другие правила проверки этого поля, т.е. какие угодно данные мы уже не можем сюда вводить, нужно обязательно чтобы данные были на английском языке, с символом «@» и с нормальным адресом почтовой службы
Для его добавления щёлкаем по кнопке «email» на панели генерации полей.

Здесь настройки абсолютно точно такие же, как и для поля «text». Задаете нужные настройки и жмете «Insert tag».

Добавление и настройка полей URL и tel

Следующее два поля «URL» и «tel» выглядят также, как и предыдущие два. Единственное отличие заключается в правилах при проверке этих полей на корректность введенных данных, т.е. такая же история, как с полем e-mail.

URL – служит для ввода адреса сайте
Tel – используется для ввода номера телефона
Добавление и настройка происходит так же как и у предыдущих полей.

Добавление и настройка поля number

Следующее поле – поле «Number» -это поле отличается от остальных тем, что в него вводятся числовые данные, и эти данные пользователь может изменять путем нажатия на специальные стрелочки, вверх и вниз.

Для его вставки нажимаем на кнопку «Number» на панели генерирования полей.
У него уже немножко другие настройки:
Field type –у нас возможны два варианта: spinbox и slider.
Spinbox – представляет собой поле со стрелочками вверх и вниз.
Slider – выглядит как ползунок и почему то работает некорректно. Возможно в следующих версиях плагина это поправят 🙂

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

Добавление и настройка поля date

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

Поэтому я предлагаю расширить возможности данного поля доустановив плагин «ContactForm 7 Datepiker».
Устанавливается он аналогично остальным. После его установки Вам нужно открыть вашу форму для редактирования и нажать на кнопку «Сохранить» чтобы обновились настройки для данного поля. После этого вы можете просто вставлять такие поля с датами, не задавая каких то настроек, а ваши посетители нажав на такое поле, увидят перед собой календарь в котором можно мышкой выбрать нужную дату.

Добавление и настройка Drop-down Menu

При помощи данного поля мы можем создавать и настраивать выпадающие списки в Contact form 7. Для его добавления нажимаем на кнопку с его названием.

Для данного поля доступны следующие настойки:

Field type, Имя, Id attribute и Class attribute – настраиваются так же как и для остальных полей Contact form 7.
Options – здесь нам нужно будет ввести все варианты, которые будут отображаться в выпадающем списке. При этом каждый вариант вводим с новой строки. Например, если я делаю форму с которой можно заказывать услуги, я напишу здесь перечень услуг.
Allow multiple selection – если поставить здесь галочку, то у вас получится выпадающий список, который всегда находится в развёрнутом состоянии и не сворачивается (странновато выглядит, если чесно).
Insert a blank item as the first option — этот параметр вы можете выбирать тогда, когда вам нужно, что бы по умолчанию первый выбранный пункт был у вас пустым.
После того как все настройки заданы нажимаете «Insert tag». И сохраняете форму.

Добавляем и настраиваем checkboxes

Данное поле предназначено для того чтобы пользователь мог отмечать галочками нужные ему значения.

Генерируется аналогично предыдущим.
Из настроек нужно обратить внимание на пункт «Options» в котором нам нужно ввести значения подписей для элементов checkbox при этом
Генерируются они следующим образом. Нажимаем на кнопку «Check Boxes». И дальше в поле «Options» нам нужно привести значение наших чек-боксов, при этом каждое значение должно стоять с новой строки.

Put a label first, a checkbox last – позволяет разместить сначала текст подписи, а потом уже сам checkbox. Если у вас в форме используется выравнивание по правому краю, то можно воспользоваться этой настройкой. В остальных случаях от неё не много пользы.
Wrap each item with label element – позволяет обернуть каждый checkbox в тег . Это нужно в том случае, если вы хотите чтобы ваши checkbox размещались не в строку а в столбик. Правда для этого помимо этой опции нужно ещё прописать некоторый код в файл стилей вашей темы.
А вот и этот код:

.wpcf7 label{ display:block; margin-top:-10px; }

Make checkboxes exclusive – поставив галочку возле этого пункта вы не сможете поставить галочку в форме больше чем у одного элемента (по умолчанию можно выбирать сколько угодно элементов)

Добавляем и настраиваем radio buttons

Данные элементы формы очень похожи на checkbox, но они сделаны в виде кружочков и за раз вы можете выбрать только один из этих кружочков.

Эти элементы удобно использовать для переключения между способами оплаты и доставки и так далее.

Добавление кнопки отправки и настройка отправки сообщения

Теперь добавим кнопку отправки сообщения, для этого на панели генерирования тегов нажмём кнопку «submit»
У этого элемента минимум настроек.

Теперь для того чтобы поля заработали нам необходимо перейти на вкладку «Письмо»
И настроить само тело письма, чтобы мы могли получать на свой почтовый ящик те данные, которые буде водить пользователь в сгенерированные нами поля.
Если этой настройки не сделать, то вы будете получать пустое письмо.
Для этого в поле «Message Body»
Вписываем и подписываем шоткоды всех полей, которые мы негерировали.
Список этих шоткодов находится в верхней части вкладки. Должно получиться как на скриншоте, но только с Вашими значениями щоткодов и подписей к ним.

Также не забудьте изменить значение поля «From».
Для нормальной работы оно должно быть заполнено так: impuls-web.ru [email protected]
Только вместо «impuls-web.ru» — название вашего домена.
Также не забудьте указать тему письма и там где «Reply-To:» подставить шоткод поля, которое вы генерировали для ввода е-mail. Если вы не генерировали этого поля, то можно оставить как есть.

Перед отправкой письма убедитесь, что в настройке «To» на вкладке «Письмо» указан правильный e-mail получателя.

Теперь можно всё это сохранить, обновить страницу с формой и проверить её работу.
Надеюсь, что у вас всё работает!

Помимо полей, рассмотренных в данной статье, в Contact form 7 есть ещё несколько, которые можно использовать для защиты от спама и для отправки файлов. Более подробно об этом вы можете прочитать в этой статье.

Видеоинструкция

Если у вас остались вопросы, то посмотрите видеоинструкцию, в которой я показываю как всё это делается.

Если данная статья была Вам полезна, то оставляйте комментарии и подписывайтесь на обновления блога.
Желаю удачи в создании и настройке форм для вашего сайта! До новых встреч 🙂

Как отправить дополнительную информацию с Contact Form 7

Приветствую вас, дорогие друзья!

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

В той статье я описывала возможность отправки дополнительной информации при помощи встроенных шорткодов Contact Form 7.

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

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

Навигация по статье:

Плагин Contact Form 7 Dynamic Text Extension

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

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

• URL страницы с который было отправлено сообщение
• ID страницы, заголовок или слаг
• Код товара
• Ссылки на контент на сайте
• Информация о посте
• Информация о пользователе
• Заполнение пользовательских полей
• Любое значение, для которого вы можете написать шорткод

Как пользоваться плагином?

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

1. 1.Для начала, в админке сайта переходим в раздел «Плагины» → «Добавить новый», и в поле поиска вставляем название плагина. После чего в результатах поиска находим его, устанавливаем и активируем:
2. 2.Далее переходим в раздел меню «Contact Form 7» → «Контактные формы» и открываем для редактирования форму, при отправке сообщения с которой нам нужно получать дополнительную информацию.
3. 3.В меню вставки шорткодов появилось два дополнительных поля «dynamic text» и «dynamic hidden»
4. 4.Для примера, давайте попробуем передать название товара, которое будет приходить нам на почту в сообщении в случае, если клиент отставил заявку. Для этого нам нужно кликнуть по «dynamic hidden» и создать скрытое поле:

   В поле «Dynamic value» мы вставляем функцию CF7_get_post_var с параметром key со значением «title».

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

5. 5.Жмем на кнопку вставить тег. В теле письма будет сгенерирован шорткод скрытого поля для передачи информации:
6. 6.Теперь нам нужно перейти на вкладку «Письмо» и вставить шорткод скрытого поля в тело письма:
7. 7.Жмем на кнопку сохранить, после чего переходим на наш сайта и проверяем работу формы:

   Как видите, никаких лишних элементов на форме нет. Переходим в почту и проверяем полученное сообщение:

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

Примеры шорткодов для получения дополнительной информации с сайта

Название страницы, с которой было отправлено сообщение:

CF7_get_post_var key=’title’

Пример шорткода:

[dynamichidden dynamichidden-83 «CF7_get_post_var key=’title'»]

Слаг страницы:

CF7_get_post_var key=’slug’

URL страницы:

CF7_bloginfo show=’url’

Пример шорткода:

[dynamichidden dynamichidden-83 » CF7_bloginfo show=’url’»]

Более подробную информацию о формировании шорткодов вы можете найти на странице плагина: Contact Form 7 Dynamic Text Extension

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

Если вам понравилась эта статья, обязательно оставьте комментарий и поделитесь статьей со своими друзьями.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Сontact form 7 настройка внешнего вида. Изменяем дизайн форм

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну что, очередной шаг сделан, мы определили 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, темы для контактной формы – info-effect.ru

На чтение 2 мин. Опубликовано 04.07.2016

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

 Установить данный плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 После установки и активации плагина, перейдите на страницу: Contact Style. Выберите тему которую вы хотите добавить к своей контактной форме и нажмите по названию темы. Для создания своей новой темы, нажмите вверху на кнопку “Add New”.

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

 Всё готово ! Вставьте шорткод формы на страницу, на сайте уже будет отображаться готовая форма с выбранным стилем. Если контактная форма уже отображается у вас на сайте, то просто обновите страницу, на которой располагается форма.

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

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

Остались вопросы ? Напиши комментарий ! Удачи !

Contact Form 7 — как изменить внешний вид формы

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

Начнем с использования специально созданного для Contact form 7 плагина.

Contact Form 7 Style

Этот плагин находится в библиотеке WordPress. Просто введите его название или просто название плагина контактной формы и он будет выложен на первой странице. Активируем его.

Теперь при редакции новой формы, к четырем вкладкам настроек, добавляется пятая, которая так и называется “Contact Form 7 Style шаблоны”

Если Вы переходите на эту вкладку, то просто выбираете тот шаблон, который вам понравился (их несколько, просмотреть их можно перелистывая страницы “карусели” с шаблонами) и сохраняете выбор.

Для примера выберем шаблон формы для контактов в день Валентина. И вот что у нас получилось.

Теперь пройдемся по настройкам самого плагина. Вы их найдете в левом меню консоли блога.

All Styles – Все стили

В этой опции показаны все стили в виде списка. Если нажать под стилем формы на ссылку “Свойства”, то откроются настройки всех созданных вами форм в плагине Contact form 7. Каждая будет обозначена чек боксом. Установив напротив выбранной формы галочку, вы не заходя в настройке присваиваете ей вид того стиля, который выбрали. Или наоборот – убираете раннее выбранный. Очень удобно.

Add new – Добавить новую

Это страница конструктора формы. Первое что необходимо сделать – дать ей название. Здесь же – предварительный просмотр и возможность ее публикации или сохранения.

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

Здесь же есть очень большой выбор дополнительных шрифтов.

Теперь самое интересное – работа с настройками формы. Здесь все очень просто – выбираете кнопку соответствующей настройки – настройки самой формы (ширина, длина, цвет), натройка кнопки, текстового поля, радиокнопок и т.д. И работаете с ними. Если возникают вопросы – просто переведите текст.

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

После завершения работы – сохраните стиль формы.

CSS Editor – Настройки CSS

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

Setting – Настройки плагина

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

System Status – Обратная связь с поддержкой плагина.

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

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

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях

Использование значений по умолчанию в формах Contact Form 7

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

В этой статье мы рассмотрим четыре основных способа использования значений по умолчанию в контактной форме 7 и способы их добавления:

1. Получение значений по умолчанию из мета поста
2. Получение значений по умолчанию из HTTP-запросов
3. Получение значений по умолчанию от вошедшего в систему пользователя
4. Использование нескольких вариантов значений по умолчанию

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

Прежде чем начать

Чтобы успешно добавить значения по умолчанию, вы должны сначала знать:

Когда использовать значения по умолчанию для ваших форм

Полезно использовать значения по умолчанию в полях формы для различных случаев:

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

1. Получение значений по умолчанию из мета сообщения

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

 [текст * имя по умолчанию: post_meta "Майкл Кларк"] 

Пример

Следующая форма имеет значения по умолчанию для полей Тема и Ваше сообщение .Эти значения по умолчанию определены в мета поста.

Код формы

2. Получение значений по умолчанию из HTTP-запросов

HTTP-запросов — еще один метод получения значений по умолчанию для ваших форм. Вы можете использовать значение запроса GET или POST для использования в качестве значения по умолчанию в вашей форме.

ПОЛУЧИТЬ

Используйте ключевое слово « get » в теге формы. Теги формы в контактной форме 7 (CF7) (на вкладке «Форма») используются для определения всех полей формы CF7.Каждый тег формы заменяется элементом HTML, который представляет поле ввода, когда он отображается в фактической форме. чтобы получить значение по умолчанию из переменных HTTP GET.

 [текст * имя по умолчанию: получить] 

Теперь вы можете получить доступ к странице, содержащей форму, используя аналогичный URL:

http://www.yoursite.com/form-page/?name=Clarke

Теперь вы увидите значение, отправленное через GET, в вашей форме.

Примечание: Имя переменной GET должно совпадать с именем тега формы, чтобы это работало.

ПОСТ

Использование POST очень похоже на использование GET. Вы должны использовать ключевое слово « post » в теге формы, чтобы получить значение по умолчанию из переменных HTTP POST.

 [текст * имя по умолчанию: сообщение] 

Теперь, когда вы обращаетесь к этой странице через запрос POST с отправленной переменной «name», вы увидите значение переменной в вашей форме.

Пример

Следующая форма будет иметь значение по умолчанию subject как «Запрос» при отправке переменной GET с таким именем.Используйте следующий URL-адрес, чтобы проверить это:

https://blog.cf7skins.com/using-default-values-contact-form-7/?your-subject=Inquiry

Код формы

3. Получение значений по умолчанию от авторизованного пользователя

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

Имя пользователя

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

 [текст * имя по умолчанию: user_login] 

Адрес электронной почты

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

 [текст * имя по умолчанию: user_email] 

URL

Используйте ключевое слово user_url , чтобы получить URL-адрес текущего пользователя в качестве значения по умолчанию в вашей форме.

 [текст * имя по умолчанию: user_url] 

Имя

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

Имя

 [текст * имя по умолчанию: имя_пользователя] 

Фамилия

 [текст * имя по умолчанию: user_last_name] 

Ник

 [текст * имя по умолчанию: user_nickname] 

Отображаемое имя

 [текст * имя по умолчанию: user_display_name] 

Пример

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

Код формы

4. Совместное использование нескольких параметров по умолчанию

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

 [текст * имя по умолчанию: получить значение по умолчанию: имя_пользователя по умолчанию: post_meta "Майкл"] 

Порядок приоритета значений по умолчанию — от первого до последнего. Это означает, что тег сначала будет искать переменную в переменной GET.Если он не найден, он будет использовать имя вошедшего в систему пользователя. Только в этом случае он вернется к мета-значению по умолчанию «Майкл».

Пример

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

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

Для поля темы форма ищет тему, отправленную через запрос GET.Если переменная не отправляется, устанавливается тема «Общий запрос». Вы можете проверить это, используя URL:

https://blog.cf7skins.com/using-default-values-contact-form-7/?subject=Purchase

div.wpcf7 {
цвет фона: #fbefde;
граница: 1px solid # f28f27;
отступ: 20 пикселей;
}
.wpcf7 input [type = "text"],
.wpcf7 input [type = "email"],
.wpcf7 textarea {
фон: # 725f4c;
цвет: #FFF;
семейство шрифтов: lora, sans-serif;
стиль шрифта: курсив;
}
.wpcf7 input [type = "submit"],
.wpcf7 input [type = "button"] {
цвет фона: # 725f4c;
ширина: 100%;
выравнивание текста: центр;
текст-преобразование: прописные;
}
 

div # wpcf7-f201-p203-o1 {
цвет фона: #fbefde;
граница: 1px solid # f28f27;
отступ: 20 пикселей;
}
# wpcf7-f201-p203-o1 input [type = "text"],
# wpcf7-f201-p203-o1 input [type = "email"],
# wpcf7-f201-p203-o1 textarea {
фон: # 725f4c;
цвет: #FFF;
семейство шрифтов: lora, "Open Sans", sans-serif;
стиль шрифта: курсив;
}
# wpcf7-f201-p203-o1 input [type = "submit"],
# wpcf7-f201-p203-o1 input [type = "button"] {
цвет фона: # 725f4c;
ширина: 100%;
выравнивание текста: центр;
текст-преобразование: прописные;
}
 

   URL вашего веб-сайта
[url url-935]   

 <набор полей>
 Основные поля 

Ваше имя
[текстовое имя]

Ваш адрес электронной почты
[текстовое письмо]



 Расширенные поля 

Ваша операционная система
[select pick-os «Windows» «Mac» «Linux» «Android» «iOS» «Другое»]

Некоторое расширенное поле
[текстовое объявление]
 

 Какие поля вы хотите просмотреть? [выберите поля выбора «Основные поля» «Дополнительные поля» «Все поля»] 

 [группа базовых полей]


 Основные поля 

Ваше имя
[текстовое имя]

Ваш адрес электронной почты
[текстовое письмо]


[/ group]