Форма входа и регистрации с помощью HTML5 и CSS3. Создаем регистрационную форму одним кликом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот сервис называется federated login , и построен на основе протокола OAuth2 . Это сложный процесс, который включает в себя обмен данными между вашим сервером и Google, но мы оставим всю эту работу PHP-библиотеке от Google , которая будет почти все обрабатывать на стороне сервера.

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

• Не нужно создавать и проверять формы регистрации и авторизации;
• Нет необходимости в функции восстановления забытого пароля;
• Очень упрощенная авторизация/регистрация - вы получите электронную почту человека, имя и фото с помощью одного щелчка мыши;
• Адрес уже проверен Google, так что вам не нужно отправлять сообщение для подтверждения.
• Серьезная безопасность со стороны Google.

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

Установка

Первый шаг заключается в создании нового приложения через Google’s API Console . Следуйте инструкциям для получения дополнительной информации. После завершения процесса, скопируйте полученные ключи в файл setup.php.

Запустите код из schema.sql (вы можете найти его в архиве) в PhpMyAdmin или ему подобном инструменте. Он создаст glogin_users таблицу в базе данных, которая будет использоваться для хранения информации об учетных записях пользователей вашего приложения. После этого, напишите свои данные подключения к базе данных в setup.php.

PHP

Форму входа мы делаем используя Google’s Federated login. Это означает, что посетители вашего веб-сайта переходят по ссылке на страницу Google, где они предоставляют приложению доступ к своему аккаунту, и затем будут перенаправлены обратно. После этого вы получаете token для доступа, который можно использовать для запроса информации о них. Вот упрощенное описание процесса авторизации:

• Когда пользователь нажимает кнопку "Sign in with Google " в нашем демо, они переходят на страницу авторизации Google, где они видят, какие разрешения просит наше приложение.
• После разрешения дать доступ этому приложению, они будут перенаправлены обратно на сайт, при этом специальный параметр code передается в URL. Наше приложение будет использовать этот код, чтобы получить token доступа;
• С помощью token, приложение запрашивает информацию о пользователе, которая сохраняется в базу данных.

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

Наш PHP-код организован следующим образом:

• index.php - это основной файл приложения;
• setup.php - этот файл содержит информацию соединения с базой данных и ключи полученные из Google’s API Console;
• Папка library - содержит библиотеку Idiorm, PHP библиотеки Google, и класс для включения метки относительного времени.

Давайте взглянем на код в начале index.php:

require "setup.php" ; // Create a new Google API client
$client = new apiClient() ;
//$client->setApplicationName("Tutorialzine"); // Configure it
$client -> setClientId ($client_id ) ;
$client -> setClientSecret ($client_secret ) ;
$client -> setDeveloperKey ($api_key ) ;
$client -> setRedirectUri ($redirect_url ) ;
$client -> setApprovalPrompt (false ) ;
$oauth2 = new apiOauth2Service($client ) ; // The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset ($_GET [ "code" ] ) ) { // This method will obtain the actuall access token from Google,
// so we can request user info
$client -> authenticate () ; // Get the user data
$info = $oauth2 -> userinfo -> get () ; // Find this person in the database
$person = ORM:: for_table ("glogin_users" ) -> where ("email" , $info [ "email" ] ) -> find_one () ; if (! $person ) {
// No such person was found. Register! $person = ORM::for_table("glogin_users")->create(); // Set the properties that are to be inserted in the db
$person -> email = $info [ "email" ] ;
$person -> name = $info [ "name" ] ;

if (isset ($info [ "picture" ] ) ) {
// If the user has set a public google account photo
$person -> photo = $info [ "picture" ] ;
}
else {
// otherwise use the default
$person -> photo = "assets/img/default_avatar.jpg" ;
} // insert the record to the database
$person -> save () ;
} // Save the user id to the session
$_SESSION [ "user_id" ] = $person -> id () ; // Redirect to the base demo URL
header ("Location: $redirect_url " ) ;
exit ;
} // Handle logout
if (isset ($_GET [ "logout" ] ) ) {
unset ($_SESSION [ "user_id" ] ) ;
} $person = null ;
if (isset ($_SESSION [ "user_id" ] ) ) {
// Fetch the person from the database
$person = ORM:: for_table ("glogin_users" ) -> find_one ($_SESSION [ "user_id" ] ) ;
}

Что происходит здесь, мы проверяем наличие code в $ _GET параметрах. Как я уже упоминал выше, этот параметр установливается Google, когда пользователь перенаправляется обратно после того как разрешит доступ приложению. Затем мы запрашиваем информацию о пользователе и записываем её в базу данных. Идентификатор пользователя (значение идентификатора в базе данных) записывается в сессию. Он сохраняется между запросами и используется в качестве флага, о том что пользователь прошел идентификацию

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

Ближе к концу, мы определяем переменную $person . Она содержит объект, который возвращается библиотекой Idiorm, со свойствами для каждого столбца таблицы glogin_users . Вы можете видеть, как этот объект используется в следующем разделе.

HTML

HTML-код для нашего примера находится в нижней части index.php. Поэтому у нас есть доступ к объекту $person , который пригодиться при выводе на экран имени и фотографии пользователя. Сама страница является стандартным документом HTML5:

Google Powered Login Form




Login Form