Contact Form 7 ширина полей плагина для WordPress
После установки плагина Contact Form 7 выяснилось, что размеры (ширина) полей формы меня не устраивают, а как их изменять – вопрос.
Пришлось немного повозиться, но, как оказалось, вопрос этот решаем.
Собственно, вот ответ на этот вопрос, размещенный на сайте разработчика Contact Form 7 , но там все на английском (плюс надо еще вычитывать то, что непосредственно относится к делу), поэтому я дам еще и свои пояснения:
На странице настройки плагина Contact Form 7 есть программный код, который определяет, какие поля будут присутствовать в форме.
По умолчанию, этот код выглядит так:
<p>Ваше имя (обязательно)<br /> [text* your-name] </p> <>Ваш E-Mail (обязательно)<br /> [email* your-email] </p> <p>Тема<br /> [text your-subject] </p> <p>Сообщение<br /> [textarea your-message] </p> <p>submit «Отправить»]</p>
После установки Really Simple CAPTCHA он выглядит так:
<p>Ваше имя (обязательно)<br /> [text* your-name] </p> <>Ваш E-Mail (обязательно)<br /> [email* your-email] </p> <p>Тема<br /> [text your-subject] </p> <p>Сообщение<br /> [textarea your-message] </p> <p>Введите код с картинки<br /> [captchac captcha-287] [captchar captcha-287] </p> <p>submit «Отправить»]</p>
Как выяснил я, размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются тоже этим кодом.
Вот как он сейчас выглядит у меня:
<p> Ваше имя (обязательно): [text* your-name 80/200] Ваш E-Mail (обязательно): [email* your-email 80/200] Тема: [text your-subject 120/300] Текст сообщения, вопроса или описания собственной ситуации: [textarea your-message 130×20] Введите код с картинки [captchac captcha-941] [captchar captcha-941 20/50] </p> <p>[submit «Отправить»]</p>
Т.е., что я, собственно, сделал:
1. Убрал все лишние теги <p>, </p> и <br /> (за счет чего расстояние по вертикали между полями и надписями Contact Form 7 уменьшились.
2. Добавил в теги полей ввода имени, e-mail, темы и капчи пары цифр 80/200, 120/300 и 20/50 (это ширина поля и максимальное количество символов в нем, на странице разработчика приводятся примеры 40/100 и 20/50, я свои цифры подобрал экспериментальным путем, глядя на то, как меняется ширина полей).
3. Добавил в тег поля сообщения пару цифр 130×20 (160 – это ширина поля в символах, 20 – это высота поля в строчках – тоже подобрал экспериментальным путем).
Все это видно, если просто сравнить эти варианты кодов.
Вконтакте
Одноклассники
Регуляция ширины полей Contact Form 7
Модератор SeVlad(@sevlad)
wp.me/3YHjQ
как регулировать ширину полей?
Стилями. Как и любое другое форматирование любых элементов.
на сайте плагина есть руководство.
можно наглядный пример.
<label> Ваше имя (обязательно)
[text* your-name] </label>
<label> Ваш e-mail (обязательно)
[email* your-email] </label>
<label> Тема
[text your-subject] </label>
<label> Сообщение
[textarea your-message] </label>
[submit «Отправить»].</p>
прям из руководства. добавьте в стили темы:
input[type="text"],
input[type="email"],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
если можно, обьясните как для чайника
в панели — «Настроить\Дополнительные стили». вот все что там удалите и добавьте код:
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 50%;
}
сделал как написанно, но стиль не изменился, все как было так и осталось
покажите проблемную страницу.
вот ссылка на страницу http://fast-myjnia.pl/?page_id=154
вижу узенькую форму.
тоесть обновля ли страницу? да
но дело в том что ее нельзя регулировать
она уже слишком узкая
ну так исправьте
width: 50%;
на нужную вам ширину
не помогает пробовал
Contact Form 7 ширина полей плагина для WordPress
После установки плагина Contact Form 7 выяснилось, что размеры (ширина) полей формы меня не устраивают, а как их изменять – вопрос.
Пришлось немного повозиться, но, как оказалось, вопрос этот решаем.
Собственно, вот ответ на этот вопрос, размещенный на сайте разработчика Contact Form 7 , но там все на английском (плюс надо еще вычитывать то, что непосредственно относится к делу), поэтому я дам еще и свои пояснения:
На странице настройки плагина Contact Form 7 есть программный код, который определяет, какие поля будут присутствовать в форме .
По умолчанию, этот код выглядит так:
<p>Ваше имя (обязательно)<br />
[text* your-name] </p>
<>Ваш E-Mail (обязательно)<br />
[email* your-email] </p>
<p>Тема<br />
[text your-subject] </p>
<p>Сообщение<br />
[textarea your-message] </p>
<p>submit «Отправить»]</p>
После установки Really Simple CAPTCHA он выглядит так:
<p>Ваше имя (обязательно)<br />
[text* your-name] </p>
<>Ваш E-Mail (обязательно)<br />
[email* your-email] </p>
[text your-subject] </p>
<p>Сообщение<br />
[textarea your-message] </p>
<p>Введите код с картинки<br />
[captchac captcha-287] [captchar captcha-287] </p>
<p>submit «Отправить»]</p>
Как выяснил я, размеры (ширина) полей Contact Form 7 и расстояние между ними регулируются тоже этим кодом.
Вот как он сейчас выглядит у меня:
<p>
Ваше имя (обязательно):
[text* your-name 80/200]
Ваш E-Mail (обязательно):
[email* your-email 80/200]
Тема:
[text your-subject 120/300]
Текст сообщения, вопроса или описания собственной ситуации:
[textarea your-message 130×20]
Введите код с картинки
[captchac captcha-941]
[captchar captcha-941 20/50] </p>
<p>[submit «Отправить»]</p>
Т.е., что я, собственно, сделал:
1. Убрал все лишние теги <p>, </p> и <br /> (за счет чего расстояние по вертикали между полями и надписями Contact Form 7 уменьшились.
2. Добавил в теги полей ввода имени, e-mail, темы и капчи пары цифр 80/200, 120/300 и 20/50 (это ширина поля и максимальное количество символов в нем, на странице разработчика приводятся примеры 40/100 и 20/50, я свои цифры подобрал экспериментальным путем, глядя на то, как меняется ширина полей).
3. Добавил в тег поля сообщения пару цифр 130×20 (160 – это ширина поля в символах, 20 – это высота поля в строчках – тоже подобрал экспериментальным путем).
Все это видно, если просто сравнить эти варианты кодов.
Вконтакте
Google+
Одноклассники
Мой мир
видео уроки, инструкции для начинающих
Подробные видеоинструкции WordPress на тему: «WordPress contact form 7 ширина полей»:Поле text плагина Contact Form 7 — как настроить, какие параметры принимает
Contact Form 7. Выводим поля горизонтально, добавляем выбор даты и маску для телефона
Contact form 7 — настройка формы обратной связи для WordPress. Форма заявки Вордпресс
Настройка Contact Form 7. Полное описание настроек для форм, а так же фишки и дополнения
Contact Form 7 CSS to Style CF7 Submit Button, Inputs, Fields and Dropdown | CF7 Tuts Part 2
Как сделать горизонтальную форму в Contact Form 7
По умолчанию форма, созданная с помощью плагина Contact Form 7, отображается вертикально в столбец. Разберёмся как расположить поля горизонтально.
Включаем поддержку шорткодов в Contact Form 7 и устанавливаем плагин Column Shortcodes.
Column Shortcodes позволяет отображать содержимое в несколько колонок в разных вариациях.
Соответственно, полный список шорткодов выглядит следующим образом.
[full_width][/full_width] [one_half][/one_half] [one_half_last][/one_half_last] [one_third][/one_third] [one_third_last][/one_third_last] [one_fourth][/one_fourth] [one_fourth_last][/one_fourth_last] [two_third][/two_third] [two_third_last][/two_third_last] [three_fourth][/three_fourth] [three_fourth_last][/three_fourth_last] [one_fifth][/one_fifth] [one_fifth_last][/one_fifth_last] [two_fifth][/two_fifth] [two_fifth_last][/two_fifth_last] [three_fifth][/three_fifth] [three_fifth_last][/three_fifth_last] [four_fifth][/four_fifth] [four_fifth_last][/four_fifth_last] [one_sixth][/one_sixth] [one_sixth_last][/one_sixth_last] [five_sixth][/five_sixth] [five_sixth_last][/five_sixth_last]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
[full_width][/full_width] [one_half][/one_half] [one_half_last][/one_half_last] [one_third][/one_third] [one_third_last][/one_third_last] [one_fourth][/one_fourth] [one_fourth_last][/one_fourth_last] [two_third][/two_third] [two_third_last][/two_third_last] [three_fourth][/three_fourth] [three_fourth_last][/three_fourth_last] [one_fifth][/one_fifth] [one_fifth_last][/one_fifth_last] [two_fifth][/two_fifth] [two_fifth_last][/two_fifth_last] [three_fifth][/three_fifth] [three_fifth_last][/three_fifth_last] [four_fifth][/four_fifth] [four_fifth_last][/four_fifth_last] [one_sixth][/one_sixth] [one_sixth_last][/one_sixth_last] [five_sixth][/five_sixth] [five_sixth_last][/five_sixth_last] |
Исходная форма расположена вертикально.
И имеет следующий код.
<label> Ваше имя [text* your-name] </label> <label> Ваш e-mail [email* your-email] </label> <label> Сообщение [textarea your-message] </label> [submit «Отправить»]
<label> Ваше имя [text* your-name] </label>
<label> Ваш e-mail [email* your-email] </label>
<label> Сообщение [textarea your-message] </label>
[submit «Отправить»] |
Расположим поля «Ваше имя» и «Ваш e-mail» на одной строке.
Для этого, код первого поля оборачиваем шорткодом one_half, а код второго — one_half_last (последнее поле в строке всегда должно заканчиваться соответствующим шорткодом с суффиксом _last).
[one_half]<label> Ваше имя [text* your-name] </label>[/one_half] [one_half_last]<label> Ваш e-mail [email* your-email] </label>[/one_half_last] <label> Сообщение [textarea your-message] </label> [submit «Отправить»]
[one_half]<label> Ваше имя [text* your-name] </label>[/one_half]
[one_half_last]<label> Ваш e-mail [email* your-email] </label>[/one_half_last]
<label> Сообщение [textarea your-message] </label>
[submit «Отправить»] |
Проверяем результат.
По умолчанию Column Shortcodes не добавляем отступы между колонками. Исправим это, добавив следующий CSS-код в «Внешний вид» -> «Настроить» -> «Дополнительные стили».
.full_width { width: 100%; } .one_half { width: 49% !important; margin-right: 2% !important; } .one_half.last_column { width: 49% !important; margin-right: 0px !important; } .one_third { width: 32% !important; margin-right: 2% !important; } .one_third.last_column { width: 32% !important; margin-right: 0px !important; } .two_third { width: 66% !important; margin-right: 2% !important; } .two_third.last_column { width: 66% !important; margin-right: 0px !important; } .one_fourth { width: 23.5% !important; margin-right: 2% !important; } .one_fourth.last_column { width: 23.5% !important; margin-right: 0px !important; } .three_fourth { width: 74.5% !important; margin-right: 2% !important; } .three_fourth.last_column { width: 74.5% !important; margin-right: 0px !important; } .one_fifth { width: 18.4% !important; margin-right: 2% !important; } .one_fifth.last_column { width: 18.4% !important; margin-right: 0px !important; } .two_fifth { width: 39% !important; margin-right: 2% !important; } .two_fifth.last_column { width: 39% !important; margin-right: 0px !important; } .three_fifth { width: 59% !important; margin-right: 2% !important; } .three_fifth.last_column { width: 59% !important; margin-right: 0px !important; } .four_fifth { width: 79.6% !important; margin-right: 2% !important; } .four_fifth.last_column { width: 79.6% !important; margin-right: 0px !important; } .one_sixth { width: 15% !important; margin-right: 2% !important; } .one_sixth.last_column { width: 15% !important; margin-right: 0px !important; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
.full_width { width: 100%; } .one_half { width: 49% !important; margin-right: 2% !important; } .one_half.last_column { width: 49% !important; margin-right: 0px !important; } .one_third { width: 32% !important; margin-right: 2% !important; } .one_third.last_column { width: 32% !important; margin-right: 0px !important; } .two_third { width: 66% !important; margin-right: 2% !important; } .two_third.last_column { width: 66% !important; margin-right: 0px !important; } .one_fourth { width: 23.5% !important; margin-right: 2% !important; } .one_fourth.last_column { width: 23.5% !important; margin-right: 0px !important; } .three_fourth { width: 74.5% !important; margin-right: 2% !important; } .three_fourth.last_column { width: 74.5% !important; margin-right: 0px !important; } .one_fifth { width: 18.4% !important; margin-right: 2% !important; } .one_fifth.last_column { width: 18.4% !important; margin-right: 0px !important; } .two_fifth { width: 39% !important; margin-right: 2% !important; } .two_fifth.last_column { width: 39% !important; margin-right: 0px !important; } .three_fifth { width: 59% !important; margin-right: 2% !important; } .three_fifth.last_column { width: 59% !important; margin-right: 0px !important; } .four_fifth { width: 79.6% !important; margin-right: 2% !important; } .four_fifth.last_column { width: 79.6% !important; margin-right: 0px !important; } .one_sixth { width: 15% !important; margin-right: 2% !important; } .one_sixth.last_column { width: 15% !important; margin-right: 0px !important; } |
Сохраняем изменения и проверяем результат.
Настройка 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 есть ещё несколько, которые можно использовать для защиты от спама и для отправки файлов. Более подробно об этом вы можете прочитать в этой статье.
Видеоинструкция
Если у вас остались вопросы, то посмотрите видеоинструкцию, в которой я показываю как всё это делается.
Если данная статья была Вам полезна, то оставляйте комментарии и подписывайтесь на обновления блога.
Желаю удачи в создании и настройке форм для вашего сайта! До новых встреч 🙂
Изменить размер select в Contact form 7
Я понимаю, что с помощью css )) А конкретно можно? Как сделать чекбоксы столбиком — я нашёл. А вот как как изменить размеры select — не смог понять. Я уже ему и класс присваивал и прописывал значения в css для этого класса. Ничего не вышло. Может кто-то сможет привести пример с последовательностью действий?
скажите, вы доктору тоже сэлфи отправляете, с просьбой назначить лечение?
конкретней можно, когда есть конкретный поциент
Ну вот смотрите, доктор. Есть select с классом vybor
[select* menu-521 class:vybor multiple «Первый» «Второй»]
Что я должен прописать в style.css чтобы размер шрифта в этом элементе стал 18 и жирным шрифтом?
font-size: 18pt;
font-weight: 600; //к примеруваш медицинский справочник: http://htmlbook.ru/css
А сам селектор как должен быть обозначен в данном случае?
Для чекбоксов он выглядел вот так
span.wpcf7-list-item
Для select он будет выглядеть так?
.vybor.wpcf7-list-item
Или так?
# vybor
Как всё это правильно записать?
#vybor
{
font-size: 18pt;
font-weight: 600;
}
Так правильно?
#vybor
{
font-size: 18pt;
font-weight: 600;
}
Так не работает.
Так правильно?
мне отсюда не видно, а хрустальный шар вчера в карты проиграл -((
Модератор Denis Yanchevskiy(@denisco)
WordPress-разработчик, wpcute.ru
А сам селектор как должен быть обозначен в данном случае?
Перед названием класса нужно указать точку.
.vybor {
font-size: 18pt;
font-weight: 600;
}Доктор, а не Денису ли Вы хрустальный шар проиграли?
Денис, благодарю Вас! Теперь всё работает.
Денис просто был лучшим в классе по чтению мыслей и в гадании по скриншетом, а я в это время в детской комнате милиции обычно находился.
Доктор, аналогично. Поэтому теперь приходится навёрстывать упущенное.