fbpx
Перейти к содержимому

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

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

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

один
два
три

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

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

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

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

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

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

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

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

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

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

Больше статей:   Фильтры материалов на сайте uCoz

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

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

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

  • Нажать кнопку «Сохранить»
Больше статей:   Особенности индексирование сайта uCoz

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

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

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

Больше статей:   Скрипт сравнения даты для сайтов uCoz

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

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

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

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

Добавить комментарий для Екатерина Отменить ответ

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