Поэтапный опросник на JavaScript
Имея такой код я хочу сделать логику опросника подобную этой: https://nasty6.typeform.com/to/BgJEd2 , то есть чтобы при вводе в поле какой-либо информации и нажатии на Enter происходил переход на другой input, а неактивные поля становились затемненными как в примере. У кого-то есть идеи как это реализовать или же где можно посмотреть? Заранее спасибо огромное Вам.
Ваше имя? Сколько Вам? Какой стаж? Сильные стороны?
Отслеживать
задан 4 янв 2019 в 19:25
47 6 6 бронзовых знаков
я понимаю, что этот вопрос был задан давно, но хотел уточнить, у Вас случайно исходный код не сохранился? А то мне дали задание реализовать опросник mrqz.me/5bba69f9255a060044653c65 — пример это. Заранее спасибо
Как создать опрос для сайта: пошаговая инструкция
Часто, практически всегда, возникает необходимость повышать конверсию и увеличивать продажи. Есть масса способов добиться этого, но одним из основных маркетологи выделяют именно опросы, которые на сегодняшний день являются одними из самых эффективных и лучших источников для привлечения клиентов.
Как сделать опрос своими руками, способы создания
Создать опрос можно несколькими способами:
Самостоятельное создание опроса с помощью программирования (JavaScript, PHP, HTML, CSS). Данный способ является самым сложным, так как требует высоких знаний программирования и немалое количество времени. Данный вариант подойдет в основном для программистов.
Готовые скрипты опросов. Данный вариант легче первого, но в любом случае вам необходимо будет настраивать и редактировать опрос под себя и как правило заниматься доработкой. По сути разница между готовым скриптом и самостоятельной разработкой лишь в том, что вам не нужно будет создавать все с нуля. Данный способ подойдет программистам или продвинутым пользователям.
Плагины опросов. Один из самых простых вариантов, но к сожалению он подойдет не для всех, так как основном плагины существуют только для сайтов на WordPress и Joomla и они мало развиты в плане функционала, а доработать его нельзя. Плагины опросов подойдут для владельцев сайтов на WordPress и Joomla.
Визуальный конструктор опросов. Сейчас создание опросов с помощью конструктора является самым простым и качественным вариантом. Конструктор не требует знаний программирования, в нем присутствует весь необходимый функционал и на создание опроса уходят буквально минуты. Это вариант подходит абсолютно всем и именно его мы и рассмотрим.
В качестве примера разработаем опрос на тематику «Оценка мероприятия» в русскоязычном конструкторе WebAsk.
Создание опроса в конструкторе
1) Первым шагом необходимо пройти регистрацию в конструкторе. Регистрация отнимет у вас не более 10 секунд времени, все что вам необходимо это ввести email и желаемый пароль, либо авторизоваться через соцсети.
2) После регистрации вам будет предложено выбрать либо готовый шаблон опроса, либо создать его с нуля, мы выберем «Создать с нуля».
3) Теперь, когда мы сделали выбор нас перенесет непосредственно в сам конструктор, где будет предложено добавить наш первый элемент простым кликом на значок «+»
Кликнув на этот значок мы увидим множество представленных к выбору элементов таких как:
- Экран приветствия
- Экран благодарности
- Да или Нет
- Выбор одного
- Выбор нескольких
- Выбор медиа
- Выпадающий список
- Слайдер
- Оценка
- Шкала
- Поле ввода
- Эл. Почта
- Номер телефона
- Дата и время
- Матрица
- Сообщение
- Загрузка файлов
- HTML код
Каждый элемент уникален и имеет свои собственные настройки, что позволит сделать опрос по-настоящему уникальным.
4) Добавим все необходимые нам элементы, зададим им заголовки, описание и варианты выбора. В общей сложности, как рекомендуют маркетологи для наибольшей конверсии опроса, у нас должно получится до 10 вопросов, поэтому добавим следующие пункты:
- Экран приветствия с заголовком и описанием опроса;
- Выбор пола: мужской или женский;
- Вопрос «Откуда вы узнали о мероприятии» с вариантами ответов;
- «По какой причине вы посетили мероприятие?»;
- «Как долго вы были на мероприятии?»;
- Оценка с вопросом «Насколько вы довольны организацией мероприятия?»;
- Свободное поле с вопросом «Уточните, пожалуйста, что вам понравилось и запомнилось больше всего?»;
- Аналогичный вопрос «Уточните, пожалуйста, что вам не понравилось?»;
- И конечно же кнопка отправки, чтобы мы получили ответ.
5) После конструирования опроса можно перейти к настройки его дизайна, для этого перейдем во вкладку «Дизайн» и там мы можем либо выбрать шаблон уже готовой темы, либо создать самостоятельно с выбором фона, цветовых схем, шрифтов и прочего.
Благодаря этому вы можете сделать опрос не только привлекательным, но и подходящим по дизайну вашего бренда.
6) После всех манипуляций с конструктором и дизайном можно перейти к его настройкам во вкладке «Настройки». Здесь вы сможете настроить интерфейс и доступность опроса.
В интерфейсе вы можете выбрать язык опроса, а также активировать или деактивировать:
- Прогрессбар
- Нумерацию вопросов
- Вопросы по одному
- Логотип
В доступности вы можете:
- Закрыть опрос
- Задать лимит по времени
- Задать лимит по количеству ответов
- Добавить свое сообщение на странице закрытого опроса
- Разрешить более одного заполнения
- Разрешить индексацию поисковыми роботами
Также, при необходимости вы можете добавить собственный html код в или в .
7) После этого мы можем сохранить наш опрос кликнув на кнопку «Опубликовать» и посмотреть, как он будет выглядеть на различных устройствах, для этого необходимо перейти во вкладку «Просмотр».
Все опросы разработанные в конструкторе адаптивны на всех устройствах и нет необходимости в какой-либо доработке.
8) Теперь, когда мы все сделали и настроили можно перейти к публикации готового опроса, для этого откроем вкладку «Публикация». Здесь мы сможем получить прямую ссылку на опрос, добавить к нему скрытые переменные (предназначены для более персонализированных ответов), указать информацию об опросе (заголовок, описание, изображение и иконку), а также сделать репост в соцсети.
Для встраивания опроса на сайт необходимо будет перейти в раздел «Код для сайта», где вы можете получить код как для встраивания на сайт, так и для добавления опроса на отдельной странице.
На этом создание опроса полностью завершено. Вы всегда сможете перейти в конструктор во вкладку «Результаты» где сможете просмотреть отчеты и ответы, поделиться ими в соцсетях или по прямой ссылке или даже скачать в удобном для вас формате.
Опрос это мощный маркетинговый инструмент разработка которого не так давно стала доступна для всех благодаря появлению конструкторов на рынке.
На этом у нас все, используйте опросы и увеличивайте ваши продажи, успехов!
Как сделать опрос на сайте через html?
Мне нужно в конце сайта сделать небольшой опрос, где после голосования выходит статистика результатов.
Искал на просторах сети интернет, а там только с отправкой результата голосования на почту, но мне нужно только статистику на самом сайте показывать.
Желательно что бы после голосования ответ сохранялся, и после обновления не пропадал.
- Вопрос задан более года назад
- 177 просмотров
2 комментария
Простой 2 комментария
Как создать анкету в HTML
wikiHow — это «вики», похожая на Википедию, а это значит, что многие наши статьи написаны в соавторстве несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 11 человек (а).
Эта статья была просмотрена 127 957 раз (а).
Анкеты — отличный способ сбора данных и получения отзывов от посетителей вашего сайта. Вам не нужно использовать шаблон, программное обеспечение или создателей онлайн-опросов, чтобы их получить. Вы можете просто создать его в HTML-коде и стилизовать с помощью CSS, чтобы он соответствовал вашему текущему дизайну веб-сайта. В этой статье будут представлены наиболее распространенные типы вопросов, которые обеспечат вам большую гибкость при разработке анкеты.
Создайте простой HTML-файл в Блокноте. Откройте Блокнот, чтобы создать новую веб-страницу, и напишите следующий код:
Сохраните его как HTML-файл и откройте в своем браузере. На данный момент файл пуст, но вы можете видеть, что его заголовок — Анкета.
Вставьте теги Теги HTML-формы используются для отправки данных на сервер. Все наши вопросы будут заключены в теги
- Для тега формы мы будем использовать 3 основных атрибута:
- Действие — позволяет указать форме, куда перейти после отправки (обычно это имя файла сценария, который будет читать и обрабатывать данные формы, которые были отправлены).
- Имя — обычно рекомендуется давать вашим формам имя, оно используется для уникальной идентификации вашей формы на данной странице.
- Метод — значение должно быть POST. Это сообщает форме, как отправлять данные после их отправки.
- Здесь мы использовали элемент . Он используется для сбора информации о пользователях. Есть несколько типов элементов — текстовое поле, флажок, пароль, радио-кнопка, кнопка отправки, которые будут использоваться далее в этом примере.
- Тег ‘br’ создает разрыв строки на вашей веб-странице, поскольку HTML сам по себе не распознает пробелы.
- Этот код создаст:
- Этот код создаст:
- Этот код создаст:
- Мы закончили использование, добавив теги
- Этот код создаст:
- Мы сделали это, добавив тег
- Этот код создаст:
- Атрибут value вашей кнопки отправки содержит текст кнопки, который будет отображаться.
- Этот код создаст:
Сохраните файл HTML и отобразите в любом браузере. Ваша простая анкета должна быть представлена в следующем виде: