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

border widht — толщина границы нашей формы, задаётся в пикселях.

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

.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; }

#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; }

.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’

CF7_get_post_var key=’title’

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

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

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

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

CF7_get_post_var key=’slug’

CF7_get_post_var key=’slug’

URL страницы:

CF7_bloginfo show=’url’

CF7_bloginfo show=’url’

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

[dynamichidden dynamichidden-83 » 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 мин. Опубликовано

 Продолжаем разбирать самые интересные и полезные плагины для сайта на движке 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


Код формы

Дополнительная литература

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

Совет: Вы еще не пользуетесь CF7 Skins? Скачай бесплатно!

Есть вопросы или нужна помощь?

Если вы используете бесплатную версию CF7 Skins, вы можете получить помощь через сообщество CF7 Skins, а также через форум поддержки Contact Form 7.

Если вы используете какие-либо из наших надстроек CF7 Skins, мы предоставляем поддержку по электронной почте Premium, чтобы помочь с вашими вопросами и проблемами.

Нравится:

Нравится Загрузка …

Контактная форма 7 скинов — плагин WordPress

  1. Посетите Plugins> Добавьте новый в админку WordPress и выполните поиск скинов для контактной формы 7.
  2. Найдите плагин в результатах поиска.
  3. Нажмите кнопку «Установить», чтобы загрузить и установить плагин.
  4. Активируйте плагин.

Альтернативный метод установки

  1. Загрузите zip-файл подключаемого модуля и перейдите в раздел Plugins> Add New в админке WordPress.
  2. Нажмите кнопку Upload Plugin , а затем просто загрузите zip-файл.
  3. WordPress теперь загрузит zip-файл с вашего компьютера на ваш веб-сайт, распакует его и установит плагин.
  4. Щелкните ссылку Активировать , чтобы начать использовать плагин.

Возникли проблемы? Узнайте больше о том, как устанавливать плагины в WordPress Codex.

Веб-сайт | Документация | FAQ | Дополнения

Для чего нужны скины CF7?

CF7 Skins — это дополнительный плагин для Contact Form 7. Он расширяет функциональность Contact Form 7, добавляя перетаскиваемый визуальный редактор вместе с рядом совместимых Templates и Styles . Вы можете узнать больше, посетив cf7skins.com

Есть ли документация?

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

Ответы на многие вопросы приведены в FAQ по CF7 Skins.

Веб-сайт | Документация | FAQ | Дополнения

Как мне начать?

Существует ряд обучающих программ, которые помогут вам начать работу с CF7 Skins.

Где я могу получить поддержку?

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

Бесплатная версия — вы можете использовать форум поддержки WordPress. Это поддержка на уровне сообщества, предлагаемая другими пользователями CF7 Skin (мы периодически посещаем форум, чтобы помочь только с ошибками плагинов).

Что говорят пользователи

Читайте отзывы пользователей CF7 Skins.

Нужно ли мне иметь навыки программирования, чтобы использовать скины CF7?

Абсолютно нет. Вы можете создавать формы Contact Form 7 и управлять ими без каких-либо знаний в области программирования (100% конструктор форм с перетаскиванием).

Переводы

  • индонезийский (Bahasa Indonesia; id_ID) — Sastra Manurung

Веб-сайт | Документация | FAQ | Дополнения

Функция перетаскивания ничего не показывает, шаблоны и скины уродливее простых HTML

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

Я считаю, что скины отлично подходят для внешнего вида, но не могу найти достаточно помощи, чтобы знать, как правильно их использовать, и вся моя форма продолжает сбиваться :(.ДЕЙСТВИТЕЛЬНО разочаровался в поддержке этого и CF7. Практически каждое руководство сделано кем-то, кто владеет английским языком, и его невозможно понять. 🙁

Плагин не поддерживает AMP, AMP для WP. Моя заявка в службу поддержки была закрыта сегодня без каких-либо объяснений. Также год назад была еще одна проблема с флажками радио. До сих пор я не получал никаких новостей. Они сказали мне, что CF7 изменил свой код и логика с переключателями радио не работает должным образом.

Нарушил дизайн страницы формы и пришлось восстанавливать резервную копию

Шаблоны неплохие. Может быть, немного модернизировать, чтобы сделать их более современными (2018) Работает хорошо. Служба поддержки очень отзывчивая и добрая. Работает с большим количеством подключаемых модулей CF7 и не вызывает сбоев и сбоев с другими подключаемыми модулями CF7, что бывает редко. $ Другие плагины дизайна CF7 перезаписывают основные плагины CF7. Это не Возьму про версию, с бесплатной прошил тест.спасибо за вашу доброту

Посмотреть все 18 отзывов

«Contact Form 7 Skins» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов
2.4.1 — 2020-12-11
ИСПРАВЛЕНИЕ

: Поддержка изменений jQuery в WP 5.6 — замените jQuery tipsy на balloon-css

2,4 — 11 августа 2020 г.
ФУНКЦИЯ

: добавление шаблонов
ФУНКЦИЯ: добавление поддержки для поля Other в визуальном редакторе CF7 Skins
ИСПРАВЛЕНИЕ: поддержка изменений WP 5.5

2.3.3 — 07.07.2020
  • TWEAK: обновление лицензиара программного обеспечения
2.3.2 — 2020-06-30
  • TWEAK: включить перевод профессиональных советов
2.3.1 — 2020-06-18
  • ИСПРАВЛЕНИЕ: Обеспечьте сохранение визуальных сохранений измененных форм
2.3 — 2020-05-20
  • ОСОБЕННОСТЬ: Сделать добавление звездочки в обязательные поля необязательным
  • TWEAK: Сделайте настройки скинов CF7 более понятными для пользователей
  • TWEAK: включить перевод всего JavaScript
  • TWEAK: сворачивание встроенных файлов JS и CSS
2.2.2 — 2020-03-11
  • ИСПРАВЛЕНИЕ: флажки не отображаются в стиле
2.2.1 — 2020-01-14
  • ИСПРАВЛЕНИЕ: Улучшено получение списка всех тегов шорткода CF7 в содержимом формы CF7
2.2 — 2020-01-07
2.1.4 — 02.10.2019
  • FIX: Удалить и заменить clearfix, удаленный / устаревший в WordPress 5.0 — конфликт с некоторыми другими плагинами WP.
2.1.3 — 03.07.2019
  • TWEAK: включить экспорт отдельной формы.
2.1.2 — 11.04.2019
  • ИСПРАВЛЕНИЕ: кодирование в UTF-8 при загрузке HTML
2.1.1 — 04.03.2019
  • ИСПРАВЛЕНИЕ: Удаление сбора данных согласия — исправление безопасности
2,1 — 25 февраля 2019 г.
  • ОСОБЕННОСТЬ: Изменить тип тега CF7
  • ФУНКЦИЯ: Копирование данных визуальной формы вариант
  • ИСПРАВЛЕНИЕ
  • : Удаление дубликатов из полей ReCAPTCHA и отправки
  • TWEAK: параметры приемочной метки CF7 изменены
  • TWEAK: добавить окружающий LIST-LI к дополнительному тегу CF7
  • TWEAK: расширяемая вкладка визуальной формы
  • TWEAK: добавлены советы профессионалов
2.0,2 — 08.02.2019
  • FIX: Убедитесь, что визуальный редактор отображается при добавлении новой формы, если есть ошибка конфигурации CF7 в CF7 5.1+
  • TWEAK: добавить минимально необходимые версии PHP и CF7
2.0.1 — 13.08.2018
  • ИСПРАВЛЕНИЕ: предотвращение конфликта JavaScript с Yoast SEO
2.0 — 19.06.2018
  • ФУНКЦИЯ: Добавление визуального редактора перетаскивания
  • ФУНКЦИЯ
  • : Отображение уведомлений при обновлении подключаемого модуля
  • ИСПРАВЛЕНИЕ
  • : Обновите файлы шаблонов для соответствия визуальным файлам
  • ИСПРАВЛЕНИЕ
  • : Убедитесь, что обложки CF7 подключаются к разделу
  • формы CF7.
  • TWEAK: Показывать вкладку «Начало работы» при активации плагина
  • TWEAK: убедитесь, что отмена выбора в шаблоне или списке стилей также отменяет выбор в деталях или расширенном представлении
1.2.2 — 11.01.2018
  • ФУНКЦИЯ: Добавление сбора данных согласия
  • ИСПРАВЛЕНИЕ
  • : Улучшение контекста и проблем со спряжением для нелатинских языков
  • ИСПРАВЛЕНИЕ
  • : убедитесь, что скрипты CF7 Skins загружены, если скрипт CF7 по умолчанию отменен.
  • TWEAK: Скрыть информационные вкладки в WordPress Маленький экран: 850px
  • TWEAK: убедитесь, что активная вкладка выделена
  • TWEAK: удалить WP скрытый класс
1.2.1 — 07.06.2017
  • ИСПРАВЛЕНИЕ: WPCF7_Shortcode и WPCF7_ShortcodeManager устарели в CF7 4.6
  • ИСПРАВЛЕНИЕ
  • : убедитесь, что ввод ключа существует при активации лицензии
  • ИСПРАВЛЕНИЕ
  • : удаление параметра локали для CF7> = 4.4
  • ИСПРАВЛЕНИЕ
  • : отображение данных журнала активации
  • ИСПРАВЛЕНИЕ
  • : Остановить готовый CSS по умолчанию для перезаписи выбранного стиля CSS
  • TWEAK: добавить триггер JS для компонентов React
  • TWEAK: добавление вкладок скинов через фильтр
  • TWEAK: удалить шаблон формы CF7 по умолчанию
  • TWEAK: включить стандартные символы
  • TWEAK: Сохранение версии установлено при обновлении
  • TWEAK: правильный текст вкладок информации
1.2 — 08.04.2016
  • ФУНКЦИЯ: Показать шаблон и стиль, выбранные в области информации о скине
  • ОСОБЕННОСТЬ
  • : информационные вкладки в мета-поле скинов и настройки скинов CF7
  • ФУНКЦИЯ: Добавить стили
  • ИСПРАВЛЕНИЕ
  • : копирование данных скинов CF7 при использовании дубликата CF7
  • ИСПРАВЛЕНИЕ
  • : отмените выбор шаблона и стиля
  • TWEAK: проверьте права пользователя CF7
  • TWEAK: обновить цвета в сообщениях администратора
  • TWEAK: Подходит для перевода на wordpress.org
1.1.2 — 10.03.2016
  • ИСПРАВЛЕНИЕ: Убедитесь, что стили оформления CF7 помещены в очередь, если стили контактной формы 7 отменены.
  • ИСПРАВЛЕНИЕ
  • : убедитесь, что проверка версии обновления работает
  • ИСПРАВЛЕНИЕ
  • : удаление неопределенного индекса при обновлении нескольких подключаемых модулей
  • ИСПРАВЛЕНИЕ
  • : Переключатель Metabox скинов не прилипает
1.1.1 — 21.09.2015
  • ФУНКЦИЯ: Добавить поддержку готовых стилей
  • ИСПРАВЛЕНИЕ
  • : Помещение стилей в очередь для коротких кодов без содержания
  • TWEAK: добавление табуляции и единообразного интервала в шаблоны
  • TWEAK: Улучшение читаемости вкладки Журналы
1.1 — 2015-06-30
  • ФУНКЦИЯ: Добавить стили
  • ИСПРАВЛЕНИЕ
  • : Убедитесь, что все данные плагина удалены.
  • TWEAK: ставить в очередь только при необходимости в контактной форме 7
  • TWEAK: обновление справочных баллонов
1.0.2 — 29.05.2015
  • ИСПРАВЛЕНИЕ: действие wpcf7_add_meta_boxes удалено в контактной форме 7 4.2
  • ИСПРАВЛЕНИЕ
  • : анализ идентификатора короткого кода CF7 в одиночных или вложенных коротких кодах
  • ИСПРАВЛЕНИЕ
  • : убедитесь, что JavaScript находит активное текстовое поле
  • TWEAK: Добавить крючок фильтра cf7skins_form_classes
1.0.1 — 06.05.2015
  • ИСПРАВЛЕНИЕ: CSS по умолчанию переопределяет стили ввода и текстового поля
1.0 — 09.04.2015

Как стилизовать формы Contact Form 7 в WordPress

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

Примечание: Мы больше не рекомендуем плагин Contact Form 7. Вместо этого мы рекомендуем WPForms, плагин для контактной формы, наиболее удобный для новичков. Вы также можете бесплатно скачать WPForms Lite.

У нас есть пошаговое руководство по созданию контактной формы в WordPress.

Видеоуроки

Подписаться на WPBeginner

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

Начало работы

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

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

Как видите, контактная форма наследует некоторые стили формы от вашей темы WordPress.Кроме того, это очень просто.

Мы будем стилизовать формы Контактной формы 7 с помощью CSS. Весь CSS входит в таблицу стилей вашей темы или дочерней темы.

Стилизация контактной формы 7 форм в WordPress

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

Каждая контактная форма использует класс CSS .wpcf7 , который можно использовать для стилизации формы.

В этом примере мы используем шрифт Google Lora в наших полях ввода.Узнайте, как добавить шрифты Google в WordPress.

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%;
выравнивание текста: центр;
текст-преобразование: прописные;
}
 

Так выглядела наша контактная форма после применения этого CSS.

Styling Multiple Contact Form 7 Forms

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

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

Как видно на скриншоте выше, код нашей контактной формы начинается со строки:

Атрибут id — это уникальный идентификатор, сгенерированный контактной формой 7 для этой конкретной формы. Это комбинация идентификатора формы и идентификатора сообщения, куда добавляется эта форма.

Мы будем использовать этот идентификатор в нашем CSS для стилизации нашей контактной формы. Мы заменим .wpcf7 в нашем первом фрагменте CSS на # wpcf7-f201-p203-o1 .

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%;
выравнивание текста: центр;
текст-преобразование: прописные;
}
 
Стилизация контактной формы 7 форм с помощью CSS Hero

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

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

См. Наш полный обзор CSS Hero и способы его использования для стилизации чего-либо на вашем сайте WordPress.Вы можете использовать код купона CSS Hero WPBeginner , чтобы получить эксклюзивную скидку 34%.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

WPForms против Gravity Forms против Contact Form 7

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

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

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

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

В этом посте мы сравним некоторые важные вещи, такие как функции, параметры, простота использования и настраиваемость, плюсы и минусы, а также цены.Итак, приступим.

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

WPForms

WPForms была основана в 2016 году Джаредом Атчисоном, Сайедом Балхи и командой талантливых разработчиков и предпринимателей.

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

Есть бесплатная и платная версия плагина.Бесплатная версия WPForms поставляется с множеством простых опций для легкого создания мощных контактных форм с использованием конструктора перетаскивания и верха.

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

Подробнее о WPForms можно узнать здесь.

Gravity Forms

Gravity Forms — еще один популярный плагин форм для WordPress, созданный разработчиками из RocketGenius .Gravity Forms также проста в использовании и предлагает широкий спектр расширенных инструментов и опций для владельцев и разработчиков веб-сайтов.

Gravity Forms предлагает только премиум-варианты, поэтому бесплатной версии этого плагина нет. Каждый премиум-пакет предлагает ряд функций и надстроек, очень похожих на WPForms.

Щелкните здесь, чтобы узнать больше о Gravity Forms.

Контактная форма 7

Контактная форма 7 была создана разработчиком по имени Takayuki Miyoshi . Контактная форма 7 существует уже очень давно и была первой формой, которую я использовал на своем веб-сайте, когда впервые начал использовать WordPress еще в 2009 году.

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

Плагин 100% бесплатный для загрузки и использования, однако он не предлагает никаких дополнительных расширенных опций или функций, таких как WPForms или Gravity Forms.

Щелкните здесь, чтобы загрузить контактную форму 7

1. Функции и параметры подключаемого модуля

Хорошо, поэтому мы начнем со сравнения функций и параметров для каждого из следующих подключаемых модулей —

WPForms

Возможности WPForms и варианты включают:

  1. Удобный для пользователя конструктор форм с перетаскиванием , поэтому нет необходимости возиться с слишком большим количеством кода.
  2. Библиотека шаблонов форм , так что вы можете сэкономить время, просто выбрав шаблон и настроив его по своему вкусу.
  3. Пользовательский класс CSS и настраиваемая кнопка «Отправить».
  4. Адаптивные формы , что означает, что ваши формы будут отлично смотреться не только на настольных компьютерах, но также на смартфонах и планшетах.
  5. SMC (интеллектуальная условная логика) означает, что вы можете создавать, изменять ответ и поведение ваших форм.
  6. Быстро отвечайте на отправку форм с мгновенными уведомлениями .
  7. Управляйте своими записями в одном месте с помощью функции Entry Management Feature .
  8. Функция многостраничной формы, которая позволяет разделить формы на несколько страниц для улучшения взаимодействия с пользователем.
  9. Функция загрузки файлов , полезная, если вы требуете от пользователей загружать контент при отправке формы.
  10. Создание высокопроизводительных настраиваемых форм регистрации новых пользователей WordPress .
  11. Использует Captcha и Honeypot для защиты ваших форм от спама.
  12. PayPal and Stripe Addon
  13. Дополнительные услуги электронной почты с постоянным контактом, MailChimp, GetResponse и другими.
  14. Данные геолокации помогут вам узнать больше о ваших пользователях.
  15. Создайте формы отправки гостевых сообщений.
  16. Создавайте опросы и опросы с помощью надстройки.
  17. Добавьте свою подпись в формы с надстройкой.
  18. Офлайн-формы.
  19. Шаблоны форм содержат дополнения и многое другое.

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

Мы скоро рассмотрим цены.

Gravity Forms

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

  1. Интуитивно понятный конструктор визуальных форм.
  2. Более 30 полей форм, которые можно перетащить в формы.
  3. Кнопка «отправить» настраиваемой формы.
  4. Условная логика, основанная на взаимодействии с пользователем.
  5. Уведомления по электронной почте.
  6. Загрузка файлов.
  7. Расчеты, позволяющие пользователям устанавливать цены на услуги или обновления продукта.
  8. Сохранение в процессе создания форм.
  9. Элитные надстройки (опросы, викторины, опросы и видеозаписи.)
  10. Ограничьте и запланируйте свои формы.
  11. Адаптивные формы.
  12. Пользовательский CSS.
  13. Защитите от спама с помощью Google ReCaptcha , RS ReCaptcha, включая опции Akismet.
  14. Широкий спектр надстроек премиум-класса и сторонних разработчиков для расширения функциональности и возможностей ваших форм.

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

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

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

Контактная форма 7

Теперь давайте снова посмотрим на Контактную форму 7, помня, что это очень простой и «бесплатный для всех» плагин.

  1. Создавайте простые контактные формы.
  2. Защитите от спама, включив функции для использования ReCaptcha или Akismet .
  3. 13+ для полевых вариантов.
  4. Настраиваемая кнопка отправки с CSS.
  5. Настройки почты.
  6. Настройки сообщений и еще несколько других параметров.

А победитель раунда «функций»?

Что ж, довольно сложно выбрать между формами WPForms Forms и Gravity Forms.Оба этих плагина / сервиса предлагают множество функций, опций и тех надстроек, о которых я упоминал.

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

Дополнения в Gravity Forms, на мой взгляд, тоже немного шире.

Итак, я бы отдал этот раунд Gravity Forms , но не слишком сильно.


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

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

WPForms

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

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

Для дополнительных настроек в настройках каждой формы WPForm вы можете ввести имя класса для «формы» и «кнопки отправки». Затем вы можете добавить собственный CSS к этим классам в разделе «Внешний вид »> «Настроить » в WordPress.

Gravity Forms

Gravity Forms также поставляется с мощным встроенным пользовательским интерфейсом для создания форм с перетаскиванием.Это не так интуитивно понятно, как в WPForms, однако есть несколько дополнительных вещей, которые вы можете сделать на вкладке настроек для ваших форм, например, настроить макет формы (метка, описание и размещение дополнительных меток).

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

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

Контактная форма 7

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

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

Когда дело доходит до настройки с помощью CSS, вам нужно будет использовать Google Dev Console , чтобы найти имена классов для полей формы, метки и кнопку отправки, чтобы добавить свои собственные правила CSS через Внешний вид> Настроить в WordPress .

Ознакомьтесь с коротким видеоуроком ниже по настройке форм Contact Form 7.

Итак, приз за «Простота использования» и «Настраиваемость» достанется?

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

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

Это был сложный раунд для определения явного победителя.


3. Цена и соотношение цены и качества

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

WPForms

WPForms предлагает 4 варианта в своей таблице цен.

  • Basic — 79 долларов (идеально для одного веб-сайта WP или блога)
  • Plus — 199 долларов
  • Pro — 399 долларов
  • Elite — 799 долларов

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

Соотношение цена / качество

При цене 39,50 $ (ограниченное время на момент написания этой статьи) WPForms — лучшее соотношение цены и качества, которое вы получаете за использование одного веб-сайта. Обычно этот план стоит 79 долларов.

Следите за предложениями с ограниченным сроком действия.

Gravity Forms

Gravity Forms предлагает 3 варианта в их текущей таблице цен.

  • Базовая лицензия — 59 долларов США (идеально подходит для одного веб-сайта WP или блога)
  • Pro License — 159 долларов США
  • Элитная лицензия — 259 долларов США

Каждый уровень в их тарифных планах предлагает ряд функций, опций, и профессиональные дополнения.И, как и WPForms, более дорогие уровни Gravity Forms также предлагают больше опций и надстроек, если они вам нужны.

Цена — качество?

При цене 59 долларов за базовую лицензию Gravity Forms по-прежнему является отличным соотношением цены и качества, если не лучшим вариантом. По этой цене вы можете использовать свою Базовую лицензию на 1 веб-сайте и получить доступ к основным надстройкам.


Контактная форма 7

Контактная форма 7 100% бесплатна с нулевыми дополнительными опциями или надстройками.

Цена — качество?

Нет ничего лучше, чем быть свободным, , верно?

И победитель конкурса «Соотношение цена / качество»?

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

4.Поддержка и документация

Хорошо, теперь мы переходим к документации support и , предоставляемой всеми тремя плагинами форм.

WPForms

Я только недавно начал использовать WPForms на одном из моих веб-сайтов. Не бесплатный плагин, а премиум-версия .

Вот копия моей квитанции о транзакции для покупки лицензии WPForms в качестве доказательства покупки.

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

Однако WPForms предлагает поддержку через систему тикетов или простую контактную форму, в зависимости от сложности вашего запроса.

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

Gravity Forms

Я попытался связаться со службой поддержки клиентов еще в ноябре 2018 года, чтобы продлить мою лицензию на Gravity Forms, поскольку я предполагал, что при продлении лицензии существует скидка.

К сожалению, я не получил ответа, поэтому опять же, основываясь на этом, я не могу дать какой-либо точный отзыв о поддержке, предоставляемой Gravity Forms, за исключением того, что они никогда не отвечали на мое электронное письмо.

Конечно, это было во время Дня благодарения и в выходные в Черную пятницу, но, тем не менее, ответ был бы хорош даже после.

Хорошо, вот моя квитанция о покупке премиальной лицензии Gravity Form.

В любом случае Gravity Forms предлагает поддержку через хорошо продуманную страницу часто задаваемых вопросов, документацию, блог и систему тикетов.

Contact Form 7

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

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

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

А победитель конкурса Support and Docs достанется?

Честно говоря, не знаю. Я бы хотел передать его Gravity Forms, но они не отвечают на электронные письма. так что позвольте мне вместо этого передать его WPForms , хотя я никогда не использовал их систему поддержки.

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

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


Заключение

Это сложно, но я думаю, что все сводится к предпочтениям и тому, что вы ищете в своих онлайн-формах.

Если вы ищете надежный вариант премиум-класса с достойной поддержкой, я бы выбрал WPForms или Gravity Forms . Эти плагины помогут вам создавать больше, чем просто контактные формы.

Я использую WPForms для создания форм запросов на обслуживание на FabrizioVanMarciano.com , и я использую Gravity Forms для создания формы запроса контактов и гостевых блогов здесь, на сайте Magnet4Blogging. Я люблю использовать их обоих. Я знаю, что это, вероятно, бесполезная «середина дороги» для вас, но это моя искренняя мысль.

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

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

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

Спасибо за внимание.

Как настроить контактную форму 7 (для начинающих)

Контактная форма 7 — один из самых популярных и старейших плагинов для контактных форм WordPress.Однако, несмотря на ее популярность, многие люди не могут решить, как настроить контактную форму 7. Звучит знакомо?

Чтобы исправить это, мы дадим вам пошаговые инструкции по настройке контактной формы 7. Мы расскажем, как:

  • Установить плагин Contact Form 7
  • Создайте новую форму с помощью контактной формы 7
  • Вставьте контактные формы на свой сайт WordPress

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

Основные возможности контактной формы 7

С более чем 5 миллионами активных установок, Contact Form 7 явно является популярным плагином WordPress. Итак, давайте взглянем на некоторые из его лучших функций:

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

И, что самое главное, это бесплатно!

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

Как установить контактную форму 7

Первым шагом к настройке Contact Form 7 является установка плагина на ваш сайт WordPress. Для этого в панели управления WordPress выберите в меню Plugins> Добавить плагин .

Затем введите Contact Form 7 в функцию поиска. Когда откроется плагин Contact Form 7, щелкните Install> Activate .

После активации вы сможете найти функциональные возможности плагина в новой области Contact на панели инструментов WordPress.

Как настроить контактную форму 7

Щелкните Контакт> Контактные формы . Здесь вы увидите центральную панель администрирования, где вы можете управлять несколькими контактными формами. Вы также найдете контактную форму по умолчанию Контактной формы 7, обозначенную Контактная форма 1 .

Контактная форма 1 содержит все поля, которые могут понадобиться базовой контактной форме. Эта форма готова к использованию и при желании может быть вставлена ​​на любую страницу и в любую публикацию вашего веб-сайта (это будет рассмотрено далее).

Вы также можете создать свою собственную контактную форму, выбрав Контакт> Добавить новый .

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

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

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

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

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

Если вы хотите добавить метку к своему полю, вы можете скопировать HTML-код, который сопровождает тег формы, из других полей.Например, когда мы нажали кнопку URL , контактная форма 7 предварительно сгенерировала тег формы [url url-935] . Затем мы добавили дополнительный HTML-код для ярлыка, поэтому поле конечного URL-адреса выглядело так:

    

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

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

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

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

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

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

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

Вставьте контактную форму на страницу или в сообщение

Теперь вы знаете, как настроить контактную форму 7, создать контактную форму и настроить параметры почты.Последний шаг в этом процессе — вставить контактную форму на страницу или в публикацию на вашем веб-сайте WordPress.

Выберите Контакт> Контактные формы . Затем скопируйте шорткод рядом с формой, которую вы хотите добавить на свой сайт.

Затем откройте страницу или сообщение, куда вы хотите вставить контактную форму. Вставьте шорткод в текстовую область редактора сообщений, где вы хотите отображать контактную форму.

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

Не впечатлены контактной формой 7?

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

  • Простота использования — отличный вариант для всех, от новичков до веб-дизайнеров.
  • Полностью настраиваемый — изменение, добавление или удаление любых меток полей.
  • Обеспечивает reCaptcha — избегайте спам-сообщений с функцией reCaptcha.
  • Шаблоны форм
  • — используйте готовые шаблоны контактных форм, если вам не хочется создавать новый с нуля.
  • File Uploads — позволяет пользователям отправлять медиафайлы с помощью опции File Uploads.
  • Подписка на информационный бюллетень и формы оплаты — расширяйте свой список адресов электронной почты и собирайте платежи / пожертвования.
  • Опросы и опросы — легко собирайте данные о посетителях вашего сайта.

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

Заключительные мысли — как настроить контактную форму 7

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

Какой ваш любимый плагин для контактной формы WordPress? Поделитесь своими мыслями в комментариях ниже…

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%
, просто следуя простым советам.
Учебное пособие по

: Как настроить условные поля для контактной формы 7

Этот пост относится к более старой версии условных полей для контактной формы 7.
Ознакомьтесь с новым руководством.

Начало работы

Убедитесь, что на вашем сайте WordPress установлены как контактная форма 7, так и условные поля для контактной формы 7.

В админке WordPress перейдите к Контакт > Добавить новый , чтобы создать новую форму.

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

Вот код:

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

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

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


Расширенные поля Ваша операционная система [select pick-os «Windows» «Mac» «Linux» «Android» «iOS» «Другое»] Некоторое расширенное поле [текстовое объявление]

Добавьте в форму условную логику

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

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

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

Создать группы полей

Вы заметите новый тег Контактной формы 7 под названием Группа условных полей .

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

Щелкните Insert tag , чтобы вставить группу.

Чтобы поместить часть формы, которую вы хотели бы отображать и скрывать в зависимости от некоторых условий, вам нужно будет заключить ее между этими групповыми тегами, например:

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

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

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

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

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

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