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

В итоге, получим вариант HTML-кода формы онлайн заказа, дополненный элементами раздела регистрации, как показано в следующей таблице (вновь созданные элементы выделены более светлым фоном).

kak-sozdat-formu-registracii_1

Рис.2 HTML-код формы онлайн заказа с разделом регистрации

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

• Атрибут type является основным атрибутом элемента , который определяет его тип. В данном случае используются три его варианта: text (поз.81,91), предназначено для текстового поля, email (поз.85) - для адреса электронной почты и password (поз.100, 108) - для ввода пароля.
  Последнее - это тоже поле, предусматривающее ввод текста. Но в отличие от обычного текстового, такой вариант обеспечивает, что все вводимые символы будут показываться звездочками. И применяется такой тип именно для полей ввода пароля, чтобы никто не смог подглядеть вводимый пароль.
• Универсальный атрибут title здесь применен для описания содержимое элемента (поз.81,91,100) в виде всплывающей подсказки, которая появляется при наведении на него курсора.
  Так для поля "Имя" (поз.81) при наведении курсора будет появляться подсказка с текстом "Имя должно быть на русском и содержать не менее 3 символов". Для других полей - аналогично.
• Атрибут pattern устанавливает шаблон ввода (поз.81,91,100). Для этого в его значении указывается регулярное выражение, в соответствии с которым необходимо будет вводить данные в поле. При этом, если присутствует этот атрибут, то при неправильно заполненном поле форма отправляться не будет.
  В данном случае для поля "Имя" (поз.81) регулярным выражением определено условие использования только заглавных и прописных букв русского алфавита в количестве не менее 3-ех. Для поля "Логин" (поз.91) - цифр и букв латинского алфавита в количестве не менее 3-ех. А для поля "Пароль" (поз.100) - как и в предыдущем случае, но только в количестве символов не менее 6-ти.
  Следует отметить, что данный атрибут довольно часто используется в формах, так как позволяет значительно снизить вероятность допущения ошибок при заполнении полей. Поэтому следует стараться максимально использовать его возможности.
  В нашей форме онлайн заказа помимо элементов, предназначенных для регистрации, этот атрибут можно применить и в других разделах. Например, в разделе заполнения данных об автомобиле, можно также его включить в элемент поля "6 цифр VIN-кода" со значением регулярного выражения в виде {6} . Что будет определять возможность заполнения только цифрами в количестве, равном 6-ти символов (поз.34).
• Атрибут required устанавливает, что поле обязательно для заполнения. В случае, если оно окажется пустым, то форма не отправится с выдачей соответствующего сообщения. В данном случае это касается полей "Имя" (поз.81), "Логин" (поз.91) и "Пароль" (поз.100).
  Что касается остальных, то для "E-mail" (поз.85) атрибут отсутствует, так как это поле необязательно для заполнения. О чем информирует соответствующее примечание (поз.87).
  Для поля же "Подтвердите пароль" (поз.108) необходимость применения атрибута отсутствует по другой причине. Связанно это с тем, с помощью JavaScript-скрипта будет проводиться проверка на идентичность повторного ввода И если комбинация символов при воде пароля не будет совпадать, то форма отправляться не будет. В связи с чем для успешной отправки формы это поле в любом случае должно быть заполнено.
• Атрибут placeholder выводит подсказывающий текст, который обычно отображается серым цветом и исчезает при наборе текста.
  В данном случае это применено для полей ввода пароля. Для поля "Пароль" (поз.100) подсказывающий текст - "Введите пароль", а для подтверждения пароля (поз.108) - "Повторите пароль".
  Следует отметить, что применение этого атрибута придает элементам дополнительную информативность. И при желании форму можно немного упростить. Например, для таких полей можно вообще не использовать элемент метки . Либо, просто указать в нем пустое значение, как в нашем случае сделано для поля подтверждения пароля (поз.105).

После того, как вновь сформированные элементы регистрации мы добавим в форму онлайн заказа, находящуюся в файле "poluchit-skidku.php" каталога "articles", можно открыть соответствующую страницу "Получить скидку" и посмотреть что у нас получилось.

Рис.3 Вновь сформированные элементы регистрации

Как видно на скриншоте, все новые элементы добавлены. Однако, их размер и расположение на странице пока не соответствует типовому внешнему виду остальных элементов формы.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке

Рис.4 Созданные элементы регистрации после оформления стилями CSS

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

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

Проверяем валидацию формы на стороне клиента

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

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

Сначала создадим ситуацию, когда одно из обязательных для заполнения полей оказалось пустым. В этом случае заведомо оставим поле незаполненным, элемент которого был дополнен атрибутом required . В данном случае выберем для этого поле "Логин".

Результат такой проверки приведен на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке

Рис.5 Проверка отправки формы с пустым обязательным полем

Как видно, вариант с незаполненным полем, которое определено как обязательное для заполнения, отрабатывается должным образом, а именно: форма не отправляется (блокируется), а в браузере отображается проблемное поле и вид ошибки.

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

В нашей форме данный атрибут применен для полей "Имя", "Логин" и "Пароль". Для проверки возьмем, к примеру, поле "Имя", в элементе которого регулярное выражение задано в виде [А-Яа-яЁё]{3,} . Что означает, что в данном поле должна быть введена комбинация символов, состоящая из заглавных и прописных букв русского алфавита и содержать не менее 3 символов.

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

Для увеличения / уменьшения размера изображения кликните по картинке

Рис.6 Проверка отправки формы с неправильно заполненном полем

На скриншоте видно, что и этот вариант ошибки с некорректным вводом, формой отрабатывается.

И последнее, что мы проверим, это работоспособность определения некорректного ввода адреса электронной почты.

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

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

Для увеличения / уменьшения размера изображения кликните по картинке

Рис.7 Проверка отправки формы с некорректно заполненном полем E-mail

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

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

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

скриншот 77

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

Исходные файлы сайта

Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

• Файлы каталога www
• Таблицы базы данных MySQL

Login forms are everywhere on the web. But now all login forms designs are beautiful and have good UI that’s why we decide to create these logins form template designs and share them for free.

Are you using social networks? You must go through a login form of some sort. Do you have an email? Did you join any forums? Did you try to leave a comment on a WordPress site? To gain access to anything on the internet, the chances are you will have to go through some sort of login process. You will probably have to register first, sign up or leave some information behind. You will have to use some sort of login form to do anything on the internet.

So what do Login Forms have to do with HTML and CSS? They are both the essential parts of the Login Forms.

HTML (HyperText Markup Language) is a standard markup language used to create web pages. HTML elements are building blocks of all websites.

CSS (Cascading Style Sheet) is a language used for describing the look and formatting of a document written in a markup language. Such as HTML!

We use HTML to build a website and CSS to make it look nice. That is what most of the users encounter while browsing the web.

We’ve made a list of 50 free login form designs that you can use on your WordPress site, blog, forum or anywhere else. This is a hand-picked list by Colorlib to ensure the highest quality of the forms. Each and every form has been thoroughly tested to ensure no components are missing and source code is available with every download. Of course, you are free to use these forms for personal and commercial purposes, with no need for attribution.

Explore 2.5 Million Digital Assets including 2019’s Best WordPress Templates

2M+ items from the world’s largest marketplace for HTML5 Templates, Themes & Design Assets. Whether that’s what you need, or you’re just after a few Stock Photos – all of it can be found here at Envato Market.

DOWNLOAD NOW

WordPress Login Customizer

The rest of the list and HTML/CSS powered login forms but here you can see the best login customizer plugin for WordPress. It comes with several defined templates that you can further tweak to match the design of your website. Thats to this plugin you can finally get rid of boring WordPress wp-admin page and create a truly unique experience for yourself and your users.

Download

Login Form 1 by Colorlib

Simple, creative and vibrant login form with a gradient background. You can use this one for all sorts of intentions, like web, mobile or desktop applications. But do get creative with it if you like.

WordPress version

Creative Login Form Design

Simple yet creative login form created using HTML5 and CSS3. This form can be used as a registration form as well. This is our favorite template on this list thanks to its flexibility and similarity that allows you to create

WordPress version

We did search the internet for cool login forms but it was very difficult to find good looking ones, therefore, we decided to have our take on them. We would like to present 20 login forms designed and developer by Colorlib team.

Login Form 2 by Colorlib

Minimal and sophisticated login form by Colorlib with a gradient button with animation and a logo. Use it, alter it and have it as a nice addition to your already nifty web space.

WordPress version

Login Form 3 by Colorlib

A gorgeous login page with a background image with shadow and a gradient form box with login button hover effect. The only limitation that you have is your imagination, so expand your view and use Login Form 3 to its full potential.

WordPress version

Login Form 4 by Colorlib

Creativity knows no limits and nor does Login Form 4. Here it is, at your disposal, ready and set for you to download it and put it to some good use. Do not worry about the responsiveness either.

WordPress version

Login Form 5 by Colorlib

Gorgeous, clean and modern form with an option to log in with Facebook or Google. All buttons have a nice hove effect that spices up the experience.

WordPress version

Login Form 6 by Colorlib

If your page is already super neat and tidy, a login form should be no different. Here is one that will easily meet your expectations if minimalism is your cup of tea.

WordPress version

Login Form 7 by Colorlib

A form with a three-way option of logging into the account. Either it is Facebook, Twitter or email login they prefer, this is the type of a tool that you need to feature on your page. And if they do not already have an account, you can also link it with your sign up page.

WordPress version

Login Form 8 by Colorlib

Another contemporary, trendy and enticing login form with rounded everything. This one is especially applicable to mobile users due to its currently very popular rounded corners style.

WordPress version

Login Form 9 by Colorlib

If you would like to avoid the white or single-color background, this is the login form page that you should consider. Not only does it support a full image background, but it also comes with a gradient overlay and an option to log in with Facebook or Google.

WordPress version

Login Form 10 by Colorlib

A somewhat complete opposite compared to the previous one is Login Form 10. It almost could not be more minimalistic looking while still having this up-to-the-minute feel to it.

WordPress version

Login Form 11 by Colorlib

With our collection of the best HTML5 and CSS3 login forms, you save yourself time and effort (money, too). Instead of building one from scratch, here is another killer ready-to-use template for you to employ.

WordPress version

Login Form 12 by Colorlib

Image background with a blue shadow overlay, name, image and the must-have form, that’s what’s up with Login Form 12. There is also a cool hover effect on the login button and gives you a chance to link it with your registration form for all new users.

WordPress version

Login Form 13 by Colorlib

A split screen sign up form, where one half is dedicated to an image and the other half to the form. It is a free tool which you can start using this very moment. Just download the layout and go full tilt with it.

WordPress version

Login Form 14 by Colorlib

In this collection, we have a mixture of simplistic and those a tad more complex and advanced login forms. In short, there is something for everyone and Login Form 14 is more on the minimalistic side. But why even complicate with a login form, right? To each their own.

WordPress version

Login Form 15 by Colorlib

While still keeping things to the bare minimum, one cool addition to the Login Form 15 is the image banner just above the form. With this little feature, you can make the experience slightly more engaging.

WordPress version

Login Form 16 by Colorlib

This is a login form with a full-screen image on top of which is placed a form with username and password fields and a gradient button with hover effect. Simple and straightforward.

WordPress version

Login Form 17 by Colorlib

To make it appear more personal, this framed login form template is the best fit for you. It has an image side and a form side but keeps things to the very minimum while still ensuring professionalism.

WordPress version

Login Form 18 by Colorlib

If you like to differentiate yourself and keep things original, do consider using Login Form 18. While some enjoy login pages super basic, the others want to have some additional goodies rocking the layout. And if adding a picture is what you are after, this one is for you.

WordPress version

Login Form 19 by Colorlib

Vibrant, energetic and attention-grabbing, that is what this next login form based on HTML5 and CSS3 is all about. It is also fully responsive and mobile-ready, as well as compatible with all major web browsers.

WordPress version

Login Form 20 by Colorlib

Gradient background, black sign in button with hover effect, username and password fields along with custom text and “Forgot password?” section, yep, that’s all part of Login Form 20. Sounds overwhelming but in reality, far from it.

WordPress version

The form is hidden unless you click on “Login” option. Really great feature for modern websites that want to avoid having a separate page for the login form. You can display the form anywhere on your website with this powerful tool.

Download

A design for a Sign Up form using tabs and floating form labels.

Download

What was initially made to stop people from entering one person’s WordPress site, it became a really popular form due to its simplicity and neat design.

Download

Flat Login – Sign Up Form

Once you click “Click me” button in top-right corner, you will get smooth animation that transforms this Login form to Sign up form.

Download

Login With Self-Contained SCSS Form

This is a form with self-contained SCSS. An extension of CSS that adds power and elegance to the basic language. It allows to use variables, nested rules, mixins, inline imports, and more.

Download

This is actually an animated Login form, with top “Hey you, Login already” transforming into the form at the bottom. Smooth animation effects.

Download

This is an example on how to create a simple login form using HTML5 and CSS3. This form uses pseudo elements (:after and:before) to create the multi page effect. These elements are rotated using the CSS3 transform property. This form uses HTML5 to make validation and submission easy.

Download

Once you enter a wrong password in this form, a nice shake effect will warn you that you did not enter the correct password. A simple and effective solution that will point out the problem of incorrect passwords.

Download

A boxy login form with a little surprise. Try “admin” as a username, and “1234” as a password, for full experience.

Download

Neat little login form. Once you click on “LOGIN” on the left side, animation effect creates neat little login form on the right. Definitely unique approach!

Download

Material Design Form

Fairly simple and easy on the eye login form that you can add to your blog or any other website and spice up the experience. No need to overcomplicate with a simple thing as the login form is. Even if you are just collecting subscribers, you can also play around with this layout and get things rocking.

Download

Bootstrap Snippet Form

Obviously, this next free HTML5 login form is based on the well-liked Bootstrap Framework. This tells you that you can expect some nice flexibility that any modern website and element must practice. Email address, password and a check box to tick if a user would like the platform to remember his or her information. Easy and to the point.

Download

Regardless of your main web design, with things like login forms, you do not want to over complicate it. Instead, you would want to keep it simple and let it to the job, getting users to access their accounts seamlessly. You will achieve that goal with this login form with flat UI unquestionably.

Download

Trendy UI Kits Form

From super simple login forms to those with slightly more action going on. This particular one is pretty similar compared to the last one just that you will notice a frame going all around the form. Get them to type in their names or usernames and passwords and they can enter your world of amazingness.

Download

Dashboard CSS3 HTML5 Form

All the HTML5 and CSS3 login forms you find on this list are simple to use and effortless to attach to your web platform. This one even has a “Forgot your password?” right at the bottom for everyone who just cannot recall their passwords. The template is perfect for entering your dashboard, but you can apply it for other needs, too.

Download

Login With Recovery Form

The title pretty much says it all; this is a neat, clean and minimal looking login form with recovery. What you also notice is that there is no traditional “box” that you are used to seeing login forms use. If you would like to make a difference, you now know which layout to choose.

Download

A free flat login form with a stunning and elegant dark layout coupled with a green call-to-action button. Sure, you can alter the tool to your likings, but you can also employ it exactly as is and have it live on your website in a snap. Play around with its features and have it all set up the way you like it.

Download

Transparent Login

Even a login form can be of super creative and attention-grabbing nature. While many stick to the simple and basic look, there are others who like it special and exclusive. This transparent login form will surely do the trick for you. With an image background and a form over it, this layout can follow your branding to a T.

Download

No need to be really going too in-depth with this next login since it is pretty self-explanatory. It is compatible with the Google Chrome extension, as well as features buttons for those who are not signed up yet or lost their password. If this is the one you were looking for, then scrolling all the way this far was more than worth it.

Download

Elegant Flat Form

A stylish flat form which you can append to your web space as a pop-up or ad as a widget on a page. Whatever the case, it will keep your professional approach intact. It is simple and easy on the eye and also has a CTA for everyone who missed signing up to your members’ area. Use it as is or improve it according to your taste.

Download

More and more website owners are implementing social logins and you can join the trend as well. This free login form with social integration is the right option to take the plunge. However, along with Twitter and Facebook buttons, the layout also features the traditional way of signing up with an email.

Download

If your password is super complex, you sometimes just want to enter it in a “show” mode. Offer this same feature to all your users with the show and hide password login form. It has a stunning dark layout with green details perfect for those who dig this type of designs. Of course, feel free to make changes to it and fine-tune it according to your needs.

Download

Log ‘N Load Animated Form

If you already practice animations and special effects on your page, keep the trend with the login form, too. Instead of creating your own one, you can simply use this striking Log ‘N Load animated form that will do the trick. Once you hover over the login button, the form reveals right in front of you. It even has a circular loading that enhances the experience.

Download

This flat, modern and easy to use login form works great on all devices, mobile, tablet and desktop. You can also play around with different tweaks and alter the default settings to your website’s style precisely. The tool also has cool hover effects that add a touch of sophistication to the overall experience.

Download

CSS3 Form With Shadow

While you can add this and that extra feature to your website, many want to leave it distraction-free. This also goes for special effects, animation and other whatnots. However, a simple touch of creativity in the form of a shadow can do you well. For a login form specifically, this particular appliance features a shadow with one rounded edge.

Download

This simple, modern and flexible login widget is more than just your next login form template. The appearance is clean and to the point, offering the basics and then some. And that “then some” are buttons to link to forgot username and password section. What’s more, for everyone new to your space, the new account button flips the login widget around and displays a . Clever!

Download

You are in full control of your website. What you add or avoid adding to your page is up to you. And if you are looking for the right HTML5 and CSS3 login form, we have very many at your disposal. On top of that, they are all free of charge. Not only that, but you can also edit and adjust them according to your preference. How cool is that?

Download

Green And Yellow Form

Saint Patrick’s Day might not be today, but you can still follow the tradition and rock your branding full of green. Instead of wasting time hammering out a login form of such style from scratch, get your hands on this green and yellow form and call it a day. It is here, just a click away, ready and set for you to put it to use and take it to your full advantage.

Download

Combine simplicity with creativity and you get this dope login form widget with a crisp spinning loader. The latter only appears after a user fills out his username and password and presses the login button. Go ahead, try it for yourself and you will see how awesome and attention-grabbing it is.

Download

Password Protected Form

Eye-catchy password protected form that gives three chances to type in the right one before it offers you to recover it. Nothing too complicated, yet still the outcome looks fantastic and adaptive enough to add to your website or application without trouble. Make it yours by fine-tuning its appearance and make it follow your branding regulations.

Download

If you would like to rock a full-screen image on your login page, then this transparent HTML5 and CSS3 login form is perfect for you. You can also add your brand or company logo and keep all segments of your online presence at the same level of expertness. Try out different customization tweaks, change the color of the call-to-action button and improve it with your signature style.

Download

Speaking of modern, some think of minimalism while the others imagine something super creative and advanced. If the former is what you are digging the most, then you will love this modern login form with a neat hover effect on the call-to-action button. The widget also gives you an option to link it to the password recovery page/form.
Download

Thank you for visiting Colorlib and reading this article! We highly appreciate it! Now you might want to learn how to using our free .

Frontend web developer and web designer specialized in free and premium WordPress theme development. Started to learn to code 2 years ago and now I am familiar with CSS/HTML/JavaScript (jQuery) and PHP. Obsessed with application performance, user experience and simplicity.

Disclosure: This page contains external affiliate links that may result in us receiving a commission if you choose to purchase mentioned product. The opinions on this page are our own and we don"t receive additional bonus for positive reviews.

Возвращает

Использование

Шаблон использования

wp_login_form(array("echo" => true, "redirect" => site_url($_SERVER["REQUEST_URI"]), "form_id" => "loginform", "label_username" => __("Username"), "label_password" => __("Password"), "label_remember" => __("Remember Me"), "label_log_in" => __("Log In"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => NULL, "value_remember" => false)); $args(строка/массив) Массив аргументов, контролирующих результат.
По умолчанию: параметры по умолчанию

Аргументы параметра $args

echo(логический) Вывести на экран (1) или возвратить (0).
По умолчанию: 1 redirect(строка) УРЛ на который перекинет после авторизации.
По умолчанию: текущая страница form_id(строка) id атрибут тега

.
По умолчанию: "loginform" label_username(строка) Текст заголовка поля "имя пользователя".
По умолчанию: "__("Username")" label_password(строка) Текст заголовка поля "пароль".
По умолчанию: "__("Password")" label_remember(строка) Текст заголовка поля "запомнить меня".
По умолчанию: "__("Remember Me")" label_log_in(строка) Текст кнопки сабмита.
По умолчанию: "__("Log In")" id_username(строка) Значение атрибута id:
По умолчанию: "user_login" id_password(строка) Значение атрибута id:
По умолчанию: "user_pass" id_remember(строка) Значение атрибута id:
По умолчанию: "rememberme" id_submit(строка) Значение атрибута id:
По умолчанию: "wp-submit" remember(логический) Запомнить значения полей (1) или нет (0).
По умолчанию: 1 value_username(строка) Имя пользователя по умолчанию.
По умолчанию: "" value_remember(строка) Значение атрибута value, поля "запомнить меня". По умолчанию 1 - галочка отмечена. 0 - галочка снята.
По умолчанию: 1

Примеры

#1. Обычное отображение формы:

Выведет на экран:

Логин

Пароль

Запомнить меня

#2 Оставить на той же странице при вводе неверного логина/пароля

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

Чтобы это изменить и оставить пользователя на прежней странице, даже если он ввел неверные данные, можно использовать хук wp_login_failed :

## Оставляет пользователя на той же странице при вводе неверного логина/пароля в форме авторизации wp_login_form() add_action("wp_login_failed", "my_front_end_login_fail"); function my_front_end_login_fail($username) { $referrer = $_SERVER["HTTP_REFERER"]; // откуда пришел запрос // Если есть referrer и это не страница wp-login.php if(!empty($referrer) && !strstr($referrer,"wp-login") && !strstr($referrer,"wp-admin")) { wp_redirect(add_query_arg("login", "failed", $referrer)); // редиркетим и добавим параметр запроса?login=failed exit; } }

#3 Форма регистрации WordPress

Для вывода формы регистрации, специальная функция не предусмотрена. Поэтому форму можно вывести написав свой HTML код. Вот пример такого HTML кода формы регистрации:

" method="post">

Имя пользователя

E-mail

Подтверждение регистрации будет отправлено на ваш e-mail.

Список изменений

С версии 3.0.0

Введена.

Код wp login form : wp-includes/general-template.php WP 5.3.2

true, // Default "redirect" value takes the user back to the request URI. "redirect" => (is_ssl() ? "https://" : "http://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"], "form_id" => "loginform", "label_username" => __("Username or Email Address"), "label_password" => __("Password"), "label_remember" => __("Remember Me"), "label_log_in" => __("Log In"), "id_username" => "user_login", "id_password" => "user_pass", "id_remember" => "rememberme", "id_submit" => "wp-submit", "remember" => true, "value_username" => "", // Set "value_remember" to true to default the "Remember me" checkbox to checked. "value_remember" => false,); /** * Filters the default login form output arguments. * * @since 3.0.0 * * @see wp_login_form() * * @param array $defaults An array of default login form arguments. */ $args = wp_parse_args($args, apply_filters("login_form_defaults", $defaults)); /** * Filters content to display at the top of the login form. * * The filter evaluates just following the opening form tag element. * * @since 3.0.0 * * @param string $content Content to display. Default empty. * @param array $args Array of login form arguments. */ $login_form_top = apply_filters("login_form_top", "", $args); /** * Filters content to display in the middle of the login form. * * The filter evaluates just following the location where the "login-password" * field is displayed. * * @since 3.0.0 * * @param string $content Content to display. Default empty. * @param array $args Array of login form arguments. */ $login_form_middle = apply_filters("login_form_middle", "", $args); /** * Filters content to display at the bottom of the login form. * * The filter evaluates just preceding the closing form tag element. * * @since 3.0.0 * * @param string $content Content to display. Default empty. * @param array $args Array of login form arguments. */ $login_form_bottom = apply_filters("login_form_bottom", "", $args); $form = "

" . $login_form_top . "

" . esc_html($args["label_username"]) . "

" . esc_html($args["label_password"]) . "

" . $login_form_middle . " " . ($args["remember"] ? "

" . esc_html($args["label_remember"]) . "

" : "") . "

" . $login_form_bottom . "

"; if ($args["echo"]) { echo $form; } else { return $form; } }

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

WordPress Login Customizer

Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress.

Creative Login Form

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

Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.

Форма авторизации №1

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

Скачать

Предварительный просмотр

Форма авторизации №2

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

Скачать

Предварительный просмотр

Форма авторизации №3

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

Скачать

Предварительный просмотр

Форма авторизации №4

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

Скачать

Предварительный просмотр

Форма авторизации №5

Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия.

Скачать

Предварительный просмотр

Форма авторизации №6

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

Скачать

Предварительный просмотр

Форма авторизации №7

Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации.

Скачать

Предварительный просмотр

Форма авторизации №8

Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.

Скачать

Предварительный просмотр

Форма авторизации №9

Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google.

Скачать

Предварительный просмотр

Форма авторизации №10

Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.

Скачать

Предварительный просмотр

Форма авторизации №11

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

Скачать

Предварительный просмотр

Форма авторизации №12

Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.

Скачать

Предварительный просмотр

Форма авторизации №13

Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы.

Скачать

Предварительный просмотр

Форма авторизации №14

В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных.

Скачать

Предварительный просмотр

Форма авторизации №15

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

Скачать

Предварительный просмотр

Форма авторизации №16

Это форма входа с полноэкранным изображением, поверх которого размещаются поля для ввода логина и пароля, а также кнопка с эффектом наведения.

Скачать

Предварительный просмотр

Форма авторизации №17

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

Скачать

Предварительный просмотр

Форма авторизации №18

Скачать

Предварительный просмотр

Форма авторизации №19

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

Скачать

Предварительный просмотр

Форма авторизации №20

Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.

Скачать

Предварительный просмотр

Выпадающая форма авторизации

Скачать

Floating Sign Up Form

Разработано для форм подписки с использованием вкладок и меток.

Скачать

Простая форма авторизации

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

Скачать

Flat Login – Sign Up Form

Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.

Скачать

Login With Self-Contained SCSS Form

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

Скачать

Animated Login Form

Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.

Скачать

Login Form Using CSS3 And HTML5

Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и:before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.

Скачать

Login With Shake Effect

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

Скачать

Boxy Login Form

Login forms can be found in websites with forums, shops, WordPress and mostly everything on the internet requires login form somewhere to get access to something. The whole web is incomplete without login forms and registration, signups forms.

HTML forms will be first which most of us come across and with proper CSS which gives style to the HTML structure . In latest HTML versions i guess HTML seems to have opted for CSS3 as their default structure styling option. Anyways what you find here is the pre designed HTML, CSS forms built by front end developers and shared to the public for free to use.

Try to use all these free login form templates as most of them also have pre built HTML validation features as well as some opt jQuery or HTML validation (like the Login/Register form with pass meter below).

This list is not over yet, i am interested in finding new login form designs so i will keep updating these list with new login form templates when they show up in 2017. Stay tuned.

Red Login Form

A simple and effective login form for your website which requires basic input fields and no extra programming.

A flat login form design designed for your website which is already flat. Download and use this template for any purpose.

Require a quick signin for your clients ? No worries, this pretty looking login form will get you going without any hassles. Download the source code and check the demo as you can put a sample username and password in the fields and try to login. You will be taken to a profile page on the same which looks glorious with a logout button which shows the logging out animation.

With google material design getting popular over flat design we can see a deep and carefully shadowed login form and a register form in this css3 template.

Here you get another brilliant login form for your busienss website with a option to hide/show login fields. Well coded css/html/js design will give you better loading without tampering your current site speed.

Minimal Login Form with fluid animation

A smooth animation of login form which opens up the login section by clicking a picture or a button as you need.

Minimalistic Login Form with css

Here you will find a no-fancy login form ui which is placed on a full screen background. The download file will get you css and html for easy implementation of this login to your website.

Animated Login Form

The click animations displayed on text fields is brilliant which displays a small sliding animation of user and password icons. You can then login the form to watch a authenticating pre loader as well as a welcome back block. This download contains all the source files to implement a login form for your own website.

Elegant Login

This is a simple version of login form you can display on your website as this also has less impact on site speed with its minimal code.

Calm Login Screen

A clean login form with animated background giving a relaxing feel to the whole page. Download the whole template in zip format from codepen.

Login and Signup Form

Integrate this fluid login and signup form on to your website with ease. The zip file with this download will provide you with css, html and js templates. Social media signup is also available with password show/hide options for on screen easy password entry.

Login Form with Create Account

A login form which displays with a fadein effect is just amusing to watch. This effect can be seen only in few modern login forms. Use the click me to change the form to signup or create form.

A minimal style login form with flat design can be download from the link below. HTML validation is available and set in this login template.

Download

Minimal Form Template for Login

A validation for email is in palce and this tempalte is pure css, html with no fancy jquery modules.

Download

Signup/Login Form

A single form to login to the website as well as a signup, register option which can be flipped with a click. Even though the signup area is missing some important fields this is nonetheless better form with all powerful features.

Download

This login form is hidden unles you click on login link. This is a very useful feature for modern day website which can avoid an extra page for login. Display login on any page you like with this powerful login form.

Download

It’s provided both as a PSD and as a fully-coded HTML/CSS version, so you can get started integrating it straight away.

Login Form (Coded)

A professional login form. The download includes the PSD file, and I also felt like coding it so I included the xHTML, Js and CSS files as well.

Download

White Simple Login Form

A clean and simple login form with a round submit button and elegant focus states.

Simply Login Form

Simply Login Form styled and designed purely using CSS3. The form is created using pretty simple markup and styled using very basic CSS3 properties.

Download