Как сделать регистрацию html. Форма входа и регистрации с помощью HTML5 и CSS3

Создание формы

Для создания опросов, регистрационных форм, форм подписки на новости и др. необходимо зайти в раздел «опросы».

Кликаем на иконку создания нового опроса/регистрационной формы;.

Заполняем следующие поля:

• название;
• тип – «опрос» или «регистрационная форма» (как правило вам нужна «регистрационная форма»);
• время проведения – тот период времени, в течение которого можно ответить на вопросы;
• статус – меняете на «активно» после того, как форма будет готова.
• язык (если форма на английском языке, необходимо выставить язык - "английский")

После этого нажимаете полоску «Добавить блок вопросов».

В появившемся блоке переходим к созданию вопросов. Нажимаем на рыжую полоску «Добавить вопрос». Появляется следующее:

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

Если ответы не заданы и опрашиваемый должен предложить свой вариант, в поле «Возможен ли свободный ответ» выбираем значение «Строка» (в готовом опросе будет выведена строка, куда пользователь сможет вписать ответ) или «Несколько строк» (в готовом опросе будет выведено текстовое поле, куда пользователь сможет вписать ответ).

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

По этой схеме добавляете необходимое количество вопросов и предусматриваете варианты ответов для них. В конце нажимаете «Сохранить». Сохранённая форма отобразится в админке в разделе «Опросы».

Ссылка на форму

Полученную ссылку необходимо скорректировать , чтобы форма открывалась внутри вашего сайта. Для этого вместо https://www.hse.ru/ нужно подставить адрес вашего сайта..hse.ru/expresspolls/poll/148017072.html. Ссылку надо менять не в поле "Ссылка на опрос", а непосредственно там, где вы ее указываете на сайте вашего подразделения или в электронной рассылке. Если вам необходимо разместить форму на английском языке , то в ссылке необходимо подставить адрес английской версии вашего сайта (в адресе должно присутствовать en ).

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

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

Уведомления об ответах/ответные письма о регистрации

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

Если вы сами хотите обратиться к пользователю, то можете это сделать двумя способами:
1. Размещаете текст в поле «Текст благодарности» - он будет выводиться на экране после того, как пользователь зарегистрируется.

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

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

Пример того, как выглядит готовая форма в редакторском интерфейсе (код вопроса проставляется автоматически!):

И так форма выглядит для пользователей.

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

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

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

Для реализации регистрации на сайте потребуется поддержка PHP и MySQL на хостинге. Если хостинг поддерживает только HTML, то, увы, создать скрипт регистрации на PHP у вас не получится. Весь алгоритм авторизации на сайте можно поделить на несколько этапов:

1. Пользователь заходит на сайт, открывает форму авторизации.
2. Если он уже зарегистрирован, то вводит пароль и логин в форме.
3. Скрипт-обработчик проверяет полученные данные:
   • если введенная пара логин/пароль верна, то пользователь авторизуется на сайте;
   • если данные не корректны, то пользователь вновь возвращается на страницу с формой авторизации.
4. Если пользователь не зарегистрирован, то сайт предлагает ему заполнить специальную форму для создания аккаунта.

Собственно говоря, регистрация представляет собой процесс сохранения данных о пользователе в специальном «месте». В качестве места хранения логинов и паролей пользователей сайта могут быть использованы текстовые файлы с расширением.txt и.dat, XML-файл и база данных. Первые два способа уже изжили себя и считаются небезопасными методами хранения данных, так как любой человек может получить к ним доступ прямо из адресной строки браузера.

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

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

Первым делом вам нужно сделать базу данных на своем хостинге через phpMyAdmin. После чего создайте нового пользователя и «привяжите» его к базе данных. К примеру, вы сделали базу с названием «myuserbd», пользователем «myuser» и паролем «myuserpass».

Перейдите в phpMyAdmin, выберите свежесозданную базу данных и выполните следующий запрос к базе (раздел SQL):

CREATE TABLE IF NOT EXISTS `users` (

`id` int(8) NOT NULL auto_increment,

`login` char(32) collate utf8_unicode_ci default NULL,

`pass` char(32) collate utf8_unicode_ci default NULL,

PRIMARY KEY (`id`),

KEY `login` (`login`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

В БД «myuserbd» появится новая таблица с названием «users». В таблице имеется 3 строки: ID (ID регистрируемого пользователя), login (логин пользователя) и pass (пароль пользователя).

Теперь нужно связать базу данных и скрипт регистрации. Создаем файл bd.php, вписываем в него нижеприведенный код и указываем название базы, пароль и логин пользователя.

$db = mysql_connect («myuserbd»,»myuser»,»myuserpass»);

mysql_select_db («mysql»,$db);

Скрипт регистрации пользователей состоит из 4 файлов:

• index.php – главная страница сайта с проверкой информации об авторизации пользователя;
• reg.php – страница с формой регистрации пользователя;
• testreg.php – файл, отвечающий за проверку данных пользователя;
• saveuser.php – сохранение введенных данных в базу.

По желанию вы можете добавить в скрипт свои функции: восстановление забытого пароля, активацию аккаунта через e-mail, защиту от ботов и авторегистраций.

Осталось только с вышеуказанными PHP-файлами, прописать свои данные к БД в файле bd.php и распаковать его на хостинге в корневую папку своего сайта. Как видите, сделать регистрацию на сайте не сложно.

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

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

HTML Code for registration form

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.

registration.html

Registration form

Id:
Name:
Course:
Branch:
Rollno:
Email_Address:
User_Name:
About Us:
Password:

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .

HTML

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

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

#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

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

P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

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

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

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

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

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

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

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

Итак, начнём!

Переходим в Google Документы (Диск) и авторизируемся в нем.

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

В новом окне появится редактор форм.

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

Жмем на кнопку “Готово”.

Переходим ко второму вопросу. Для этого выделяем его кликом мыши и жмем на иконку редактирования.
В качестве примера заполним этот вопрос так: Вопрос - Чем вы увлекаетесь?, Пояснение - Опишите ваши интересы и области, в которых вы себя считаете специалистами, Тип вопроса меняем на - Текст (абзац). Ставим галочку на “Сделать этот вопрос обязательным”.

Жмем на кнопку “Готово”.

Заготовки у нас закончились, поэтому для добавления новых полей нам необходимо в левом верхнем углу нажать на кнопку “Добавить элемент”. В этот раз выберем элемент “Один из списка”.

Заполним этот вопрос так: Вопрос – Ваш пол, Пояснения – оставим пустым, Тип вопроса оставляем - Один из списка, Галочку на “Перейти на страницу ответа” – не ставим. Она вам понадобится, если вы решите создавать многостраничные формы. Опять ставим галочку на “Сделать этот вопрос обязательным”.

Жмем на кнопку “Готово”.

Добавляем новый элемент – “Несколько из списка”. Переписывать свои варианты не буду – просто посмотрите на картинку.

Жмем “Готово”.

Добавляем новый элемент – “Выпадающий список”. Заполняем как на картинке.

Жмем “Готово”. Добавляем новый элемент – “Шкала”. Как и раньше – заполните по примеру на картинке.

Жмем “Готово”. Смотреться будет так:

Добавляем новый элемент – ”Сетка”. Заполняем…

Смотрим..

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

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

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

Не будем расслабляться и продолжим рассматривать возможности Документов Google для создания форм.

Давайте закончим рассмотрение редактора форм, а затем перейдем к работе с документами.

В меню “Добавить элемент” у нас осталось два неописанных пункта – это “Заголовок раздела” и “Разрыв страницы”. Я их обычно использую вместе. Иногда форма получается слишком вытянутой и целесообразно разбить ее на две части. Для этих целей и служит “Разрыв страницы”. А вот “Заголовок раздела” я добавляю после разрыва, чтобы пользователь не забывал, что он заполняет и для чего.

Еще у нас есть меню “Тема”, в котором вы можете выбрать один из предложенных вариантов оформления вашей формы. Есть один нюанс – не все темы корректно отображают русские символы.

Теперь вернемся к меню “Дополнительные действия”, в котором мы не рассмотрели пункт “Изменить подтверждение”.
Здесь вы можете написать свой текст, который пользователь увидит после заполнения формы. Галочка “Опубликовать сводку ответов” покажет ссылку на результаты вашего опроса пользователям. Не рекомендую ее ставить в формах регистрации на онлайн мероприятия, так как личные данные пользователя лучше не светить в Интернете.

Следующее меню “Просмотреть ответы”. Оно содержит всего два пункта: “Сводка” и “Таблица”.

Следующее меню “Отправить по электронной почте” позволяет отправить вашу форму на почту пользователя.

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

Кликните мышкой по документу. Он откроется в новом окне.

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

Не будем рассматривать все пункты меню в этом разделе, а просто разберемся с основными функциями, которые вам понадобятся.

Для редактирования формы регистрации вам необходимо будет в меню “Формы” выбрать пункт “Изменить форму”.

В этом меню галочка на пункте “Принимать ответы” включает/выключает отображение вашей формы. Я обычно ее убираю, когда истекает время, предоставленное пользователям для регистрации на какие-либо мероприятия.

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