Переключатель radio со скрытыми полями на сайтах uCoz

Переключатель radio со скрытыми полями на сайтах uCozИногда в Форме обратной связи нужно добавить разные вопросы (поля) в зависимости от уже данного ответа. Эти самые разные вопросы в Форме лучше сделать скрытыми. Предлагаю вам свой простой скрипт как лучше это сделать именно на сайтах uCoz.

Выглядеть это будет так:
Переключатель radio

один
два
три

Подробнее о самом скрипте Вы можете прочитать в Уроках Javascript. Там я описывала логику создания и работы самого скрипта.
В этой статье я буду подробнее описывать как применить скрипт на сайтах uCoz. Как я ни старалась создать этот скрипт наиболее доступным и понятным для новичков, знания HTML все же необходимы.

Создание переключателя radio со скрытыми полями на сайтах uCoz

Прежде всего нужно продумать логику самого переключателя. Я буду показывать все на примере.

Создать поля в Форме обратной связи

Подробно как создавать поля в форме обратной связи на сайтах uCoz вы можете прочитать в статье как создавать поля и пользоваться модулем Почтовые формы .

В форме обратной связи создаем нужные поля.

  • Поле типа radio.
    При создании поля radio заполняем следующим образом:
    Тип поля — radio.
    Название поля — тот текст, который будет видеть пользователь непосредственно перед самим полем. В моем примере: «Плательщик»
    Значения — эта графа появляется, если тип вашего поля checkbox, select или radio. В моем примере будет два значения:
    — юридическое лицо;
    — физическое лицо;
    Обязательное поле — поставьте галочку, если Пользователю поле нужно заполнить обязательно.
    Переключатель radio на uCoz
  • Под этим полем сразу создаем необходимое количество текстовых (или других полей). Показываю на моем примере:
    — Юридическое название компании (согласно уставным документам): ;
    — Код ЕГРПОУ: ;
    — ФИО плательщика: ;
    Всего у меня три отдельных текстовых поля. Эти и поля станут в итоге скрытыми в дальнейшем.
    Переключатель radio на uCoz

Отредактировать поля формы, чтобы сделать их скрытыми

Вот тут Вам и понадобятся знания HTML. Тут нужно быть очень внимательным.

Переходим в шаблон формы обратной связи. Для этого нажимаем иконку
Переключатель radio на uCoz
Моя форма выглядит так:

Форма на uCoz является таблицей. Каждое поле находится внутри тегов <tr> и <td>
В эту таблицу нужно внести следующие изменения:

  • Все поля radio имеют автоматически собственный id, это очень хорошо, их нужно запомнить.
  • В поля, которые будут скрытыми, нужно добавить <div style=»display:none;»> и присвоить каждому индивидуальное id.
    Для каждой строчки это получается так. Я перенесла всю информационную часть во вторую колонку (вторые теги <td>), первые оставила пустыми. И поместила всю информационную часть внутри тега div, которому присвоила id=»text1 и стиль style=»display:none; :

    А в моем примере вся форма выглядит так:

  • Нажать кнопку «Сохранить»

После внесения изменений советую вам скопировать шаблон формы, так как при любом перестраивании шаблона через систему uCoz все ваши индивидуальные настройки исчезнут.

Редактирование скрипта

Прежде всего нужно скопировать код для вызова почтовой формы, у меня это $MFORM_5$, и разместить его на странице где должна быть ваша форма. Далее скопируйте скрипт представленный ниже:

В скрипт внесите нужные изменения, а именно ваши id для тегов input и скрытых полей. После внесения всех изменений вставьте скрипт на страницу прямо под кодом вызова формы.

И все работает. У меня остался только один сайт на uCoz, за которым я практически не слежу. На нем я и разместила пример, что все работает: Открыть пример


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Один комментарий

  1. Скажите, пожалуйста, вы могли бы написать инструкцию о том, как сделать на Юкоз переключатели Предыдущая и Следующая страница?
    Или вы больше о Юкозе не пишите?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *