Bootstrap for Contact Form 7

Bootstrap для Contact Form 7 изменяет весь вывод популярного плагина Contact Form 7, чтобы он был полностью совместим с текущей версией 3 популярного CSS-фреймворка Bootstrap. Что это значит для вас как пользователя Bootstrap: никаких дополнительных правил CSS не требуется - с этого момента Contact Form 7 легко интегрируется с общим дизайном Bootstrap. Можно даже использовать различные макеты форм через вкладку «Дополнительные настройки» Contact Form 7. Этот плагин является дополнением к контактной форме 7. Для этого плагина требуется активировать контактную форму 7, в противном случае он ничего не изменит. Кроме того, вы должны использовать его вместе с темой WordPress на основе Bootstrap, иначе формы могут выглядеть странно (и в любом случае нет смысла использовать это дополнение). Использование Bootstrap для контактной формы 7 не предоставляет дополнительных параметров, поэтому вы можете продолжать использовать контактную форму 7 (почти) так же, как и раньше. Плагин не нарушит внешний вид вашей формы, однако рекомендуется настроить шорткоды контактной формы для достижения идеальных результатов: как правило, вам больше не следует использовать HTML-теги для переноса шорткодов полей. Они уже включают полную разметку для Bootstrap, включая отображение меток. Прочтите Руководство по установке для быстрого ознакомления. Расширенные функции Плагин предоставляет некоторые дополнительные полезные функции для еще большего улучшения ваших форм: макет формы может быть изменен на горизонтальный или встроенный, размер ввода формы может быть глобально изменен флажком, а радиогруппы могут отображаться по одной в строке, в строке или поскольку кнопки Bootstrap текстовые вводы и текстовые поля поддерживают функцию группы ввода Bootstrap для добавления содержимого до или после них текстовые вводы и текстовые поля могут отображать количество символов (шорткод [count] из контактной формы 7) встроенным в поле ввода captcha может отображать изображение captcha встроенным с помощью параметров GET в URL-адресе контактной формы можно предварительно определить значения полей. Вышеупомянутые функции подробно описаны на странице «Другие примечания». Основная идея плагина Многие темы WordPress основаны на Bootstrap - и хотя это общий подход к использованию правил CSS для стилизации вашего HTML-контента, возможно и наоборот - со многими преимуществами. При использовании хорошо известного фреймворка, который предоставляет общие стили для всех важных компонентов веб-сайта, может потребоваться много времени, чтобы применить те же стили к сторонним плагинам, которые (очевидно) не были написаны с учетом фреймворка. Это прекрасно, но если вы используете Bootstrap для своей темы WordPress, вам наверняка понравится тот факт, что вам больше не нужно писать правила CSS для плагина Contact Form 7. С самого начала все будет выглядеть как Bootstrap, чтобы вписаться в дизайн вашего веб-сайта. Если вы не используете Bootstrap, этот плагин для вас бесполезен, но, возможно, вы просто знаете, как настроить другой популярный плагин WordPress для интеграции с другим хорошо написанным фреймворком CSS. Расширенные функции Дополнительные настройки Здесь вы найдете дополнительные настройки, которые являются частью плагина Bootstrap for Contact Form 7. Если вы хотите узнать больше о дополнительных настройках исходного плагина Contact Form 7, посетите эту страницу. Вы можете настроить несколько свойств формы (свойства, которые влияют на всю форму, а не только на ее одно поле), чтобы придать вашим формам желаемый вид. Вот список свойств, их функций и их возможных значений: layout - регулирует макет формы (обратите внимание, что в большинстве случаев встроенная форма требует дополнительного стиля, чтобы хорошо выглядеть); допустимые значения: «по умолчанию», «встроенный», «горизонтальный»; значение по умолчанию: размер 'default' - регулирует размер всех полей ввода; допустимые значения: default, small, large; значение по умолчанию: 'default' group_layout - регулирует расположение флажков и радиогрупп; допустимые значения: 'default', 'inline', 'buttons'; значение по умолчанию: 'default' group_type - регулирует цвет флажка и радиогрупп с расположением кнопок; допустимые значения: "по умолчанию", "первичный", "успех", "информация", "предупреждение", "опасность"; значение по умолчанию: 'default' submit_size - регулирует размер кнопки отправки; допустимые значения: 'default', 'small', 'large' или пустая строка, чтобы заставить ее иметь размер, определенный в свойстве формы size; значение по умолчанию - пустая строка submit_type - регулирует цвет кнопки отправки; допустимые значения: "по умолчанию", "первичный", "успех", "информация", "предупреждение", "опасность"; значение по умолчанию: 'primary' required_html - настраивает вывод HTML для добавления к меткам обязательных полей; допустимые значения: любой вывод HTML; значение по умолчанию: * grid_columns - позволяет вам переопределить общее количество столбцов сетки Bootstrap (вам может потребоваться изменить это, только если вы используете пользовательскую версию Bootstrap); допустимые значения: любое целое число больше 1; значение по умолчанию: 12 label_width - регулирует ширину подписи формы (применимо только к горизонтальному расположению); допустимые значения: любое целое число от 1 до значения grid_columns минус 1; значение по умолчанию: 3 точка останова - регулирует отзывчивую точку останова (применяется только к горизонтальной компоновке); допустимые значения: 'xs', 'sm', 'md', 'lg'; значение по умолчанию: 'sm'. Существует четыре метода настройки вышеуказанных свойств: Самый простой - использовать вкладку «Дополнительные настройки» при редактировании формы в контактной форме 7 и вставлять туда любое свойство и его желаемое значение, по одному в каждой строке. Например: layout: horizontal size: large group_layout: inline В качестве альтернативы вы можете использовать свойства filter cf7bs_form _ {{FORM_ID}} _, где {{FORM_ID}} необходимо заменить идентификатором формы, которую вы хотите изменить (вы найдете этот номер в шорткоде общей формы). В эту функцию передается массив всех свойств и их значений, чтобы вы могли легко их настроить. Пример (в этом случае мы бы настроили контактную форму с ID 3): function my_custom_form_properties ($ properties) {$ properties ['layout'] = 'horizontal'; $ properties ['size'] = 'большой'; $ properties ['group_layout'] = 'встроенный'; return $ properties; } add_filter ('cf7bs_form_3_properties', 'my_custom_form_properties'); Третий способ немного отличается от двух других, поскольку он не изменяет свойства конкретной формы, а изменяет свойства по умолчанию для всех форм. Для этого вы должны использовать фильтр cf7bs_default_form_properties, который работает точно так же, как другой фильтр, упомянутый выше. Четвертый метод отличается от других тем, что позволяет переопределить настройки формы для каждого поля. Вы можете добавить любое имя параметра плюс его предполагаемое значение в качестве атрибута шорткода для любого поля, чтобы поведение этого поля отличалось от настройки формы. Это может быть особенно полезно, если вам нужно создать расширенные макеты форм, например, когда вам нужно несколько полей в одной строке. Например, вы можете сделать следующее, чтобы отобразить два поля в одной строке, даже если для макета формы установлено значение «по умолчанию»: Обратите внимание, что Пользовательский фильтр формы имеет приоритет над свойствами, определенными в админке, в то время как фильтр по умолчанию используется только как резерв. Группы ввода Все текстовые поля ввода поддерживают функцию группы ввода, которую предоставляет Bootstrap. Чтобы использовать его, добавьте конструкцию, похожую на шорткод (почти, но вместо этого нужно использовать фигурные скобки) в содержимое любого шорткода ввода текста / электронной почты / URL / тел. Пример: [text twitter-username] {input_before} @ {/ input_before} Ваш дескриптор Twitter [/ text] Обратите внимание, что input_before и input_after также могут быть добавлены в текстовые поля. В этом случае контент будет отображаться непосредственно над или под текстовым полем соответственно. Выравнивание кнопки отправки. Кнопка отправки может быть выровнена по левому, центральному или правому краю, чтобы соответствовать желаемому внешнему виду вашей формы. Просто укажите вариант выравнивания со значением «влево», «по центру» или «вправо». Пример: [submit align: right «Отправить»] Контактная форма 7 для встроенного подсчета символов предоставляет шорткод [count], который отображает число, показывающее, сколько символов было введено или сколько символов осталось в определенном поле ввода. Однако использовать его самостоятельно выглядит некрасиво. Но знаете, что, вы также можете настроить это, добавив опцию include_count к любому вводу text / email / url / tel / textarea. Вы можете дополнительно указать значение для этой опции, которое может состоять из позиционирования («до» или «после») и направления счета («вверх» или «вниз») счетчика. Напоминаем, что при выборе «вниз» убедитесь, что вы задали элементу ввода максимальную длину, иначе нет смысла использовать этот счетчик. Пример: [text your-text maxlength: 80 include_count: after: down] Ваш текст [/ text] Кстати, вы читали информацию о группах ввода выше? Вы можете комбинировать их с подсчетом символов (потому что простой просмотр числа без какой-либо дополнительной информации может сбить с толку посетителей вашего сайта). В следующем примере после поля будет показано сообщение типа «433 символа осталось»: [textarea your-text maxlength: 500 include_count: after: down input_after: characters --- left] Ваш текст [/ textarea] Встроенное изображение Captcha Если вы ' Если вы использовали контактную форму 7 вместе с плагином Really Simple CAPTCHA, вы, вероятно, знаете о шорткодах [captchac] (поле ввода captcha) и [captchac] (изображение captcha), которые он предоставляет. Вы по-прежнему можете использовать их независимо, но, вероятно, будет лучше, если изображение captcha отображается в строке, рядом с полем ввода. Для этого полностью удалите шорткод [captchac] и вместо этого добавьте новый параметр include_captchac в шорткод [captchar]. При желании вы можете присвоить этой опции значение («до» или «после»), чтобы отметить место, где должно появиться изображение. Пример: [captchar your-captcha include_captchac: before] Captcha [/ captchar] URL-адреса настраиваемых форм Вы можете добавить параметры GET для заполнения ваших форм настраиваемыми начальными значениями, просто используя имя поля в качестве ключа параметра и желаемое значение в качестве значения параметра. Это работает с флажками, полями даты, числовыми полями, полями выбора, всеми текстовыми полями и текстовыми полями. Самый простой способ создать такой URL-адрес - использовать функцию плагина cf7bs_add_get_parameter (), где вы указываете параметры аналогично функции add_query_arg ядра WordPress. Пример: $ my_custom_url = cf7bs_add_get_parameter (array ('your-name' => 'John Doe', 'your-email' => 'johndoe@example.com', 'your-subject' => 'Запрос поддержки',), 'http://www.example.com/my-custom-form/'); Фильтрация аргументов поля Начиная с версии 1.2.3, аргументы поля для каждого отдельного поля могут быть отфильтрованы, что позволяет вам изменять все, что угодно. Фильтры, которые вам нужны для подключения вашей функции, имеют следующую структуру cf7bs_form _ {{FORM_ID}} _ field _ {{FIELD_BASETYPE}} _ {{FIELD_NAME}} _ properties. Да, это длинное имя фильтра, но оно необходимо, чтобы вы могли фильтровать как можно более детально. При использовании одного из фильтров замените {{FORM_ID}} идентификатором формы, {{FIELD_BASETYPE}} типом поля, которое необходимо настроить (не включайте здесь звездочки!) И {{FIELD_NAME }} с именем поля. Функция должна принимать один аргумент - массив параметров. Для обзора доступных параметров, пожалуйста, проверьте исходный код плагина. Неподдерживаемая функциональность. Хотя плагин пытается поддерживать как можно больше функций из исходной контактной формы 7 (в сочетании с добавлением новых!), Не все поддерживается и может поддерживаться. В частности, есть две вещи, которые явно не поддерживаются: параметр размера во всех полях ввода (элементы формы Bootstrap масштабируются автоматически, поэтому нам не нужен нестандартный размер для них) параметр label_first для флажков и радиополей (Bootstrap изначально поддерживает только флажки и переключатели, после которых отображается метка) Если вы обнаружите любую другую функцию контактной формы 7, кроме двух вышеупомянутых, которая не поддерживается Bootstrap для контактной формы 7, вы можете поднять вопрос или отправить запрос в службу поддержки.

Автор: Felix Arntz

Версия: 1.4.8

Последнее обновление: 2018-05-24 1:31pm GMT