Готовая форма обратной связи для сайта | ДОМ НАШЕЙ МЕЧТЫ

отношения семья дети красота здоровье питание рецепты дом дача выходные отпуск, журнал для женщин, путешествия, здоровый образ жизни

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


Агент по туризму и страхованию. Главный редактор сайта.

Посмотрите, как смотрится форма обратной связи для сайта 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.

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(0 голосов, в среднем: 0 из 5)

Похожие статьи из этой рубрики: