Главная Новости

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


Опубликовано: 06.09.2018

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

Часть 2. Форма обратной связи для сайта: Ajax - отправка без перезагрузки

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


Часть 1. Форма обратной связи для сайта: PHP-обработчик

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


Готовая форма отправки письма без перезагрузки страницы PHP AJAX

Типы полей

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

текст область текста с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.

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

rss