Как сделать голосование в html

Создание формы голосования или опроса для привлечения посетителей на свой сайт

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

Люди довольно часто принимают участие в различных опросах. При этом совершенно неважно платные они или бесплатные. Если читателя заинтересовала тема голосования, то он обязательно поучаствует в нем, так как ему будет интересен конечный результат, который в некоторых случаях оказывается совершенно неожиданным! Как правило, опросы состоят из одного хорошо сформулированного вопроса и нескольких вариантов ответа. А после того, как голос пользователя будет засчитан, выводится средний рейтинг каждого варианта. Таким образом, лидер голосования будет виден сразу.

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

Наибольшую активность в различных голосованиях проявляют женщины, поэтому блоги и сайты на тему кулинарии, моды, красоты, психологии, рукоделия, то есть всего, что интересно прекрасной половине человечества, просто обязаны иметь подобные опросы. Это значительно повысит интерес к ресурсу.

Читайте также: Эффективное проектирование веб-форм: структура, поля ввода, метки и действия

В наше время нет необходимости ломать голову над тем, как создать форму голосования. Достаточно пройти несложную процедуру регистрации на сайте FormDesigner.ru, после чего всего несколько кликов будут отделять вас от удобной формы опроса для вашей площадки.

Для начала, в личном кабинете на главной странице, выбираем нужную форму, кликнув на кнопку «Создать форму»:

В нашем случае — выбрать из списка строку «Форма голосования«:

Далее введите название формы и нажмите кнопку «Создать»:

Далее можно увидеть семь разделов, в первом из которых настраиваются основные параметры формы голосования. В пункте «Основные параметры» вы можете ввести название формы, описание формы, настроить действие при успешном заполнении формы и включить онлайн валидацию формы:

Чтобы пользователь сразу смог увидеть результаты голосования, необходимо в «Действии при успешном заполнении формы», выбрать из списка предложенных действий — показывать результаты формы.

В пункте «Защита» во вкладке «Настройки», вы можете настроить защиту формы, выбрав математическую или невидимую капчу в «Анти-спам защита», и настроить защиту от повторного заполнения формы, чтобы защитить форму голосования от накруток:

А также можно включить социальный замок. Т.е. пользователю формы, чтобы пройти голосование или опрос, необходимо сначала пройти авторизацию в одном из предложенных сервисов:

Во вкладке «Элементы» изначально будет предложен пример формы для голосования. Но вы можете создавать свои опросы, добавляя чекбоксы (для множественного выбора), либо переключатели (для единичного выбора), а также отредактировать их, нажав на значок с карандашом.

Не забываем все сохранить и переходим к получению кода, который и будет добавлен на сайт. Помимо этого, можно использовать его для продвижения ресурса в социальных сетях либо добавить к почтовой рассылке. Во вкладке «Получить код» выберите подходящий код для вставки на свой сайт:

При этом все ответы будут сохранены в системе, а адреса проголосовавших пользователей без труда экспортируются из системы, что поможет в создании базы данных. Зайдите во вкладку «Статистику», по умолчанию откроется «Таблица», где показан каждый голос из формы:

Кроме этого, вы в любой момент времени можете посмотреть суммарный рейтинг любого вопроса в вашем голосовании или опросе, открыв пункт «Гистограмма» во вкладке «Статистика»:

Также, вы можете во вкладке «Статистика», посмотреть результаты голосования в виде «Диаграммы»:

Во вкладке «Тема оформления», вы можете выбрать тему оформления из предложенных тем оформления или, скопировав любую тему, отредактировать её по своему усмотрению. Нажмите кнопку «Выбрать тему»:

Во вкладке «Модули», вы можете настроить интеграцию с различными почтовыми сервисами, CRM системами, Telegram и др.

Во вкладке «Логика», вы можете настроить набор уникальных правил, которые будут определять действия пользователя при выборе заданного элемента.

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

Читайте также: Подробная инструкция по созданию калькулятора для сайта

Помимо всех описанных достоинств опросов и голосований, они ко всему прочему делают сайты и блоги более живыми. Помните, что без живой аудитории ресурс развиваться не будет! Зная, а главное, учитывая мнение читателей, вы сможете сделать свою площадку более популярной и посещаемой!

• ��Halloween распродажа. Скидка 60%
• Импорт форм из Marquiz в FormDesigner
• Импорт форм из 123FormBuilder в FormDesigner
• Импорт форм из JotForm в FormDesigner

Создание скрипта голосования для сайта на Ajax

Сегодня рассмотрим скрипт голосования на сайте, используя Ajax для записи результатов в базу данных через обработчик.

1. index.html — Наша html-разметка блока с голосованием
2. style.css — стили, для внешнего вида и фиксированного позиционирования
3. script.js — наша js скрипты и ajax запрос
4. obrab.php — обработчик, получает результат голосование и записывает его в базу данных

Разметка HTML и стили

Здесь мы просто создаём нашу форму и подключаем нужные нам скрипты

  Голосование на ajax       

Создали общию разметку, подключили стили и библиотеки jquery и jquery.easing — для красивого эффекта появления и изчезновения нашей формы.

#widjetmain < background-color: #fff; width: 500px; height: 400px; position: fixed; top: -450px; left: 50%; margin-left: -250px; border-radius: 0 0 10px 10px; box-shadow: 0px 0px 6px 0px #806F6F; z-index: 999; >#widjetmainhead < font-size: 32px; color: #525A5B; text-align: center; padding: 10px 0; background: linear-gradient(to top, #F1F3E8, #F2F9F8); font-family: Georgia; >#widjetmainimg < margin-top: 10px; >#widjetmainimg img < display: block; float:left; margin-left: 32px; width: 120px; >#widjetmainimg < margin-top: 10px; >#wclose

В стилях ничего сложного, главное прошу заметить, что изначально формы голосования не будет видно (т.к. поднято на -450px вверх), в дальнейшем мы через jquery будем опускать её.

Script.js — js скрипты и ajax запрос

$(document).ready(function() < // Функция для получения кук function get_cookie(cookie_name)< var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) return (unescape(results[2])); else return null; >// Получаем наши куки голосания x = get_cookie("Golos"); // Если куки не существует, то пояляется форма if (x != "Yes")< setTimeout(function () < $('#widjetmain').stop().animate(< top: "0px" >,'slow','easeOutQuint'); >, 1000); > >); //ready end // Закрытие формы, при клике на "Закрыть" $('#wclose').click(function()< $('#widjetmain').stop().animate(< top: "-500px" >,'slow','easeOutQuint'); document.cookie = "Golos=Yes; expires=01/05/2015 00:00:00"; >); // При нажатии на проголосовать (ajax, закрытие, запись куки) $('#widbtn').click(function()< $('#widbtn').remove(); checked = $("input:radio:checked").val(); $.ajax(< type: 'POST', url: 'obr.php', data: (< 'radio': checked >), success: function() < document.cookie = "Golos=Yes; expires=01/05/2015 00:00:00"; >>); $('#widgetsps').html('Спасибо за ваш голос'); setTimeout(function () < $('#widjetmain').stop().animate(< top: "-300px" >,'slow','easeOutQuint'); >, 1000); >);

Функционал такой: Пользователь заходит на сайт, выскакивает форма, он голосует, затем выполняется ajax-запрос, записывается кука и форма пропадает.

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

Описание: (по строчкам)

• 4 — функция для получения кук, для дальнейшей проверки
• 12 — получаем куку и записываем её в переменную
• 15 — здесь идёт проверка, если кука не существует, то появляется форма, если нет — форма не появится
• 25 — при клике на кнопку закрыть, форма изчезает и записывается cookie (для того, чтобы больше не появлялось голосование)
• 33 — выполняется скрипт при кнопке «отправить».
• 34 — удаляем кнопку
• 35 — получаем значение из голосования при выборе, у , значение value (1, 2 или 3) и записываем в переменную
• 42 — при успешном ajax-запросе записываем cookie.
• 46 — вставляем текст вместо кнопки.
• 47 — через 1 секунду после нажатия, появляется текст и форма изчезает

Обработчик формы obrab.php и база данных

В обработчике мы получаем результаты голосования и записываем результат в базу данных.

Первые четыре переменные служат для подключения к базе данных. Потом идёт проверка на POST, записываем результат в переменную val, подключаемся к базе и выполняем запрос по одному полю (с результатом) и закрываем соединение.

Необходимо также создать базу данных, структура простая:

• id — идендификатор голосования, ставим «AUTO_INCREMENT»
• value — результат голосования (1,2,3)
• date — текущая дата в формате TIMESTHAMP

Вот так и создаётся самая простая форма для голосования на ajax.

Как создать опрос на сайте: 3 бесплатных сервиса в помощь

Как вы знаете, для построения успешного интернет-бизнеса нужно постоянно держать руку на пульсе путем получения обратной связи от пользователей. Касается ли это полезности нового продукта, удобства работы с сайтом или скорости ответа службы поддержки, всегда нужно знать мнение ваших клиентов. Бизнес в интернете тем и хорош, что можно легко собрать подобные данные. Например, через специальные опросы.

Однако, когда дело касается технической части, нередко возникают вопросы типа: «Как создать опрос на сайте?» или «Как сделать опрос с такими-то параметрами и детальной статистикой?». Конечно, для создания хорошо проработанного опроса на сайте нужно обладать определенными навыками.

Но что делать если вы не сильны в технологиях веба, но хотите знать мнение ваших подписчиков и пользователей на тот или иной счет? Ну что ж, в данной статье мы разберем 3 бесплатных онлайн-сервиса, с помощью которых в несколько кликов можно создать опрос на сайте.

Более того, ссылки на подобные опросы можно рассылать по своей базе подписчиков. Я постарался выбрать бесплатные и наиболее удобные онлайн-сервисы по генерации опросов. Если вы готовы, давайте приступать к их изучению.

1. Survey Monkey — очень хороший условно-бесплатный сервис по созданию опросов. Имеет довольно широкий функционал даже в бесплатной версии: защита от накруток, подробная статистика, гибкая настройка. В платной версии можно убрать логотип компании с окна опроса и более гибко настраивать параметры формы.

После перехода по ссылке первым делом нужно зарегистрироваться. Это можно сделать указав свои личные данные либо войти в сервис через аккаунты facebook/google. При выборе второго варианта достаточно подтвердить разрешение сервису на доступ к вашим личным данным.

Еще одним несомненным плюсом данного сервиса является наличие специального приложения для смартфонов на Android и iOS, с помощью которого можно прямо с телефона получать данные ваших опросов. После успешной регистрации необходимо нажать на кнопку «Создать опрос».

Далее, необходимо придумать заголовок для опроса. Я напишу «Оценка удобства работы с сайтом». Так как у меня будет простой опрос, я с левого радела перетаскиваю на правый блок «С множественными вариантами ответа».

Дальше я ввожу вопрос с ответами, а в самом низу включаю опцию «Добавить вариант ответа ‘Другое’ или поле комментария». Таким образом, участники опроса могут не выбирать один из вариантов ответа, а написать свой. Дальше нажимаем на кнопку «Сохранить».

Следующим шагом мы нажимаем на кнопку «Далее». На следующем этапе можно поработать с некоторыми параметрами и выбрать вариант размещения. В нашем случае это «Веб-сайт».

Дальше мы можем выбрать вариант с размещением опроса на странице сайта либо во всплывающем окне. После выбора варианта встраивания на странице нам нужно указать размеры окна. Я задаю 500х430 пикселей и нажимаю далее.

На следующем этапе можно настроить еще некоторые параметры опроса, мы нажимаем «Далее».

И наконец, сервис генерирует для нас код встраивания, который нужно вставить в том месте сайта, где должен быть опросник. Мы его копируем и вставляем в html страницу.

Для проверки результата загружаем веб-страницу и видим появление окна с вопросом. Получилось довольно хорошо.

2. Poll Service — следующий очень простой и бесплатный сервис для создания опросов. Здесь регистрация необязательна, но желательна. На главной странице мы нажимаем на кнопку «Создать опрос» и указываем вопрос с вариантами ответа.

Также есть возможность добавить свободный вариант ответа, а в пунктах «Настройки» и «Защита от накруток» мы можем задать дополнительные параметры.

Следующим шагом нажимаем «Готово» и получаем код для встраивания. Мы его копируем и размещаем в необходимом месте веб-страницы.

Для проверки обновляем веб-страницу и видим появление опроса созданного с помощью этого сервиса. Если мы ответим на вопрос нам отобразят статистику по опросу.

3. Survio — последний по очереди сервис по созданию опросов в нашем списке. После перехода по ссылке следует зарегистрироваться указав личные данные в соответствующей форме. Далее нажимаем на кнопку «Создайте анкету» и выбираем вариант «Новый опрос».

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

Далее, как и в предыдущих примерах мы задаем вопрос с вариантами ответа и нажимаем на «Завершить анкету».

Следующим шагом при выборе варианта размещения мы нажимаем на ссылку «Опрос на сайте» в блоке «Сайт». Наконец, копируем код и вставляем в нужном месте html страницы.

В этом и предыдущих сервисах, при желании разместить опрос во всплывающем окне мы выбираем данный вариант и вставляем код в нужном месте. Далее, давайте обновим веб-страницу. Отлично, опрос появился в нужном месте:

Итак, с помощью этих 3 онлайн-сервисов вы можете без проблем создавать опросы на вашем сайте. Остается лишь выбрать более удобный и тот, который вам больше нравится.

А на этом у меня все. Надеюсь, данный материал оказался для вас полезным. Если это так, сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу.

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Как быстро создать опрос на вашем сайте с помощью форм Google?

Рано или поздно, практически все, у кого есть собственный сайт, сталкиваются с необходимостью создания форм обратной связи для сбора данных (проведения опросов) с посетителей сайта.

Это может быть форма в разделе контакты, через которую посетители сайта будут отправлять вам интересующие их вопросы, может быть форма сбора заявок от клиентов (например, заявки на обратный звонок или заявки на покупку товара), а может быть форма для проведения опроса или голосования по интересующей вас теме.

Есть несколько подходов в создании подобных форм:

• Формы можно сделать, используя теги HTML и завязать нажатие кнопки «Отправить» с отправкой введенных данных вам на email

• Можно сделать связку PHP+MySQL (или любой другой язык программирования и базу данных) и все введенные данные сохранять в базу данных для дальнейшей работы.

• Если ваш сайт сделан с использованием какой-нибудь популярной CMS (например, Joomla, Drupal или WordPress), то вы можете поискать в сети плагины, модули и компоненты, которые достаточно просто позволяют создавать формы

• А можно для создания форм обратной связи использовать бесплатные инструменты всем известного Google.Docs

И в этой статье я хотел бы показать как с помощью Google.Docs вы можете легко и быстро создавать всевозможные формы опроса для ваших сайтов.

Первое что вам необходимо сделать, это войти в ваш почтовый ящик в почтовом сервисе Gmail (в ваш аккаунт в сервисе google): https://accounts.google.com/

Далее, в верхнем вертикальном меню выберите пункт Диск.

На открывшейся странице в левом вертикальном меню наживаем кнопку «Создать» и из выпадающего списка выбираем пункт «Форма»

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

В первом же окне редактор форм от google нас запрашивает название нашей будущей формы и предлагает выбрать тему оформления из уже существующих тем.

После того как название введено и выбор темы оформления сделан, жмем кнопку «Ок», и мы попадаем на страницу редактирования нашей формы.

Обо всех возможностях и настройках редактора форм от Google я в этой статье рассказывать не буду, т.к. большинство вещей познаются «методом тыка», плюс ко всему, есть не самая плохая справка от Google: support.google.com/drive/bin/topic.py?hl=ru&topic=1360904&parent=2811744&ctx=topic. Здесь же хочу остановиться лишь на тех моментах, которые нужно знать, чтобы прямо сейчас создать свою первую форму.

Итак, перед вами интерфейс редактора форм от Google:

Сверху редактора есть небольшое горизонтальное меню, отвечающее за основные настройки формы. В нем вы можете сменить тему оформления, изменить настройки сохранения вводимых данных (сохранять в новую таблицу Google.Docs или в новую вкладку существующей таблицы), а также открыть созданную форму для просмотра, нажав на кнопку «Открыть форму»

Ремарка: Обязательно задайте настройки сохранения, нажав на кнопку «Сохранить ответы». Если вы выберите в настройках сохранения «Новая таблица», то Google автоматически создаст для вас новую таблицу, название которой будет совпадать с именем созданной вами формы и припиской (Ответы)

Чуть ниже находятся настройки видимости вашей формы. С помощью данных настроек вы можете разрешить просмотр формы для всех (снять все галочки) или наоборот сделать доступной форму только для пользователей данного домена и для её заполнения нужно будет пройти авторизацию.

С настройками видимости будьте внимательней. Хотя из всех настроек всего две галочки, но если вы в них ошибетесь, то все ваш опрос может провалиться, люди просто не получат доступ к форме.

Далее, находятся кнопки редактирования элемента добавленного в форму. Вы в любой момент можете изменить подпись к элементу формы, подсказку (пояснение), изменить тип элементе (Google предлагает нам на выбор 7 различных элементов, от простого тактового поля ввода данных, до целого двумерного массива элементов radiobutton), любой элемент можно сделать обязательным для заполнения и т.д.

В самом низу страницы с редактором находится блок «Изменение подтверждения». В нем вы можете разрешить повторно заполнять форму, сделать видимой ссылку на результаты проводимого опроса для всех желающих, разрешать респондентам изменять свои ответы после заполнения и изменить текст подтверждения, который будет выводиться всем респондентам заполнившим форму опроса.

Возможность изменения текста выводимого после заполнения формы, даст вам возможность не только более изыскано поблагодарить респондента прошедшего опрос, но и, например, дать ему ссылку на скачивания какого-нибудь подарка, в качестве вознаграждения за проделанный труд.

После того как все необходимые поля формы добавлены, в верхнем меню нажмите на кнопку «Открыть форму» и вы увидите свое детище со всеми элементами и полями ввода:

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

Встраивание в сайт элементарно. Вам нужно просто в верхнем меню редактора формы выбрать пункт «Файл->Встроить в веб-страницу…» и система сгенерит вам iframe для вставки в ваш сайт, блог и т.д.

Вот и все, наша новая форма опроса посетителей сайта готова!

Все данные заполняемые респондентами будут доступны для вас в таблицах Google.

Помимо этого, вы в любой момент сможете посмотреть общую статистику по динамике заполнения полей вашей новой формы в разделе верхнего горизонтального меню «Ответы->Сводка ответов»:

Как видите, подобный инструмент достаточно гибок в настройках и позволит вам за считанные минуты создать и провести опрос посетителей вашего сайта или же любой другой группы респондентов.

При этом вам не нужно самому верстать HTML-форму, не нужно организовывать взаимодействие с БД, не нужно заниматься поиском подходящих к используемой вами CMS плагинов, модулей и компонентов. А также не нужно кодить интерфейсы отображения статистики с отображением результатов опроса.

Плюс ко всему, если вы на подобную форму опроса кинете большой трафик, то с большой вероятностью Google сервера это выдержат!

Да и все введенные опрашиваемыми респондентами данные будут всегда доступны для вас в вашем аккаунте Google.

• google docs
• google drive
• google forms
• создание форм
• форма опроса