Всё о форме входа и регистрации WP-Recall – часть 2. Шаблоны, хуки, кастомизация – CODESELLER – продажа цифровых товаров

Описание веток

sozdanie-formy-registratsii-i-avtorizatsii-v-php – В этой ветке находятся исходники функционала, который был реализован в статье Создание формы регистрации и авторизации

Введение. шаблоны:

В первой части мы разобрались с типами форм входа, настройками и произвольными полями. В этой части мы рассмотрим структуру шаблонов, разберем какие хуки и фильтры где работают и применим некоторые из них. Применительно к формам плагина WP-Recall применим и некоторые WordPress хуки – т.к. и по ним часто на форуме возникают вопросы.

Шаблоны форм входа, регистрации и напоминания пароля расположены по пути:ваш-сайт/wp-content/plugins/wp-recall/templates/

Копируем оттуда:form-register.php – форма регистрацииform-sign.php – форма входаform-remember.php – восстановление пароля

в папку:ваш-сайт/wp-content/wp-recall/templates/- и уже оттуда редактируем под себя. Скопировав сюда – при обновлении плагина изменения не затрутся.

Список всех шаблонов WP-Recall можете найти на этой странице

30 бесплатных psd-шаблонов для форм авторизации

Системы регистрации и авторизации необходимы для ограничения доступа пользователей к предназначенным не для всех разделам веб-сайтов, например, спискам сотрудников компаний, платным функциям и т. п. Для размещения на веб-сайте форм авторизации вам потребуется знание основ PHP, одними CSS- и HTML-исходниками PSD-шаблонов здесь не обойтись.

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

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

e

Animated login form

Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully.Made by CheSeptember 3, 2022

Demo Image: Flat UI Login Form
Demo Image: Flat UI Login Form

Animated search box

Animated search box using HTML, CSS and jQuery.

Animating search box

An animating search box made with HTML & CSS.Made by Jarno van RhijnFebruary 5, 2022

Demo Image: CSS Search Box
Demo Image: CSS Search Box

Bouncy search box

HTML, CSS and JavaScript bouncy search box.Made by Guillaume SchlipakDecember 5, 2022

Demo Image: Credit Card Checkout
Demo Image: Credit Card Checkout

Checkout card

Checkout card form with React.js.Made by Jack OliverAugust 20, 2022

Demo Image: Search
Demo Image: Search

Credit card checkout

Clean and simple credit card payment checkout form, with css3, html5, and little bit of jQuery, just to make slightly better UX.Made by Momcilo PopovJuly 18, 2022

Demo Image: Simple Mobile Search Input
Demo Image: Simple Mobile Search Input

Credit card flat design

Pure CSS credit card flat design.Made by Jean OliveiraMay 18, 2022

Demo image: Untitled Form

About a code

Untitled form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Demo Image: Material Design Login Form
Demo Image: Material Design Login Form

Credit card payment

Non functional UI credit cards payment. Coded for practice raw JS for DOM manipulation.Made by Shehab EltawelMay 5, 2022

Demo Image: Search Input Context Animation
Demo Image: Search Input Context Animation

Credit card payment form

Credit card payment form with HTML, CSS and JavaScript.Made by Jade PreisJune 21, 2022

Demo Image: Sign Up Form UI
Demo Image: Sign Up Form UI

Credit card ui

Credit card UI with HTML and CSS.Made by Star St.GermainOctober 23, 2022

Demo Image: Search Transformation
Demo Image: Search Transformation

Css newsletter with animated floating input labels

Move placeholder above the input on focus.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Css search box

It searches things, probably something similar been done before.Made by Jamie CoulterJanuary 12, 2022

Demo Image: Bouncy Search Box
Demo Image: Bouncy Search Box

Emoji form validation

Emoji form validation in pure CSS.Made by Marco BiedermannJune 6, 2022

Demo Image: Credit Card Flat Design
Demo Image: Credit Card Flat Design

Fancy forms

Material design style form elements.Made by AdamFebruary 4, 2022

Demo Image: Single Input 3D Form
Demo Image: Single Input 3D Form

Flat login form

Flat login form with HTML, CSS and JavaScript.Made by Andy TranJune 30, 2022

Demo Image: Sign Up Form UI
Demo Image: Sign Up Form UI

Flat ui login form

HTML, CSS and JavaScript flat UI login form.Made by Brad BodineJanuary 14, 2022

Demo Image: Step By Step Register Form
Demo Image: Step By Step Register Form

Flexbox form

A form made with flexbox.

Form sign up ui

Form sign up UI with HTML, CSS and JavaScript.Made by Eddie SolarApril 9, 2022

Demo Image: Login & Sign Up Form Concept
Demo Image: Login & Sign Up Form Concept

Fullscreen search

This search input should work with any position/layout type, including normal pages with scroll. Just don’t override .s–cloned styles for .search and everything will be okay. Requires specific styles for containers (check html body and .scroll-cont styles) and .search-overlay element to be placed in the root.Made by Nikolay TalanovOctober 5, 2022

Demo Image: Search Bar Animation
Demo Image: Search Bar Animation

Glassmorphic sign in form

A simple, easy sign in / log in form made with pure CSS, based on glassmorphism.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Interactive form

Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation. Navigate between inputs using Tab (Next) & Shift Tab (Prev). Pure CSS. No JS included.Made by Emmanuel PilandeMarch 7, 2022

Demo Image: Step by Step Form Interaction
Demo Image: Step by Step Form Interaction

Interactive sign up form

A concept for an interactive signup form.Made by Riccardo PasianottoMarch 1, 2022

Invision login

Sign in form UI.

Log in / sign up

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, unicons.css

Log in form

Log in form with HTML, CSS and JavaScript.Made by Kamen NedevOctober 2, 2022

Demo Image: Search Input Focus Animation
Demo Image: Search Input Focus Animation

Login & sign up form concept

Sign in & sign up form concept, click on login and sign up to changue and view the effect.Made by Dany SantosMarch 19, 2022

Demo Image: Credit Card Checkout
Demo Image: Credit Card Checkout

Login & sign up form ui

Micro interaction for sign up / sign in form.

Login form

Login form with floating placeholder and light button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Login form – modal

This is a material inspired login modal with 2 panels. A login panel, and a registration panel which is hidden by default. The registration panel can be triggered by clicking the visible tab on the right side. Once clicked, the registration panel will slide in and overlap the login panel.Made by Andy TranJanuary 30, 2022

Demo Image: Sign Up Form
Demo Image: Sign Up Form

Login form ui design

Login form UI design using HTML and Sass and jQuery.

Material design login form

Material design login form with HTML, CSS and JavaScritp.Made by celyesFebruary 5, 2022

Demo Image: Login Form - Modal
Demo Image: Login Form – Modal

Material login form

Interactive material design login form.Made by Andy TranJuly 25, 2022

Demo Image: Flat Login Form
Demo Image: Flat Login Form

Multi step form with progress bar using jquery and css3

Got long forms on your website? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc.Made by Atakan GoktepeMarch 17, 2022

Demo Image: Interactive Form
Demo Image: Interactive Form

Neomorphic form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: ionicons.css

Obnoxious errors

Form errors with obnoxious.css animation.

Overlay signup form

Overlay signup form with HTML, CSS and JavaScript.Made by Chris DeacyDecember 21, 2022

Demo Image: Sign Up
Demo Image: Sign Up

Payment card checkout

Payment card checkout in HTML, CSS and JavaScript.Made by Simone BernabèJuly 8, 2022

Demo image: No Questions Asked Form & Magic Focus

About the code

No questions asked form & magic focus

Demo Image: Emoji Form Validation
Demo GIF: Emoji Form Validation

Pull-out search bar concept

HTML and CSS pull-out search bar conceptMade by Asna FaridFebruary 22, 2022

Demo Image: Animating Search Box
Demo Image: Animating Search Box

Pupassure sign up form

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Responsive contact form

Only SCSS/CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Search

Simple search playing around with animations and positions.Made by Aaron TaylorAugust 15, 2022

Demo Image: Sign Up Form
Demo Image: Sign Up Form

Search animation

Search animation with HTML, CSS and JavaScript.Made by DmitriyFebruary 26, 2022

Demo Image: Credit Card Checkout
Demo Image: Credit Card Checkout

Search bar

Search bar with HTML, CSS and JavaScript.Made by Adam KuhnSeptember 21, 2022

Demo Image: Checkout Card
Demo Image: Checkout Card

Search bar animation

Search input with morphing effect.Made by Milan MiloševSeptember 23, 2022

Demo Image: Search Bar
Demo Image: Search Bar

Search button animation

Search button animation with HTML, CSS and JavaScript.Made by Kristy YeatonApril 20, 2022

Demo Image: Search Input With Animation
Demo Image: Search Input With Animation

Search field

HTML and CSS search field.Made by Bahaà Addin BalashoniJuly 9, 2022

Demo Image: Payment Card Checkout
Demo Image: Payment Card Checkout

Search input context animation

CSS icons, context animation, Telegram app-like search loading effect.Made by Riccardo ZanuttaApril 19, 2022

Demo Image: Form Sign Up UI
Demo Image: Form Sign Up UI

Search input focus animation

A simple animation for the focus event on a search input.Made by Nicols J EnglerJuly 26, 2022

Demo Image: Material Login Form
Demo Image: Material Login Form

Search input with animation

Pure CSS Search input with animation.Made by Arlina DesignApril 12, 2022

Demo Image: Fancy Forms
Demo Image: Fancy Forms

Search transformation

Interactive prototype of search form transformation.Made by Lucas BourdalléOctober 22, 2022

Demo Image: Search Animation
Demo Image: Search Animation

Search ui

Search concept with options.Made by Fabio OttavianiMarch 10, 2022

Demo Image: Search Animation
Demo Image: Search Animation

Sign up

Sign up form UI with React.js.Made by Jack OliverOctober 25, 2022

Demo Image: UI Credit Card
Demo Image: UI Credit Card

Sign up form

Sign up with HTML, CSS and JavaScript.Made by Tommaso PolettiAugust 4, 2022

Demo Image: Credit Card Checkout
Demo Image: Credit Card Checkout

Sign up form ui

Sign Up Form UI with HTML and CSS.Made by PeterJune 5, 2022

Demo Image: Search Button Animation
Demo Image: Search Button Animation

Sign up ui

Heavily GSAP’ed sign up form with validation handling for the daily ui challenge.Made by Antonin CezardMarch 20, 2022

Demo Image: Multi Step Form With Progress Bar Using jQuery And CSS3
Demo Image: Multi Step Form With Progress Bar Using jQuery And CSS3

Simple mobile search input

This is an example of search input, that could be put in a mobile template for an e-commerce or wheather or much more :)Made by Tommaso PolettiJuly 13, 2022

Demo Image: SVG Search...
Demo Image: SVG Search…

Slicing design subcribe modal

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: –

Step by step form

A take on the codrops version with the possibility to go back and confirm all inputs.Made by Jonathan HNovember 8, 2022

Demo Image: Step By Step Form
Demo Image: Step By Step Form

Step by step form interaction

A simple step form for customer experience.Made by Bhakti Al AkbarMarch 4, 2022

Demo Image: Interactive Sign Up Form
Demo Image: Interactive Sign Up Form

Step by step register form

Step by step register form with HTML, CSS and JavaScript.Made by Jerome RendersJanuary 6, 2022

Demo Image: Interactive Form
Demo Image: Interactive Form

Subscribe form

Subscribe form with animated button in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

Svg search…

SVG search icon that transitions to underline on focus.Made by Mark ThomesJune 28, 2022

Demo Image: Credit Card Payment Form
Demo Image: Credit Card Payment Form

Ui credit card

UI credit card with HTML, CSS and JavaScript.Made by GilOctober 22, 2022

Demo Image: Fullscreen Search
Demo Image: Fullscreen Search

Добавим бекграунд к всплывающей форме. два варианта анимации!:

В дополнении Christmas Time я применял данный метод. Там на видео наглядно видно, какая красота может произойти просто вставив в подложку всплывающей формы gif анимацию.В этом примере я покажу как это сделать самостоятельно. Это будут только стили – а значит пример нужно вставлять в свой style.cssКартинку мы будем вставлять к оверлею – а это значит что клик по картинке будет закрывать форму.

Пример 1Вначале просто картинка:

Добавим логотип и надпись к форме входа (и к остальным):

Добавим название сайта и логотип на примере всплывающей формы входа:

Добавление шрифтовых иконок

Добавим иконки в виде шрифтов, переходим на сервис
fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.

Если включено подтверждение регистрации. e-mail не подтвержден. провал проверки:

Если по каким-либо причинам пользователь провалил подтверждение почты – покажем ему дополнительную информацию – почту администрации для решения проблем.

Если включено подтверждение регистрации. покажем в форме свое сообщение: пользователь успешно подтвердил регистрацию:

На последнем шаге регистрации мы покажем свое сообщение:

Изменим сообщение в форме при регистрации:

Если отключено подтверждение регистрации. При успешной регистрации покажем свое сообщение в форме:

Как изменить текст письма отправляемого при регистрации:

На данный момент гибкого решения нет. Только если править саму функцию отправки письма:rcl_register_mail в файле /wp-content/plugins/wp-recall/functions/register.php

Каркас формы в html

Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.

Описываем в css элементы формы

Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.

Подключение к базы данных


В корневую папку сайта, создаем файл с названием “dbconnect.php”. В этом файле, добавляем следующий код:

  <?php
      // Указываем кодировку
      header('Content-Type: text/html; charset=utf-8');

      $server = "localhost"; /* имя хоста (уточняется у провайдера), если работаем на локальном сервере, то указываем localhost */
      $username = "имя_пользователя_бд"; /* Имя пользователя БД */
      $password = "пароль_пользователя_бд"; /* Пароль пользователя, если у пользователя нет пароля то, оставляем пустым */
      $database = "имя_базы_данных"; /* Имя базы данных, которую создали */

      // Подключение к базе данный через MySQLi
      $mysqli = new mysqli($server, $username, $password, $database);

      // Проверяем, успешность соединения. 
      if ($mysqli->connect_errno) {
              die("<p><strong>Ошибка подключения к БД</strong></p><p><strong>Код ошибки: </strong> ". $mysqli->connect_errno ." </p><p><strong>Описание ошибки:</strong> ".$mysqli->connect_error."</p>");
      }

      // Устанавливаем кодировку подключения
      $mysqli->set_charset('utf8');

      //Для удобства, добавим здесь переменную, которая будет содержать название нашего сайта
      $address_site = "http://testsite.local";
  ?>

Редирект после регистрации средствами wp-recall:

Плагин имеет фильтр url_after_register_rcl:

// куда пойдет редирект
apply_filters('url_after_register_rcl',esc_url($_POST['redirect_to']))

Применим его. Сделаем редирект пользователя, после регистрации, на нужную нам страницу:

// редирект после регистрации
function otfm_my_registration_redirect() {
    return home_url('/целевая-страница/');
}
add_filter('url_after_register_rcl', 'otfm_my_registration_redirect',10);

в home_url – впишите свой адрес страницы

Редиректы средствами wordpress:

“Перенаправление пользователя после успешной регистрации””Перенаправление пользователя после входа в систему и выхода””Перенаправление пользователя после сброса пароля”- Все эти вопросы редиректов разбирались в этой статье

Структура файла form-sign.php – шаблон входа:

Наглядно описал на скриншоте (кликабельно):
Всё о форме входа и регистрации WP-Recall - часть 2. Шаблоны, хуки, кастомизация - CODESELLER - продажа цифровых товаров
У каждого файла вверху есть табы переключения. Область куда приходят сервисные сообщения. Поля ввода в форме и хук для дополнения формы своими полями.
Если вам нужно что-то дополнить, изменить верстку – то думаю теперь вам не составит труда вписать в нужное место.
Хуки разберем ниже.

Хуки и фильтры формы восстановления пароля:

do_action(‘rcl_remember_form_head’); – реколл хук, срабатывает в шапке формы восстановления пароля

do_action(‘lostpassword_form’); – вордпресс экшен для дополнения своими полями формы восстановления пароля. Не передает ничего. Срабатывает внутри тега form.lostpassword_form в Кодексе вордпресс.

Хуки и фильтры формы входа:

do_action(‘rcl_login_form_head’); – реколл хук, срабатывает в шапке формы входа

do_action(‘login_form’); – вордпресс экшен для дополнения своими полями формы входа. Не передает ничего. Срабатывает внутри тега form.login_form в Кодексе вордпресс.

apply_filters(‘signform_fields_rcl’,$signfields) – реколл фильтр для формы авторизации

Хуки и фильтры формы регистрации:

do_action(‘rcl_register_form_head’); – реколл хук, срабатывает в шапке формы регистрации.

do_action(‘register_form’); – вордпресс экшен, для дополнения своими полями формы регистрации. Не передает ничего. Срабатывает внутри тега form.register_form в Кодексе вордпресс.

Похожее:  Видео чат Альтернатива - бесплатно и без регистрации

Добавить комментарий

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

➤