Всё о форме входа и регистрации 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-шаблонов для форм авторизации

Animated login form

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

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

Bouncy search box

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

Checkout card

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

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

Credit card flat design

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

About a code

Untitled form

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

Responsive: no

Dependencies: –

Credit card payment

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

Credit card payment form

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

Credit card ui

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

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

Emoji form validation

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

Fancy forms

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

Flat login form

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

Flat ui login form

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

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

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

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

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

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

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

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

Material login form

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

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

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

Payment card checkout

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

About the code

No questions asked form & magic focus

Pull-out search bar concept

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

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

Search animation

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

Search bar

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

Search bar animation

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

Search button animation

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

Search field

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

Search input context animation

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

Search input focus animation

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

Search input with animation

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

Search transformation

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

Search ui

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

Sign up

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

Sign up form

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

Sign up form ui

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

Sign up ui

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

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

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

Step by step form interaction

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

Step by step register form

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

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

Ui credit card

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

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

В дополнении 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 – шаблон входа:

Наглядно описал на скриншоте (кликабельно):

У каждого файла вверху есть табы переключения. Область куда приходят сервисные сообщения. Поля ввода в форме и хук для дополнения формы своими полями.
Если вам нужно что-то дополнить, изменить верстку – то думаю теперь вам не составит труда вписать в нужное место.
Хуки разберем ниже.

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

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 в Кодексе вордпресс.