Главная » Ремонт и отделочные материалы » Черствый registration form

Черствый registration form

Ever since businesses went online and started taking the web seriously, Registration Forms have been vital. While they could be considered the first barrier to an online sale, they’re essential for any business that wants to maintain a relationship with a customer.

When talking about Registration Forms, I mean everything you have to fill in before buying something or using an online service. On Amazon, you have to register before you can buy; similarly on Airbnb before you rent. And you also have to do it on eBay , Twitter , Google , Facebook, etc.

So if the Registration Form is vital, why are they so badly designed and offer such a poor user experience?

With these questions in mind, I’ve compiled a list of things I consider the most important when designing a Registration Form.

1. Add value for registration

Why should your users register? As a service or product provider, you must be able to convince your users why they should spend a few minutes of their time doing so.

To do this, show the user the benefits of becoming a registered user. It’s proven that doing so will make your users more willing to give their personal details in exchange for what you have to offer.

Here are some examples of interesting ways of demonstrating a benefit:

Next to the signup form, Facebook shows what how user will benefit. Google says that registering gives you one free account that accesses all its services from anywhere. Vimeo shows what you can get if you register.

2. Eliminate unnecessary fields

This might be one of the most frequent mistakes in Registration Forms. Forget about what your marketing or IT department says - those arguments are from the 90s when everything was complicated and hard to do. We live in the 21st century now when everything is possible.

One of the main reasons that forms have so many inputs is to gather as much qualitative information as possible about the user for marketing campaigns. But there are many other ways of acquiring this information to enrich your user database.

When registering a new user, ask the minimum you need to get you started. You can always ask further information down the line. If your goal is quality and not quantity, you’re better off focusing on your qualitative leads.

One of the things any Registration Form can do better is to remove the double entry password and email field. There are other solutions for capturing typos and wrong inputs. Apart from using proper validation, there are some other ways to prevent this, one of which is suggested by Chris Jackson:

With this solution, a message appears underneath the user’s input box when the user types their email address.

To reduce the double password confirmation problem, add a way for the user to show the password. Doing so could dramatically increase your form signups.

Formissimo’s signups increased by 55% after this change.

3. Know where to put your labels

This is possibly one of the other most-discussed subjects relating to form design. Studies have been made and most of them come up with more or less the same conclusions.

Labels above the input fields take less time to fill than left-aligned form inputs because there are fewer visual fixations.

Studies also argue that inline top-aligned labels are the best way to present labels because they offer minimal visual fixations and make the form lean and compact. Anthony from UX Movement posted a detailed article on this.

An example of inline top-aligned labels.

This last technique seems promising but the folks at Formulate have some issues about this study. You can see their thoughts .
In conclusion - and in my opinion - the best technique for desktop and mobile is to put labels above each input. This means fewer visual fixations, no visual ambiguity and a cleaner and clearer experience for the user

4. Provide Guidance

Successful Registration Forms guide the user through them.

You should explain how you want users to input your data or why you need it. Do you need their birth date? Then tell them why as this builds trust and the user will thank you for it.

Need a strong password? Don’t push it by saying you need them to type at least 8 characters long with an alphanumeric, at least one uppercase and one special character from a list (! # $ _). Let the user pick their own complexity level. In fact, a passphrase is considered more secure than a complex P4ssw0rd! .

Skype registration form tells the user that no-one will see the email address With this example, the user is provided with a help text and an accordion to display more information about this field.

5. Required inputs are bad, use optional instead

While not too bad in themselves, required inputs could affect your signup quality conversions. A research study shows that people are willing to provide more information than is needed. This means that if you say fields are required, then users will only fill in those fields.

Instead of indicating required fields, mark the optional fields and users won’t feel the need to take shortcuts to fill the form. You can read more about this technique in this article .

6. Use the right input field

This is another example of asking the right questions in a wrong way. How many times has a form asked you for your sex, then provided a dropdown with male/female options? Or requested your date of birth and offered day, month and year dropdown boxes?
This is a problem because you are hiding information and making the user have unnecessary interactions with the form. There are also better ways to let the user input the information you need.

Check out this an article by Luke Wroblewski explaining why dropdown should be the last UI resort.

Here’s another option: take advantage of HTML5 and give the proper type attribute to inputs. For example, use the input ‘type email’ when you’re asking for a user’s email. On mobile, the keyboard defaults to a friendly email input when the user is about to fill in this field.

Look at the @ on the keyboard when you use email input.

Here are a few other examples you case use to increase the user experience on your form.

The URL input type includes a slash and a period.
The TEL input type brings up the telephone keypad.
The number input type brings up the numeric keyboard and you can even set min or max values and step sequences.

7. Avoid using a Captcha

Harry Brignull said this about Captchas

“Using a CAPTCHA is a way of announcing to the world that you’ve got a spam problem, that you don’t know how to deal with it, and that you’ve decided to offload the frustration of the problem onto your user-base. As statements go, that’s pretty lame.”

A captcha is probably one of the major causes of form drop off; as such, it does more harm than good. There are alternatives out there which don’t have any negative impact on your form.

Creating a membership based site seems like a daunting task at first. If you ever wanted to do this by yourself, then just gave up when you started to think how you are going to put it together using your PHP skills, then this article is for you. We are going to walk you through every aspect of creating a membership based site, with a secure members area protected by password.

The whole process consists of two big parts: user registration and user authentication. In the first part, we are going to cover creation of the registration form and storing the data in a MySQL database. In the second part, we will create the login form and use it to allow users access in the secure area.

Download the code

You can download the whole source code for the registration/login system from the link below:

Configuration & Upload
The ReadMe file contains detailed instructions.

Open the source\include\membersite_config.php file in a text editor and update the configuration. (Database login, your website’s name, your email address etc).

Upload the whole directory contents. Test the register.php by submitting the form.

The registration form

In order to create a user account, we need to gather a minimal amount of information from the user. We need his name, his email address and his desired username and password. Of course, we can ask for more information at this point, but a long form is always a turn-off. So let’s limit ourselves to just those fields.

Here is the registration form:

So, we have text fields for name, email and the password. Note that we are using the for better usability.

Form validation

At this point it is a good idea to put some form validation code in place, so we make sure that we have all the data required to create the user account. We need to check if name and email, and password are filled in and that the email is in the proper format.

Handling the form submission

Now we have to handle the form data that is submitted.

Here is the sequence (see the file fg_membersite.php in the downloaded source):

First, we validate the form submission. Then we collect and ‘sanitize’ the form submission data (always do this before sending email, saving to database etc). The form submission is then saved to the database table. We send an email to the user requesting confirmation. Then we intimate the admin that a user has registered.

Saving the data in the database

Now that we gathered all the data, we need to store it into the database.
Here is how we save the form submission to the database.

Note that you have configured the Database login details in the membersite_config.php file. Most of the cases, you can use “localhost” for database host.
After logging in, we make sure that the table is existing.(If not, the script will create the required table).
Then we make sure that the username and email are unique. If it is not unique, we return error back to the user.

The database table structure

This is the table structure. The CreateTable() function in the fg_membersite.php file creates the table. Here is the code:

function CreateTable() { $qry = "Create Table $this->tablename (". "id_user INT NOT NULL AUTO_INCREMENT ,". "name VARCHAR(128) NOT NULL ,". "email VARCHAR(64) NOT NULL ,". "phone_number VARCHAR(16) NOT NULL ,". "username VARCHAR(16) NOT NULL ,". "password VARCHAR(32) NOT NULL ,". "confirmcode VARCHAR(32) ,". "PRIMARY KEY (id_user)". ")"; if(!mysql_query($qry,$this->connection)) { $this->HandleDBError("Error creating the table \nquery was\n $qry"); return false; } return true; }

The id_user field will contain the unique id of the user, and is also the primary key of the table. Notice that we allow 32 characters for the password field. We do this because, as an added security measure, we will store the password in the database encrypted using MD5. Please note that because MD5 is an one-way encryption method, we won’t be able to recover the password in case the user forgets it.

Inserting the registration to the table

Here is the code that we use to insert data into the database. We will have all our data available in the $formvars array.

function InsertIntoDB(&$formvars) { $confirmcode = $this->MakeConfirmationMd5($formvars["email"]); $insert_query = "insert into ".$this->tablename."(name, email, username, password, confirmcode) values ("" . $this->SanitizeForSQL($formvars["name"]) . "", "" . $this->SanitizeForSQL($formvars["email"]) . "", "" . $this->SanitizeForSQL($formvars["username"]) . "", "" . md5($formvars["password"]) . "", "" . $confirmcode . "")"; if(!mysql_query($insert_query ,$this->connection)) { $this->HandleDBError("Error inserting data to the table\nquery:$insert_query"); return false; } return true; }

Notice that we use PHP function md5() to encrypt the password before inserting it into the database.
Also, we make the unique confirmation code from the user’s email address.

Sending emails

Now that we have the registration in our database, we will send a confirmation email to the user. The user has to click a link in the confirmation email to complete the registration process.

function SendUserConfirmationEmail(&$formvars) { $mailer = new PHPMailer(); $mailer->CharSet = "utf-8"; $mailer->AddAddress($formvars["email"],$formvars["name"]); $mailer->Subject = "Your registration with ".$this->sitename; $mailer->From = $this->GetFromAddress(); $confirmcode = urlencode($this->MakeConfirmationMd5($formvars["email"])); $confirm_url = $this->GetAbsoluteURLFolder()."/confirmreg.php?code=".$confirmcode; $mailer->Body ="Hello ".$formvars["name"]."\r\n\r\n". "Thanks for your registration with ".$this->sitename."\r\n". "Please click the link below to confirm your registration.\r\n". "$confirm_url\r\n". "\r\n". "Regards,\r\n". "Webmaster\r\n". $this->sitename; if(!$mailer->Send()) { $this->HandleError("Failed sending registration confirmation email."); return false; } return true; }

Updates

9th Jan 2012
Reset Password/Change Password features are added
The code is now shared at GitHub .

Welcome back UserFullName(); ?>!

License

The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.

No related posts.

Comments on this entry are closed.

With the revolution in the concept of web page design and maintaining, to develop a closer relationship with one visiting your page is important. The viewer may be in need of using it other times, on the other hand you get active visitors for your web page. Here the concept of sign in form and registration form pups up. Firstly, after having a look over the importance, we will approach with better way to insert some Beautiful HTML CSS Sign Up and Registration Form over your web page.

While surfing over internet, you come across the ready to use sign up forms. These forms ask the details of user like name, address, email Id, Photo, gender, job including biography. The sign up forms includes username and password as basic elements. Some of these components may vary as per the form you select but basic idea is to verify the identity of your user and develop better link with them.

Among many HTML, CSS forms over internet we have listed down some best one in terms of their compatibility, flexibility and space occupied. These will be of great help for you.

This full page, responsive CodePen is the creation of Dany Santos. The login forms only contain email and password whereas sign in form contains email, username and password. In addition these components only appear once you choose whether to log in or sign up. With the background animation this one looks attractive.

Similar to the first one this is also the CodePen by Eric whereas the component of forms is also similar. But, here the component appears in the same page so you don’t have to initially select to view the components. But admit the fact that with the plain background this one is less attractive but is flexible and light weighted.

This is simple looking registration form including plenty of examples. It is easily compatible with windows and androids as well. Moreover, designers himself have separated the forms in different categories like mini, labels in top, validity and so on. This is interactive and user friendly form example by tutorialzine.
Download and Demo

Jose Carnerioover made this simple and light weighted form by Jose over CodePen featuring to collect large number of information. It includes gender, date of birth and payment option including credit card number beside the basic one i.e. email and password. So this is best designed for online shopping and marketing.
Code and Demo

This compatible user friendly code for sign in and sign up form is the design of Josh Sorosky. It has a simple look and coded with HTML, CSS and JavaScript. Sign up Screen Animation only contain the basic things like username and password including email for sign up form.
Code and Demo

This attractive and beautiful log in and registration form is the creation of Grandvincvcent Marion. With the beautiful background picture and just basic component on forms this is actually popular with thousands of views. This is well flexible allowing easy modification and is a attractive one.

Material design log in sin up form is simple and extremely light weighted form by Brawada over CodePen. This composes of HTML, CSS and JavaScript codes and looks simple and beautiful. It just includes the basic component of forms and uses less space of your web page.
Download and Code

This is interactive, beautiful code by Kyle Lavery. Its simplicity makes it popular with, many thousand of view. Furthermore material Design Signup Interaction contains just basic component of forms but you can easily add up newer one as this is highly flexible. This is simple registration form over CodePen.
Code and Demo

Martin Machycek is popular developer in CodePen. He designed this very simple and good looking sign up and login form through HTML, CSS and JavaScript. In addition it is compatible and light weighted which is the best aspect of this form. It just included email and Password so better useful for simple WebPages then commercial one.
View Code and Demo

Sign in and Sign up – Single Form

This is interactive light weighted sign in and sign up forms by Dany Santos over CodePen. It is simple with just email and password so not well designed for commercial purpose. Because of its less weight and simple nature it has collected few thousand of view making it the attractive one.

This is interactive sign up form by Matthew Largent. Not only email and password but it also includes other personal information like age interest and biography. So this is useful for commercial sites and job searching sites. Moreover it has only HTML and CSS code, however is the useful one.
Code and Demo

This is the attractive sign up form by Kov Jonas. Moreover it provides with easy linkage with social media used by viewers. Furthermore this facility makes a frequent link u with viewers and furthermore even helps in advertisement of pages over social media. With the beautiful background image in addition to flexibility, it is well preferred.
View Code and Demo

This is extremely simple and light login form coded with HTML5 and CSS3. This is design of Aigars Silkans. It only included username and password so best designed for informative personal blogs and small websites. Fact that this has maximum number of views unlike some other CodePen is convincing.
Live Demo and Code

This beautiful sign up form is the creation of Momciloo Popov. Along with the simple components of a form it furthermore has an image side by that moves with the touch. It included all HTML, CSS and JavaScript codes.

Last but not the least, Sign up Daily UI is best login form for mobile phone by Gabrielle wee over CodePen. Moreover, it looks attractive with the background image and animation can easily replace that image. It just includes name, email and password.

Conclusion
Initially we know, among many aspects of your web page, registration and sign up follows the first order. This creates the profile of each user and moreover leads to better user management systems. In the first pace, HTML is the building block of everything and CSS makes things look attractive. So, HTML and CSS sums up making a beautiful HTML CSS Sign Up and Registration Form for your web page.

The presence of sign up and registration form is everywhere in the web, whether it is a social network or any email account, users are always required to go through the sign up & registration process first in order to use the platform. Registration form is a key part of any website that let the users create their own profile in that site after which they can download any file, post any article or can do any other task they want. In one word, well designed registration form is vital in any website to maintain an effective user management system.

Now, HTML, CSS and CSS3 play a vital role in this sign up and registration form. HTML is the basic building block of website while CSS can make that site look attractive and elegant. CSS (cascading style sheet) is the language that is being used to design the look of the website. However, coding the registration form and sign up page using HTML and CSS3 from scratch will require some knowledge while it is also time consuming.

But do not worry as there are thousands of free sign up and registration form templates available that can be customized easily to work in the website. Finding out the proper sign up and registration form might be difficult sometimes and some of you might be looking for help from others. Probably your search will come to an end here as we have listed down the most useful and unique CSS3 sign up and registration form templates that are easy to download and use . Whether it is an eCommerce related project, social network, blog, portal or anything, these below mentioned templates can be used regardless of the type of your website. All these are equipped with unique features and design, while you can also go through the demo once to know about it in depth.

FullPage Signup Form

This is a brilliant signup form for your modern website as it features a full page display with a large sidebar and signup form in a column six grid format. The fluid animations on mouse click on input fields are also very satisfying to look.
More Info / Download

7 Clean and Responsive Form Templates

If plain html5 and css3 are your requirements with a basic html5 validation then this pack of form templates will get you what you are looking for. The basic structure of , registration, signup, search, validation form can be found in this download file.

The templates can be used for both commercial and personal project and it also does not require any framework as these are designed with plain HTML5 and CSS3. It provides a form for registration & sign up along with an in-built form and all these are optimized and fully responsive. Integration of the form in your website is quite easy that require you to just copy and paste the HTML in the required place in your project while CSS3 can be getting from the corresponding style sheet. Also you can be assured that the CSS style won’t break other style in the page as it is self contained.

Login & SignUp form using Material Design and jQuery

Looking for light 3d buttons over flat designs then start with material design concept. This signup form is basic but will be a starter template for your material design.

These days material design is the talk among developers and designers as this is the future of web design. This is a language which is been developed by Google and Android Lollipop UI too is developed using this language. There are several reasons to choose Login & signup form using material design and Jquery as these are featured with animation effect, shadows, 3d effects, motion visualization, inbuilt components and more. Also this template is fully responsive so can be viewed in all screen sizes and devices. Patterns like gestures, fingerprint, swipe to refresh and touch screen are really enjoyable.

Animated Sign Up Form

This signup form will let you cross the boundaries to design a perfectly functional form with fields for account creation with payment. If you are a service with different mode of payment plans and different set of features offered for your price plan range then this form will let you do that.

Fully compatible with all modern browsers and uses velocity.js plugin to offer fluid all-round functionality.

Flat Trendy Signup Form

Interested in having a flat sign-in and registration form template ? Then this css template which also contains a html file will get you ready for one. A confirmation box model is also done for the finalization of the signup process.

Designed with web technologies such as CSS3, HTML 5 this template can be employed in your project to make it look beautiful. This is perfectly free to download and can be paste straight in your website. It has a fluid responsive layout, so is device friendly and users holding any device can go through the registration process. The widget is compatible with most of browsers such as Google Chrome, Mozilla Firefox, Opera, IE, Safari etc. So, get this Flat trendy signup form in your project and provide your users a trouble-free experience.

Sign-Up/Login Form

This is a floating sign up form designed using tabs and floating labels. The floating form labels offer various benefits and this is the reason designers are using placeholder text in place of traditional form labels. This pattern can be used for both desktop and mobile application while best suitable for mobile application. Here as the users will click inside any of the field, the placeholder will be disappeared and the context will get lost. This pattern is best for both worlds, remove space captured by the labels while provide enough information to the users.

Another added benefit of this floating labels pattern is, it helps users to indicate the active field to improve UX which is again useful for mobile application where filling up the form is bit tricky.

Login & Sign Up Form Concept

This is another most useful CSS3 sign up and registration form that can be used in all screen size and devices regardless of their resolution. The responsive layout makes it possible to work in all devices and websites. Login & Sign Up Form Concept is being preferred by most of the designers and developers for its easy to use feature. The template can provide a great user experience to all the users because of its easy navigation and operating process. It is free to download, so just get the template, paste it in your project and attract more users by this easy login and sign up Form concept.

With the help of a modal window in bootstrap you can add this login/signup form in navigation bar menu which gives a account access option.

Pure CSS Only SignUp Form

Looking for a template to create a fully functional registration form in your business website? This is a good choice to start with. Pure CSS Only signup form allow users to create signup form of any complexity and for any kind of needs. So, regardless of the business type you have, this template can be employed in the project to win a great customer base. The form is quite simple and do not require the users to invest their high time, rather it is quick and can be completed the process in just seconds which is the vital aspect in generating more leads.

Smooth Css Signups

An attractive and fully functional signup and registration form is most needed for every website as this is the integral part of any website. But it should be short at the same time as long registration form lose interest among the users and they will have less tendency to complete the registration form. Here users can click at any required option either sign up or sign in based on their requirement and can go through the process. Demo is attached here so that you can have a better understanding of the sign up form before employing it in your project.

Interactive signup form is always better that provides 300% more completion than the regular forms. The reason is this kind of form is quick, fun and far relevant that raise the interest among users and they become more inclined towards your website by going through the simple but fun based sign up process. Also more number of questions in the sign up page is equal to lower completion rate as most of the users do not have enough tenacity to answer all the questions in the form. And they always like the form to be simple and short. This interactive sign up form will be a great choice by the marketers to generate more and more leads. So, have this signup template in your website and provide enough room to grow the business.

Material design concept is becoming a mainstream tool these days and is being used by most of people to design their website. Implemented for web, this material design signup interaction is a nice interaction that is designed with smooth animation. Also this sign up form is completely free, so just download it and apply in your website to attain a great customer base with the attractive sign up page.

If you are eager to provide an amazing experience to the users during their login and signup procedure, this is one of the best options to look for where UI movement is one such great feature to be enjoyed by your users. Developed by Gal Shir, this interface looks great that employ great animation. Users can choose the sign up or login windows depending on their needs while both are available in moving form in the same page. This design completely focuses on the user’s attention and experience, so no doubt you can attract huge customer base in your website in no time.

The login/signup modal window allow users to easily sign up in your website that let them switch one form to another easily or else they can select the reset password option. You can employ this template in your website if there is a need to show the signup page in all the pages of the site. But that does not mean that the users will get redirected to other pages rather they can continue their job which they are performing. Also this is fully responsive to ensure that your users can go through the sign up process in all their handheld devices regardless of the screen size and resolution.

So, download any of the above sign up template for your website and give it a flat look. The templates can be used for both personal and professional websites and for all kind of business purpose. All the mentioned templates here are free to download, so it won’t hit your bank account also.

Напечатать