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

Посмотрите, как смотрится форма обратной связи для сайта WordPress, созданная на основе возможностей плагина Fast Secure Contact Form. Здесь вы найдете подробное описание каждого поля и сможете в дальнейшем ее совершенствовать, меняя эти данные.

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

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

Типы полей

Настоящая форма обратной связи для сайта содержит все возможные поля:

• текст
• область текста
• сheckbox field
• checkbox-multiple
• Select
• поле выбора
• select-multiple
• Attachment
• date
• time
• email
• URL
• Hidden field
• Password

Описание полей содержится в статье “Продолжаем создание формы обратной связи”. Свойства полей описаны в публикации “Настройка wordpress форма обратной связи плагин”. В публикации “Контактная форма обратной связи wordpress” было рассмотрено, как усовершенствовать внешний вид формы. В начать установку плагина следовало со статьи “Fast Secure Contact Form – как сделать форму обратной связи“.

Логин (Name)

В форме поля было выбрано “Имя”, оставлен тип поля по умолчанию “текстовое поле”.

Email

В поле включен чекбокс Show Details – “Enable double email entry required on the form” и выбран тип поля “email”.

Выберите тему сообщения (Subject)

Тип “поле выбора”. Варианты выбора внесены в Select options, каждый с новой строки.

Сообщение (Message)

Тип поля “область текста”. Default – текст, который вы видите внутри поля, при создании сообщения текст пропадет. Включен чекбокс Default as placeholder (если его выключить, то текст не появится).

В вышеуказанных полях включен чекбокс “Обязательное поле”.

Выберите получателя сообщения

и другие поля созданы дополнительно. Тип поля – checkbox-multiple. Как и в предыдущем случае варианты вы бора внесены в Select options. Для того, чтобы они отражались на одной горизонтальной линии включен чекбокс Inline.

Вы видите русские названия, которые были внесены во вкладке Lables: Name – Логин, Повторите Email, Subject – Выберите тему сообщения, Message – Сообщение.

Стандартная форма обратной связи для сайта имеет короткую длину, как в случае с Email или формируется по длине текста, например в поле выбора, select-multiple. Чтобы удлинить поле был добавлен код в Ввод CSS (Show Details): width:99%; max-width:585px;margin-left:10px; border: 2px ridge; Изменен отступ названия плей в Метка CSS: margin-left:20px;

Какую консультацию Вы хотите получить

Названия полей в этом и ниже следующих случаях вписывается в Метка.

Тип поля – select-multiple. Варианты выбора вписаны в Select options. Отступ названия поля в Метка CSS: margin-left:20px;

Выберите дату консультации и время консультации

Типы двух полей data и time соответственно. Для того, чтобы поля расположились на одной линии, во втором поле включен чекбокс Follow previous field.

Чтобы изменить шрифт в названиях полей были использованы параметры HTML before/after field. В первом случае жирный <strong>шрифт</strong>, во втором <em>курсив</em>, в третьем <del><span style=”color: #ff6600;”>перечеркнутый текст красным шрифтом</span></del>.

Сделать рамку поля помогает функция Ввод CSS – border: 2px ridge;

Пароль

Тип поля “пароль”.

Оформить подписку на рассылку

Тип поля “переключатель”, варианты выбора – в Select options, включен чекбокс Inline. Также как и в предыдущем случае сделана рамка Ввод CSS – border: 2px ridge; и отступ названия поля Метка CSS: margin-left:20px;

Приложение 1 и 2

Два поля – тип “вложение”. Благодаря отметке чекбокса Follow previous field, поля расположены на одной линии. Метка CSS: margin-left:20px; – отступ названия поля.

Во вкладке Lables изменено уведомление о размере вложений с английского на русский:

• Acceptable file types: %s. – Допустимые расширения файлов для отправки %s
• Maximum file size: %s. – Допустимые расширения файлов для отправки %s

Согласен на хранение и обработку персональных данных

Тип поля “флажок”. Ввод CSS margin-left:10px; border: 2px ridge; – отступ поля по левом краю и рамка. Метка CSS: margin-left:20px; – отступ названия поля.

Капча

Подключается во вкладке Security – Enable CAPTCHA. Размер картинки установлен по умолчанию.

Большая часть настроек полей сделана во вкладке Field: тип поля, Метка, Show Details.

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

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