Безобидный pages registration form.

WordPress user registration is one of the essential features every WordPress website or blog must have. Given that it’s very important for a website to grow or become successful; WordPress has provided membership/ register option by default. However, the default option is not flexible enough to allow you create an ideally beautiful and powerful user registration forms.

With the default WordPress registration option enabled, you (as a website owner) can collect username and user email address while the registered users cannot do anything much as an active user. So, WordPress professionals have come up with multiple solutions for creating easily.

And this post is a complete tutorial on creating such user registration forms/ pages, especially for beginners.

Take a look at the main contents of the article. You can click on any topic to directly skip to that section of the article.

If you are a noob, read the complete article to the end to get the complete picture.

1. What is WordPress user registration?

In the simplest terms, WordPress user registration is a very useful functionality for membership options provided in WordPress. It allows your website visitors to ‘register ‘ on your website as ‘subscribers’ or any other user roles. As a website owner, you can set what user role to provide for the ‘new registered users’.

The general logic of user registration is providing some specific space to your loyal website visitors on your website and making your site more interactive and user-friendly .

Undoubtedly, your website visitors are the most valuable assets you can have and their opinions matter the most. So, providing a separate user space to them is surely rewarding. 🙂

Through user registration, you can provide your site visitors a kind of membership to your site and also allow some certain actions (commenting on posts, contributing articles, reviews, etc.)

Besides, you can collect the user emails and send some interesting content to the registered users. It can be a simple newsletter welcoming them to your network, some discount coupon or festival offer, information about your recent product launch or anything interesting. This way, it helps to strengthen the bond between you and your site users and grow your online business.

That’s not all. It has several benefits. In the next section, I will explain more on why WordPress user registration is essential for your blog.

2. Why would you want to allow user registration on your WordPress site?

As discussed above, the most fundamental reason to allow user registration is to allow membership feature on a WordPress site. But that’s not all. You can do a lot more with virtually powerful user registration forms however such forms need to be custom created. The default options won’t let you create an ideally complete user registration forms/ pages.

Well, we will discuss how to create custom user registration forms in the following sections so let’s quickly check out what are the benefits of creating powerful user registration forms/ pages here.

i) Grow your email list and get an effective marketing tool ready:

With a well-designed and beautiful custom user-registration page, you can lure your website visitors including new visitors to ‘register’ to your site. As your email list grows, you can use it for marketing purpose. Create beautiful newsletters and send it to the registered users. You will do both reach out and promotion at the same time.

ii) Engage the users, increase interaction and plan success

An ideal user registration form not only collects user information for you, it also lets an exclusive space for the registered users. I mean user profile pages. They can create a user profile of their own, manage their details, and contribute your site in the possible ways as far as the assigned user role allows. This way, users get more engaged to your site, the interaction increases and ultimately help to your site’s success.

iii) Know your site visitors better and improve your site

With a custom user registration form, you can create multiple fields and collect more user information. Such collected information helps you to know your site visitors better, about their interests, habits and all. After knowing what attracts them most or what they don’t like on your site, you can make improvements on your site.

iv) Ideal for the guest blogging

If you want some content contributions on your site, user registration is an ideal way for doing that. You can provide ‘Contributor’ user role to the interested users through which they can submit content.

3. How to enable WordPress user registration (default)?

Done with the basics, now let’s start the steps. The most fundamental step in creating WordPress User registration forms/ pages is enabling this feature in WP settings. Though there are functional limitations, it’s essential to enable this option for creating custom user registration forms as well. In other words, you should have this ‘default feature’ enabled to have any custom plugin working.

So, let’s start with the steps.

First, go to WordPress Dashboard, and locate Settings. Go to General Settings inside Settings where you will find Membership options as shown below.

WP admin panel > Settings > General.

As shown in the image above, you must put a check on ‘Anyone can register ‘ option. Below that, you can see ‘New User Default Role’ which is ‘Subscriber’ by default. You can change it if you want. But it’s better to leave as it is as ‘Subscriber’ is taken as the best user role for new users.

Then, scroll down and click on ‘Save Changes’.

Once this option is enabled, this adds a ‘Register’ link on your WP login page (e.g. http://www.yoursite.com/wp-login.php" ). You can see how the default user registration option works in the animation below.

As you can see above, now users can insert a username and an email address and register to your site. So, if you want more fields on the registration form, you need to create a custom user registration form.

Besides, there is yet another problem. To find the default registration option, users must find your WP login URL . It looks quite a boring task for the users or a difficult task if your site visitors have no idea how to find the login page.

Well, there is a way to show the ‘register’ link in the front-end of your website using ‘meta’ widget. Please, follow the given steps below to have the link on the front-end.

First, go to ‘Appearance ‘ menu in WP admin panel. Then, click on ‘Widgets ‘. Then, you can see, you can see the list of all the available WordPress widgets including ‘Meta ‘ widget. Locate Meta widget.

WP admin panel > Appearance > Widgets.

Next, drag and drop the widget in the widget-ready areas on your WordPress site.

Now you can go your website front-end like in the image below. You can see Meta content on your site now (in the footer as I placed the widget on the footer).

Well, you can display the register link on your front-end website however it will ultimately redirect you to the WordPress login page with the basic registration form.

So, the next section will take you in a full tutorial how to create a beautiful and feature-rich custom user registration form.

4. How to create custom user registration forms/ pages beautifully on WordPress?

Thanks to the WordPress enthusiasts around the world who have given easy solutions to every WordPress problems. Like anything, there are plenty of which enable you to create beautiful WordPress user registration forms.

Among numerous plugins available on the web, we have chosen the best WordPress user registration plugin ‘User Registration ‘ here.

It is an amazing free drag and drop registration form builder for WordPress . It is not just a registration plugin but also a WordPress profile builder that enables the users to create and manage their user profile in a simple and beautiful way on your site. Most noteworthy, it is highly user-friendly and simple.

Now, we will discuss how to create elegant front-end custom user registration forms using this plugin.

First, install the plugin. To install the plugin, go to ‘Plugins’ and ‘Add New’. Then search ‘User Registration ‘. The plugin can be directly installed from official WordPress repository.

Once the results appear, locate ‘User Registration’ by WPEverest and click on ‘Install Now’ .

WP admin panel > Plugins > Add New.

Next, you have to activate the plugin. Click on ‘Activate ‘ button.

Following this, you will be redirected to Plugins page where you can see a ‘Welcome’ message from User Registration plugin. As shown in the image below, you can see two buttons: ‘Install User Registration Pages ‘ and ‘Skip Setup’ .

The first button takes you to the automatic plugin setup process including the installation of two sample user registration pages offered by the plugin. It further takes you step-by-step to the plugin settings and creating user registration pages . You can click on this first button if you want an easy way to configure the plugin.

If you click on the ‘Skip Setup ‘, you need to explore the plugin settings and features one-by-one manually.

Let’s take an easy way by clicking on the first button. Then, it will redirect you to the plugin Settings page as shown in the image below.

General

The General Options has the settings.

• User login option: There are three user login options: 1. Manual login after registration. 2. Auto login after registration. 3. Admin approval after registration.
• Prevent dashboard access: You can choose the user roles to prevent dashboard access from here.

The other section is ‘My account endpoints’ . You can change the specific page URL endpoints from this option. Or you can simply save the default endpoints.

Integration

You can insert Google reCAPTCHA site key and secret key from here. Integrating Google reCAPTCHA helps you prevent spammy non-human bots to enter your website.

Emails

You are almost done with the plugin configuration settings. The next setting is the Email Notifications.

In the Emails tab, you can see all the Email notifications for your forms such as Admin Email, Email Confirmation, Registration approved Email, etc. You can Configure each email setting according to your requirements.

View User Registration Pages

Now you can start creating custom user registration pages. But before that, you may like to check out sample registration pages added through the automatic setup process.

Go to All Pages in Pages menu in WP Dashboard. There you will see two pages ‘My Account’ and ‘Registration’ added by the plugin automatically (through automatic setup process).

WP admin panel > Pages > All Pages.

In order to check how the sample pages look, you can simply click on ‘View ‘ link below the page.

Here is how the default registration form looks with the Twenty Seventeen theme. The design of the registration form usually depends on the theme active on your site.

You can simply use the default user registration form and page on your WP site if you want something simple. If you want multiple fields and more options, you must create a form on your own. So, let’s start how to create a custom user registration form using this plugin.

B. Creating a WordPress User Registration Form

In order to create a new custom user registration form, you need to go to ‘Add New ‘ in User Registration in WP admin panel. User Registration plugin provides a highly intuitive, clean and user-friendly interface for creating new forms.

WP admin panel > User Registration > Add New.

Now, you can see User Registration form builder like in the image below.

First, give a name to your new form (e.g. User Registration).

To the left, you can Default User Fields and Extra Fields . And, there is drag and drop form editor to the right part of the page.

Now you can simply drag and drop the required fields to the form editor as the complete interface is drag and drop platform.

Once you add all required fields, you can simply click on Create Form button.

Then, the plugin will provide a form shortcode.

Now you can use the shortcode anywhere in your website and display the form you just created.

C. Creating multi-column multi-row grid-like forms

The plugin is full of amazing features including an ability to create grid-like multi-column multi-row registration forms. You can create a form with maximum 3 columns and unlimited rows .

To add columns, you can simply click the arrow (3/3) shown at the top of every row.

To add rows, you can simply click on the + (plus) button shown after the last row.

You can use the Default Fields only once one form while extra fields can be used as many times as you like.

Here is the front-end preview of the User Registration form in Twenty Seventeen theme.

It looks simple and elegant, doesn’t it?

D. Exploring the Field Options

In addition to extensive form settings, the plugin allows plenty of field options for each field.

In order to customize one field, you must select it by clicking. Once it is selected, the new tab ‘Field Options ‘ will open where you can edit the details.

Once you change all the field details, you can click on Update form .

E. Changing Form Settings

After you’re done creating your form, you can head over to the Form Settings tab in the form builder.

F. How and where to display new user registration form?

Now we have the new user registration form ready. We have the shortcode, so what’s next. Here, we’ll discuss how and where to display the form.

Since the plugin uses shortcode method, you can easily use it anywhere including widget areas, pages, and posts.

In order to show the plugin in a post/ page, you need to open the post/ page editor.

In Classic Editor:

WP admin panel > Posts > Add New

In the post/page editor, you can see a new button ‘Add Registration Form’ added next to media button.

You can simply click on the button and select the form you want to add on that page.

Click on ‘Add Form’. And publish the page. Now you can add the page anywhere in your website menus, custom menu, or widget areas.

In Gutenberg Editor:

User Registration is Gutenberg compatible so, you can easily insert your registration form. For this, go to the block editor, and search for the User Registration block.

Then, select the registration form that you created. So easy!

5. Wrapping Up

In this post, I have tried to explain everything you should know about WP user registration. Hopefully, it was helpful.

If you still have any queries, questions or anything, feel free to write them down below in the comment box.

Sunita Rai

Sunita is a WordPress lover, digital marketing, SEO, and blogging enthusiast. She has appeared on ThemeGrill blog, WPAll, and multiple websites. She loves doing research, writing, travel, music and exploring life. She is a passionate learner and dreamer. Follow her on

MemberPress allows you to create membership registration pages in two ways:

1. Automatically when creating a membership
2. Manually by adding a shortcode to any WordPress Page, Post, or Custom Post Type

These two methods have been explained below.

Automatically

By simply creating your membership in MemberPress, you have created your registration page also for that membership! You can find the link to your membership"s registration page here (Hint: to learn how to add a registration link to your menu) :

Manually

You can manually create a registration page as well if you would like. You may want to do this if you are using a custom page builder (which won"t work on the default automatically created registration page), or for any other reason.

To do this, simply create a normal WordPress Page, Post, or Custom Post Type where you would like the registration form to appear and then enter this shortcode onto the page:

Simply replace 123 IMPORTANT: Global CSS option your Options >

Editing the Membership Registration Page

The registration page can currently only be edited with Custom CSS or with custom page templates. For Custom CSS edits, we recommend this plugin (additional fees may apply for pro features).

If you would simply like to add any content above or below your registration form on the page you can do so by using one our shortcodes:

For the default, or automatically created registration page:

And for a manually created registration page: Remember to replace 123 with your own memberships unique ID () IMPORTANT: When using this, you"ll most likely need to also enable the Global CSS option your Options > General of MemberPress to prevent errors from appearing on the form.

Here is an example of how this might look, using the first shortcode as an example:

Linking to Your Membership Registration Page

To learn more on this topic, please visit this page where the topic has been covered extensively.

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.

Beautiful HTML CSS Sign Up and Registration Form

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.