Ширина полей contact form 7: Contact Form 7 ширина полей плагина для WordPress

Leave a Comment / Разное / By alexxlab / 28.11.1978

Содержание

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

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

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

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

Обзор плагина Сontact Form7 Style
Меняем внешний вид Contact Form7 при помощи собственного стиля.
Изменяем внешний вид 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 настройка внешнего вида • Вэб-шпаргалка для интернет предпринимателей!

Содержание

1 Изменить стили Contact Form 7
2 Изменить стили формы с помощью Contact Form 7 Style — для ленивых
3 Готовые стили для Contact Form 7
4 Плагин WordPress Contact Form 7
- 4.1 Contact form 7 настройка
  - 4.1.1 Размещаем контактную форму на отдельной странице сайта/блога
5 Получаете спам через Contact Form 7?
- 5. 1 Интеграция Google reCAPTCHA v3: защита от спама
- 5.2 Внешний вид контактной формы — Contact Form 7 Style
  - 5.2.1 И в заключение:
- 5.3 Почему не работает (не отправляет письма) Contact Form 7?
6 Добавляем классы к форме Contact Form 7.
- 6.1 Определяем ID формы на странице.
7 Стилизация формы Contact Form 7, работа с файлом style.css
- 7.1 Изменяем цвет фона, отступы, шрифт формы.
- 7.2 Определяем отступы между полями, изменяем рамку.
- 7.3 Меняем ширину полей и их расположение.
- 7.4 Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.
- 7.5 Рекомендуем к прочтению

Изменить стили Contact Form 7

После установки плагина Contact Form 7 и вывода формы на страницу, она выглядит примерно так.

Согласитесь, не очень выразительно. Но её вид можно легко поправить.

Если вы умеетe изменять/добавлять стили CSS, вероятно, вы захотите начать со стилизации полей.

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

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

Всего лишь нужно добавить ID для нужного поля в шаблоне формы.

После чего можно прописывать свои стили CSS.

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

Изменить стили формы с помощью Contact Form 7 Style — для ленивых

Скачайте плагин и установите. В меню ‘Contact Style’ нажмите ‘Add New’.

Выберите элемент для стилизации.

Настройки стилизации идентичны для каждого элемента.

choose element state — normal — обычное состояние, hover — вид при наведении

width / height — ширина/высота элемента

background — color — цвет фона, image — картинка в качестве фона, position — положение, size — размер, repeat — повтор

margin / padding — отступы/поля

border — width — толщина границы, style — стиль границы, color — цвет, radius — скругление

position — позиция элемента

Настройки кликабельны и интуитивны, экспериментируйте.

Вы можете смотреть превью во время стилизации. Отметьте вверху страницы контактную форму и нажмите Generate Preview. Область просмотра находится внизу.

Вид формы ‘После’ 5 минут экспериментирования:

Готовые стили для Contact Form 7

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

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

Для более повседнего использования обратите внимание на плагин Contact Form 7 Skins. Образцы бесплатных скинов вы можете посмотреть здесь //cf7skins.com/skins/styles/

Вот еще плагин Form Styles For Contact Form 7 с простыми, но симпатичными предустановленными стилями.

Простая и чистая форма контактов — Contact Form Clean and Simple — с разметкой Bootstrap, Google капчей и спам-фильтрами. Кстати, обратите внимание, довольно популярный плагин.

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

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

Приветствую вас, уважаемый читатель! Сегодня я покажу вам, как создать форму обратной связи с автором сайта/блога в вордпресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7, защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины — почему не работает и не отправляет письма контактная форма .

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

О, письмо пришло! Контактная форма 7 молодец

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

Плагин WordPress Contact Form 7

Плагин для WP Contact Form 7

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Все манипуляции производим в админке вордпресс. Для того, чтобы установить плагинчик, в разделе «Плагины» нажимаем «Добавить новый». Вводим в окошко «Поиска» Contact Form 7. Естественно он отобразится первым. Кликаем кнопку «Установить:

Как установить плагин

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

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

Находим в панели управления появившийся новый раздел «Contact Form 7» — пункт «Контактные формы». На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.

Контактная форма № 1 по умолчанию

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

Внешний вид: Стандартная контактная форма на сайте WordPress

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

Откроется страница «Редактировать контактную форму». Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка «Шаблон формы». Вы можете изменить шаблон формы под свои нужды.

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

Редактировать контактную форму. Вкладка файл

Откроется окно — Генератор тега формы: файл:

Чтобы прикрепить файл загруженный к почте, вам нужно вставить тег ([file-767])

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку «Вставить тег»:

Тег файл вставлен в шаблон формы

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

Кнопка Выберите файл в контактной форме

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр — только для подписчиков — subscribers_only: true . Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

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

Новая станица с контактной формой

Если у вас новая страница автоматически добавляется в меню, то выставляем «Порядок» 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку «Опубликовать». Всё. Готово. Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

Получаете спам через Contact Form 7?

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

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Нажмите пункт «Интеграция». Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA Контактной формы 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3: защита от спама

Интеграция плагина с другими сервисами recaptcha

Топчите Setup Integration, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

reCAPTCHA — это сервис Google

Чтобы начать использовать reCAPTCHA, сначала необходимо зарегистрировать ваш сайт WordPress. reCAPTCHA — это сервис Google, поэтому для его использования вам необходим аккаунт Google. Войдите в Google, используя учетную запись, и перейдите по ссылке https://www. google.com/recaptcha/admin . Вы увидите простую регистрационную форму, такую как:

Зарегистрировать сайт WordPress. Goodle reCAPTCHA

Укажите название. Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. После регистрации сайта вы получите ключ сайта и секретный ключ. Введите их (скриншот выше) и сохраните настройки. Вот и все. Теперь ваша контактная форма используют счет reCAPTCHA, чтобы проверить, была ли отправлена сообщение от человека или от спам-бота.

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

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

Стили для форм обратной связи 7

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

Готовые шаблоны для формы

Пример, я изменил стандартный внешний на такой симпатичный:

Внешний вид формы для связи

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

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

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

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

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

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/ . Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

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

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

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

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

Вкладка Contact Form 7 для правки формы.
Страницу на сайте с формой обратной связи.
Редактор с открытым файлом 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;
>

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

Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
Цвет текста определяет свойство 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%;
>

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

Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input ). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input ). Если вы хотите свое, точное значение укажите его в пикселях.
Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input ).
Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea ).

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

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

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

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

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

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

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

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

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

«>

Как отображать поля Contact Form 7 в 2 или более колонок – WPlovers

org/Comment» itemscope=»»>
2022-07-21T02:59:42+00:00
Максим
Спасибо Александр за хорошую и подробную статью с видео обзором!!!
Все остальные которые попадались в поиске — примитивный копипаст))
2022-04-23T14:44:52+00:00
Александр, доброго времени суток!
Подскажите как отцентровать форму размещенную в блоке. Не могу отцентровать не как форму. Форма центруется сама к левой строне блока((
2022-01-21T17:18:18+00:00
org/Person»> Эльман
Здравствуйте!
Подскажите, пожалуйста, необходима форма в 3-и колонки так:
ФИО в 3-и колонки,
Другая информация в 3-и колонки,
А кнопка «Отправить» отдельно в самом низу.
И если возможно, с кнопки «Отправить» переход на другую страницу сайта:)
Спасибо!
2021-12-05T17:26:10+00:00
Богдан
Подскажите пожалуйста, на счет CSS, нужно сделать поле для ввода текста вот с таким стилем, буду очень признателен если поможете: https://drive.google.com/file/d/1KohpKgPMI7-0O9V0-96vN4aMb1IDD4aW/view?usp=sharing
2021-09-09T06:40:56+00:00
org/Person»> Александр Парфилов
Записаться на консультацию или заказать услугу, поскольку пока я не увижу вряд ли чем-то помогу.
2021-09-08T16:28:58+00:00
Богдан
Добрый день!
Тема Astra пишет: «Разметка недопустима в CSS. Не удалось сохранить из-за 1 неверной настройки.»
Что нужно исправить?
2021-03-15T18:37:34+00:00
Андрей
Добрый вечер! На меньшем размере экрана кнопка вылезает за границы формы. Подскажите как поправить плз. Ненашел как прикрепить скрин, залил фото на облако https://cloud.mail.ru/public/nGvL/ofhXrPzFG
2021-03-12T12:27:28+00:00
Эдуард
Доброго времени, Александр.
Форма Поля Contact Form 7 в 3 колонки с подтверждением отображалась как положено. После обновления WordPress до 5.7 и тем (тема Astra) правая кнопка запала в низ. Не могу понять в чем проблема. Пробовал редактировать Contact Form 7 Elementor, переставлял коды и в контактной форме и в дополнительных стилях CS, результата не добился. Помогите пожалуйста….. Чтобы было наглядней, ссылка на сайт: https://dva-kota.ru/
2021-02-20T10:21:38+00:00
org/Person»> Александр Парфилов
class:moyclass примеры в справке https://contactform7.com/submit-button/
2021-02-19T09:25:41+00:00
Андрей
Приветствую еще раз!
Как привязать к кнопке css класс, чтобы использовать ее нажатие в качестве тригера для открытия всплывающего окна попуп? Через настройки элементора класс привязывается ко всей форме. Спасибо)
2021-02-18T17:02:06+00:00
Андрей
Благодарю. Всех благ Вам)
2021-02-18T11:26:56+00:00
Александр Парфилов
За это отвечает параметр default:on Подробнее в справке https://contactform7.com/acceptance-checkbox/
2021-02-17T17:13:19+00:00
Андрей
Все супер, мануал понятен. Вопрос такого плана: как сделать что бы галочка в поле согласия на обработку персональных данных была по умолчанию проставлена?? Спасибо!
2021-02-17T17:13:08+00:00
org/Person»> Андрей
Все супер, мануал понятен. Вопрос такого плана: как сделать что бы галочка в поле согласия на обработку персональных данных была по умолчанию проставлена?? Спасибо!
2021-01-20T14:49:48+00:00
Василий
Здравствуйте! Если я введу код CSS то после этого все формы будут горизонтальные?
2021-01-17T15:37:18+00:00
Андрей
Здравствуйте. У меня на сайте кнопка меньшей высоты чем поля. Как сделать одинаковой высоты.
2021-01-05T16:32:39+00:00
Максим
Про css сложновато, да и не нужно, как оказывается для горизонтальной формы. Достаточно вставить html-код при создании формы в CF7. Сделал. Но у меня проблема — кнопка по высоте меньше, чем поля ввода. Александр, подскажи, пожалуйста, как сделать, чтобы они автоматически были равной высоты. Или хотябы как уменьшить высоту полей ввода и увеличить высоту кнопки.
2020-12-20T19:10:24+00:00
Александр. добрый день!
Ничего не получается .
При вставке кода в дополнительные стили, пишет что «Разметка недопустима в CSS» и соответственно никаких изменений с формой — http://joxi. ru/Rmz7nZOIM5o992
И второй вопрос: страницу конструирую в Elementor. Куда мне вставлять шорт код? Возможно поэтому никаких изменений.
У меня бесплатная версия
Заранее благодарен!
2020-12-12T09:42:49+00:00
Код перестал работать(
2020-12-09T00:14:52+00:00
Александр Парфилов
Распространённая история, часто связанная с другими плагинами. Простой способ проверить — деактивировать их. Напишите если не помогло. Буду смотреть. За некоторое время несколько обращений и возможно у проблемы повторяемый характер.
2020-12-09T00:13:32+00:00
Александр Парфилов
Лучше через дополнительные CSS в настройщике темы или через CSS-сниппет плагином https://wplovers.pw/r/woody/ Если прописать Редактор тем в обычную тему, то всё сотрётся при обновлении. Как вариант можно создать дочернюю тему и с ней развлекаться ))
2020-12-08T10:17:59+00:00
Наталья
Подскажите, пожалуйста, в чем может быть проблема. Пользователь водит значения, нажимает отправить и после отправления — не подтягивает уведомления, что сообщение отпралено. Данные, которые были введены, приходят на почту — с этим все норм, но в форме продолжает крутится бегунок.
2020-12-08T09:03:07+00:00
Даниил
Александр, а с помощь CSS менять также через «Дополнительные стили» или через «Редактор тем»? Спасибо за подсказку, попробую сейчас воспользоваться расширением.
2020-12-08T00:19:15+00:00
Александр Парфилов
Здравствуйте, Даниил. Если делаете в Elementor, то можно попробовать расширение https://wordpress. org/plugins/ht-contactform/ или в платном дополнении https://wplovers.pw/r/jet-elements/ Также это можно изменить с помощью CSS, но раз вы задаёте этот вопрос, то я могу предположить, что вы мало с этим знакомы.
2020-12-07T22:21:22+00:00
Даниил
Александр, добрый день!
Подскажите пожалуйста, как скорректировать внешний вид уведомлений под полями формы
2020-11-25T13:23:20+00:00
Викусик
Привет!
Спасибо! Все сработало без доп стилей. Стили в ВП автоматически подтянулись из контакт форм 7. У меня вопрос по форме. Как сделать верный код для формы : три колонки, под колонками надпись серым мелким шрифтом (без галочки) о соглашении на ПНД, а под надписью кнопка? Внешний вид такой: https://prnt.sc/vprkmx
У меня получился вот такой вот код: https://prnt.sc/vprj58
Вопрос: верно ли? Минус в том, что при адаптивности расстояние м-ду последним полем больше чем расстояние между первыми 2-мя.
https://prnt.sc/vprlko
И как добавить отступ под текст о соглашении? (Над кнопкой)
<div>
<div>
  <div>
     [text* your-name placeholder «Ваше имя»]
  </div>
  <div>
     [email* your-email placeholder «Ваш email»]
  </div>
</div><!— .two-third —>
<div>
  [tel* your-phone placeholder «Ваш телефон»]
</div>
  <div>
   <span><span><span>Нажимая на кнопку «Отправить» Вы даете <a href=»https://questation. ru/polconf»>согласие</a> на обработку своих персональных данных </span></span>
  </div>
</div>
<div></div>
[submit «Отправить»]
2020-10-13T12:20:56+00:00
Александр
Александр привет!
У меня span белое поле куда вводить выходит на много за пределы div и все поля накладываются друг на друга в одну строчку. Ограничил длину поля таким способом [text* your-name 80/200]
2020-10-02T15:42:01+00:00
org/Person»> Виктор
Здравствуйте Александр. Я СООВСЕМ новичок. Подскажите куда именно вставлять CSS код, если работаю без шаблонов?
Спасибо.
2020-09-07T04:50:21+00:00
Можно воспользоватся плагином WPBakery Page Builder , там есть функция горизонтальной контактной формы 🙂
2020-08-30T22:43:39+00:00
Дмитрий
Спасибо огромное, очень помог!
только вот вопрос: едет вёрстка в IE. Форма в 4 колонки отображается просто в столбик. Чем лечить?
В Chrom все работает.
хнык. ..
2020-06-01T19:44:24+00:00
Доброго времени суток! А что делать если при постановке курсора в поле поле меняет цвет на прозрачное? Как сделать чтобы оно не меняло цвет?
2020-05-27T14:25:07+00:00
Сделала в одну строку сначала по своему, потом по Вашему, все отлично встает, но почему то как только я назначаю процент от окна полям — в них невозможно писать, как будто они дисейбл становятся. Может встречали такое, бьюсь не могу решить проблему((
2020-05-27T09:55:36+00:00
org/Person»> Валерий
Спасибо Александр. Есть над чем думать и работать.Но есть вопросы.
1. Четыре колонки не получается. Все равно Sabmit остается на второй полосе. Максимум три колонки в ряд
2. Как сделать что бы информационные тексты (типа «послание успешно отправлено») не висели и не портили вид?
PS я не специалист. Поэтому прошу попроще
Спасибо
2020-05-11T20:25:00+00:00
Tatiana
Добрый день. не знаю прочитаете ли Вы мой комментарий, но хочу узнать, как изменить длину полей? Нужна форма с короткими полями на пол страницы, все по статье делаю, часть поля уезжает и между полями отступа нет, тоесть поле с именем залезло под поле с почтой. Как это исправить?
org/Comment» itemscope=»»>
2020-05-06T22:13:40+00:00
Михаил
Здравтсвуйте, Александр. Что то у меня не получается сделать форму в одну строку. Во первых в шаблоне, дополнительные стили в настройках не съедает этот код, который самый верхний. Просто ни чего не происходит. Так же в элементор, в кнопке вписываю optin, так же, кнопка есть но ни чего не происходит
2020-04-20T19:41:17+00:00
Здравствуйте, подскажите пожалуйста , как в форме с двумя колонками, где будут вводить сообщение уменьшить его по высоте?
2020-03-31T17:11:45+00:00
org/Person»> Aleksy
Александр, день добрый, все делаем по методичке, но форма «плывет», вот скрнишоты
сам код формы «Поля Contact Form 7 в 2 колонки» взято с сайта
https://yadi.sk/i/ewh3lU7pgh5Qsg
и вот что на выходе,
https://yadi.sk/i/R-jhQa1oVvOVQA
откуда-то вылезает совсем другое представление, все разъезжается, что можно сделать, или же порекомендуйте фрилансера для доработки сайта на WP (дизайн не нужно делать, требуется программирование ну и еще может чего по мелочи набежит).
Спасибо.
2020-03-25T15:15:50+00:00
Максим
Здравствуйте, все сделал как есть. Работает все ок. Единственное третья кнопка заказа не растягивается на 100% в моб устройствах. Стоит Криво. Делал из трех колонок. Подскажите пожалуйста.
2020-03-21T17:10:43+00:00
Добрый день, Александр!
Спасибо Вам большое за ваши видео уроки! Вы очень крутой!
Обращаюсь к Вам в связи с проблемой.
Я написал код, а подтверждение все равно не отправляет на политику конфиденциальности.
Вроде все сделал правильно, а не работает! Посмотрите пожалуйста!!!!! Заранее благодарен!!!
<div>
<div>
  <div>
     [text* your-name placeholder «Ваше имя»]
  </div>
  <div>
     [tel* your-phone placeholder «Ваш телефон»]
  </div>
</div><!— .two-third —>
<div>
  [email* your-mail placeholder «Введите Ваш email»]
</div>
</div>
<div></div>
<label>[textarea your-text placeholder maxlength:200 x3 «Введите ваше сообщение»]</label>
<div>
   [acceptance acceptance-487] Заполняя форму, Я a href=»https://gaseng. ru/politika-konfidencialnosti/»target=»_blank»>соглашаюсь</a> на обработку персональных данных [/acceptance]
  </div>
[submit «Отправить обращение»]
2020-03-05T13:21:16+00:00
Станислав
Здравствуйте! Кнопка submit, ниже формы
2020-01-07T15:11:13+00:00
Виталий
Здравствуйте. Всех с праздниками .Подскажите пожалуйста новичку поставил Contact Form 7 в 4 колонки без подтверждения , сама форма отображается НО она прижалась к левой стороне сайта . А когда на мобильной версии смотришь она тык в прытык по крайям . Помогите пожалуйста разобраться куда лезть что делать где именно править ?
2019-11-06T12:17:06+00:00
Николай
Александр, доброго времени суток. Подскажите, как сделать поля формы выше. У меня они получаются в 2 раз раза тоньше. Благодарю.
2019-10-28T07:15:27+00:00
Андрей
Приветствую. Сделал горизонтальную форму, все как показано в видео и в этой статье. Все хорошо работает. Единственная проблема — при просмотре сайта с мобильного устройства слова в названии страницы стали переносится не по пробелам, а по слогам. Подскажите, в чем может быть проблема? Пример страницы: https://driverkard.ru/razblokirovka-karty-voditelya/ (смотреть с мобильного)
Спасибо заранее.
2019-09-10T12:22:30+00:00
greyOFF
Наконец то) Сделал, получилось, не мог сделать форму заявки горизонтально, до фига уроков в интернете, но нет такого, чтобы точно и по сути, а тут прям золотая жила) теперь тебя и смотрю я всегда) Я тебе очень благодарен!
2019-08-22T04:49:29+00:00
org/Person»> Дмитрий
Здравствуйте! Спасибо за вашу работу над этим проект. Как для новичка много полезного нахожу. Подскажите пожалуйста, как submit в мобильной версии сделать на всю ширину? Через Elementor не задается.
2019-08-15T20:37:29+00:00
Екатерина
здравствуйте! подскажите, как сделать форму: телефон и кнопка на одной строке, а внизу чекбокс? Попробовала сделать так:
<div>
[text* your-name]
</div>
<div>
[submit «Получить консультацию»]
</div>
[acceptance acceptance-487] Заполняя форму <a href=»»>соглашаюсь</a> на обработку персональных данных [/acceptance]
Выглядит как надо, но форма стала неактивной
org/Comment» itemscope=»»>
2019-08-06T10:22:07+00:00
Николай
Доброго времени суток, Александр! Столкнулся с такой проблемой. Создавая форму-заявку решил сделать её более ёмкой (полей для заполнения много, порядка 15 разных). С первой строчкой из трёх столбцов (ФИО) не возникло никаких проблем, всё вышло достаточно аккуратно, но вторая строчка начала наплывать на первую без какого либо отступа, текст над блоком второй строчки (номер телефона) сместился в область первой и оказался с правого края.
P.S. форма открывается с клавиши на главной странице через popup. Заранее благодарю!
2019-07-25T02:05:31+00:00
org/Person»> Дмитрий
Проблема следующего плана: сделав все по инструкции и попробовав использование шорткодов, форма заявки не приобретает вид в 2 колонки, как исправить, подскажите пожалуйста…
2019-07-10T00:55:14+00:00
Добрый день!
Посмотрела ваше видео про горизонтальную форму. Спасибо понятно все и доступно!
Есть вопрос, как изменить оформление уведомления при отправки формы (смогла изменить все кроме сообщения об удачной отправке) Contact form 7, форма на темном фоне, и текст уведомления не виден. Как можно изменить цвет текста уведомления об отправки на белый.
2019-07-01T19:32:35+00:00
org/Person»> Алексей
Здравствуйте, как уменьшить отступ от края поля ввода до низа самой формы? Пытаюсь сделать 3 колонки с подтверждением, само подтверждение от полей ввода находится пикселей на 75 ниже, плюс от подтверждения в низ еще пустое поле пикселей на 100, как минимизировать эти расстояния? А то получается поля ввода тонкие, строчка с подтверждением тонкая, а между ними непонятные пустые поля.

css — Контактная форма 7 — Ввести одно поле на всю ширину

Задавать вопрос

Спросил 4 года, 5 месяцев назад

Изменено 8 месяцев назад

Просмотрено 10 тысяч раз

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я в восторге, я научился успешно создавать форму CF7 со столбцами. http://venturekitchen. co/ Это почти выглядит именно так, как я хочу, но не могу взломать последнюю вещь — я хочу, чтобы поле электронной почты было полной ширины, как поле сообщения.

Это код контактной формы 7. У меня есть:

  Имя контакта*
    [текст* ваше имя]

Должность* [текст* должность]

Контактный адрес электронной почты* [email* ваш адрес электронной почты]

Название компании* [текст* название компании]

Сайт компании* [url* веб-сайт компании]

<дел>

Тип возможности* [выбрать* OpportunityType "Быстрый повседневный" "QSR" "Казуальный" "Продукты питания"]

Доход за последние 12 месяцев* [выбрать* Доход "Предварительный доход" "0 — 250 тыс." "250 тыс. — 1 млн" "1 млн — 3 млн" "3 млн — 5 млн" "5 млн — 10 млн" "10 млн+" "Не разглашается"]

Почтовый индекс* [текст* почтовый индекс]

<метка> Описание Описание бизнеса и причина обращения в Venture Kitchen (не более 250 слов).

[описание текстовой области]

[отправить "ОТПРАВИТЬ"]

В частности, код, на котором я сосредоточен, предназначен для поля электронной почты:

  Contact Email*
    [email* ваш адрес электронной почты]

Это CSS, связанный с CF7:

 .wpcf7-form {
    максимальная ширина: 800 пикселей;
    поле: 0 авто !важно;
    семейство шрифтов: 'Bebas Neue';
    высота строки: 1,1;
    размер шрифта: 22px;
    черный цвет;
}
.wpcf7-form-control.wpcf7-отправить {
    цвет фона: черный;
    граница: нет;
    граница-нижний-левый-радиус: 0px;
    граница-нижний-правый-радиус: 0px;
    граница-верхний-правый-радиус: 0px;
    граница-верхний-левый-радиус: 0px;
    поле:0 авто !важно;
    семейство шрифтов: «Bebas Neue»;
    размер шрифта: 22px;
    интервал между буквами: 2px;
    верхняя часть отступов: 15 пикселей;
}
текстовая область {
    ширина: 810 пикселей;
}
.три {
    максимальная ширина: 600 пикселей;
}

Я рассмотрел возможность добавления пользовательского класса ТОЛЬКО для поля ввода, но не могу понять, куда его поместить, попытался добавить собственный класс вокруг всего блока div для раздела электронной почты, а затем сделать ширину: 810 пикселей, но это не сработало. Любые другие предложения для этого?

css
wordpress
формы
контактная форма-7

попробуй что-нибудь подобное

 [текст* твое имя класс: твой класс]

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

 span.wpcf7-form-control-wrap .wpcf7-date, span.wpcf7-form-control-wrap .wpcf7-quiz, span.wpcf7-form-control-wrap .wpcf7-number, span.wpcf7-form- control-wrap .wpcf7-select, span.wpcf7-form-control-wrap .wpcf7-text, span.wpcf7-form-control-wrap .wpcf7-textarea {
    ширина: 100%;
}
span.wpcf7-form-control-wrap {
    ширина: 100%;
}

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

 style="width:810px"

Пример:

Я получаю это, когда добавляю это с помощью консоли в Chrome:

Вы можете не использовать css и просто установить атрибут размера.

 <метка> Электронная почта*
    [email* размер вашего адреса электронной почты:100]

Зарегистрируйтесь или войдите

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Фейсбук
Твиттер
LinkedIn

Хотите настроить формы Contact Form 7 на своем веб-сайте WordPress? Contact Form 7 — это плагин для создания форм, который может создавать формы для использования на вашем веб-сайте. Он бесплатен и является одним из самых популярных плагинов WordPress. Формы могут использоваться на вашем веб-сайте и даже могут быть представлены во всплывающем окне.

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

Сегодня я покажу, как настроить ваши формы в WordPress с помощью плагина Contact Form 7.

Зачем настраивать формы вашего веб-сайта

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

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

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

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

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

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

Шаг 1: Установите контактную форму 7

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

Начнем с того, что щелкнем «Плагины» и выберем опцию «Добавить новый» на левой панели администратора.

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

Прокрутите вниз, пока не найдете плагин Contact Form 7, нажмите кнопку «Установить сейчас» и активируйте плагин для использования.

Шаг 2: Создайте форму

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

В левой панели администратора нажмите «Контакты» и выберите опцию «Контактные формы». В результате откроется главная страница настроек.

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

Вставьте шорткод в нужное место. Теперь, когда ваша форма создана и установлена, пришло время настроить ее.

Шаг 3: Пользовательский метод CSS

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

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

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

В левой панели администратора нажмите «Внешний вид» и выберите «Настроить».

Нажмите кнопку «Дополнительный CSS» слева. Здесь вы можете добавить пользовательский CSS на свой сайт. Вот пример: скопируйте и вставьте следующий код в поле «Дополнительный CSS»: цвет фона: #fbefde;
граница: 1px сплошная #f28f27;
отступ: 20 пикселей;
}
.wpcf7 input[type=»text»],
.wpcf7 input[type=»email»],
.wpcf7 textarea {
background:#725f4c;
цвет:#FFF;
семейство шрифтов: lora, без засечек;
стиль шрифта: курсив;
}
.wpcf7 input[type=»submit»],
.wpcf7 input[type=»button»] {
background-color:#725f4c;
ширина: 100%;
выравнивание текста: по центру;
преобразование текста: верхний регистр;
}[/ht_message]

Нажмите кнопку «Опубликовать», чтобы применить пользовательский CSS.

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

Если вы не знакомы с CSS, помните, что вы используете коды HTML для выбора цвета. Это в форме #FFFFFF, шестнадцатеричном формате, и есть много доступных ресурсов, чтобы найти нужный цвет. Кроме того, это означает, что вы можете использовать большинство приложений для редактирования изображений, чтобы найти шестнадцатеричный цвет, который вы хотите использовать.

Шаг 4: Пользовательский метод стиля Forms 7

ПРИМЕЧАНИЕ. Плагин Contact Form 7 Style был удален из репозитория WordPress. Мы обновим этот учебник, как только сможем. Приносим извинения за возможные неудобства.

Установите и активируйте плагин Contact Form 7 Style.

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

Перейдите к форме, которую вы хотите отредактировать. Вы должны увидеть новую вкладку «Шаблон стиля контактной формы 7», которая была добавлена в плагин. Нажмите на нее.

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

Второй способ — создать новый шаблон. В левой панели администратора нажмите «Стиль контакта» и выберите параметр «Добавить новый».

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

Функция превыше стиля

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

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

Например, многие новички не учитывают дальтоников. Правильно, вы можете подумать, что вы очень умны, используя уникальные цвета, но их может быть трудно прочитать этим людям, которые составляют от 5 до 10% населения США.

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

Создание красивых форм для вашего веб-сайта

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

А плохой дизайн потенциально может оттолкнуть посетителей от вашего сайта.

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

Какой метод вы использовали? Какой стиль вы выбрали для использования?

Фейсбук
Твиттер
LinkedIn

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

Учебники

Последнее обновление: 13 сентября 2022 г.

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

Что такое контактная форма 7?

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

Нам так нравится этот плагин, что его поддерживает практически каждая тема WPExplorer, даже наша самая продаваемая премиальная тема WordPress Total. И другие разработчики соглашаются, так как вам будет сложно найти тему, с которой она несовместима.

Почему стоит выбрать контактную форму 7?

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

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

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

Как начать работу с контактной формой 7

Информация и загрузкаПосмотреть демонстрацию

Установка проста. Просто перейдите к «Плагины » > «Добавить новый » и используйте параметр «Поиск», чтобы найти плагин «Контактная форма 7». Установите и активируйте плагин.

После активации вы должны увидеть удобный пункт меню «Контакты» на панели управления WordPress. Нажмите на нее, чтобы перейти на главную страницу управления контактной формой.

Авторы плагина были достаточно любезны, чтобы включить некоторую полезную информацию в панель инструментов — не стесняйтесь отклонить это уведомление в любое время. По умолчанию вас также уже будет ждать пример «Контактная форма 1». Мы рекомендуем удалить эту форму, чтобы вы могли начать с нуля.

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

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

Теперь перейдем к доступным настройкам. Мы рассмотрим эти вкладки за вкладками.

Настройки формы

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

Чтобы удалить поле просто удалите его код из формы.

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

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

Настройки почты

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

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

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

Настройки сообщений

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

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

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

Завершив редактирование, обязательно сохраните изменения.

Использование вашей формы

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

 [contact-form-7 title="Контактная страница"]

Или, если вы используете конструктор страниц, такой как WPBakery или Elementor, вы можете просто использовать соответствующий модуль конструктора контактной формы 7, чтобы выбрать и вставить свою форму на страницу. .

Контактная форма 7 Дополнительные советы

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

Текст-заполнитель

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

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

Полный -Width Entry Fields

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

 [текст* ваше имя 300/ "Ваше имя"]

Если вы хотите сделать это правильно, вам нужно добавить следующий код в таблицу стилей CSS:

 input. wpcf7-text { width : 100%; }

Но это повлияет на ВСЕ текстовые поля контактной формы 7 во всей вашей установке WordPress.

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

Затем щелкните значок шестеренки чуть выше основной области содержимого вашего сообщения или страницы и введите #YOUR-ROW-ID, а затем указанный выше код CSS.

Параллельные поля ввода

Еще одна хитрость — добавить поля рядом. Я думаю, что это делает контактную форму очень чистой и профессиональной. Чтобы сделать это с помощью темы Total WordPress Theme, мы упростили вам задачу и добавили собственный класс. Просто добавьте class=»one-half» к вашим тегам p следующим образом:

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

[email* your-email "Ваш адрес электронной почты"]

[текстовая область вашего сообщения]

[отправить "Отправить форму"]

Примечание: Этот совет предназначен специально для пользователей темы Total, но другие темы могут иметь похожие встроенные стили формы.

Ширина полей contact form 7: Contact Form 7 ширина полей плагина для WordPress

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

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

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

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

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

Contact form 7 настройка внешнего вида • Вэб-шпаргалка для интернет предпринимателей!

Изменить стили Contact Form 7

Изменить стили формы с помощью Contact Form 7 Style — для ленивых

Готовые стили для Contact Form 7

Плагин WordPress Contact Form 7

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

Размещаем контактную форму на отдельной странице сайта/блога

Получаете спам через Contact Form 7?

Интеграция Google reCAPTCHA v3: защита от спама

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

И в заключение:

Почему не работает (не отправляет письма) Contact Form 7?

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

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

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

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

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

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

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

Как отображать поля Contact Form 7 в 2 или более колонок – WPlovers

css — Контактная форма 7 — Ввести одно поле на всю ширину

Зарегистрируйтесь или войдите

Опубликовать как гость

Опубликовать как гость

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

Зачем настраивать формы вашего веб-сайта

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

Шаг 1: Установите контактную форму 7

Шаг 2: Создайте форму

Шаг 3: Пользовательский метод CSS

Шаг 4: Пользовательский метод стиля Forms 7

Функция превыше стиля

Создание красивых форм для вашего веб-сайта

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

Что такое контактная форма 7?

Почему стоит выбрать контактную форму 7?

Как начать работу с контактной формой 7

Настройки формы

Настройки почты

Настройки сообщений

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

Использование вашей формы

Контактная форма 7 Дополнительные советы

Текст-заполнитель

Полный -Width Entry Fields

Параллельные поля ввода

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

Рубрики