Посмотрите, как смотрится форма обратной связи для сайта WordPress, созданная на основе возможностей плагина Fast Secure Contact Form. Здесь вы найдете подробное описание каждого поля и сможете в дальнейшем ее совершенствовать, меняя эти данные.
- Готовая форма обратной связи для сайта
- Типы полей
- Логин (Name)
- Выберите тему сообщения (Subject)
- Сообщение (Message)
- Выберите получателя сообщения
- Какую консультацию Вы хотите получить
- Выберите дату консультации и время консультации
- Пароль
- Оформить подписку на рассылку
- Приложение 1 и 2
- Согласен на хранение и обработку персональных данных
- Капча
Готовая форма обратной связи для сайта
Имейте ввиду, что форма обратной связи для сайта в рабочем виде Preview Form отличается от той, что здесь представлена. При добавлении формы на сайт дополнительно в автоматическом режиме применяются настройки CSS сайта. При желании их можно отключить и форма обратной связи для сайта будет иметь уникальный вид, но может не вписаться в общий дизайн сайта.
Типы полей
Настоящая форма обратной связи для сайта содержит все возможные поля:
- текст
- область текста
- сheckbox field
- checkbox-multiple
- Select
- поле выбора
- select-multiple
- Attachment
- date
- time
- URL
- Hidden field
- Password
Описание полей содержится в статье “Продолжаем создание формы обратной связи”. Свойства полей описаны в публикации “Настройка wordpress форма обратной связи плагин”. В публикации “Контактная форма обратной связи wordpress” было рассмотрено, как усовершенствовать внешний вид формы. В начать установку плагина следовало со статьи “Fast Secure Contact Form – как сделать форму обратной связи“.
Логин (Name)
В форме поля было выбрано “Имя”, оставлен тип поля по умолчанию “текстовое поле”.
В поле включен чекбокс 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.
Если у вас остались вопросы или есть замечания, дополнения по усовершенствованию формы – пишите в комментариях. Разберемся вместе.