How to Build a Custom Registration Form in WordPress
The default WordPress registration form is too simple. If you’re developing a community driven or a membership site, you’ll certainly run into limitations. Luckily, WordPress is flexible.
There are several solutions for creating custom registration forms. But my favorite solution is using Gravity Forms plugin because it provides an easy, yet very powerful and flexible way, to create a registration formâ€”and not just one. With Gravity Forms, you can create different registration forms to serve different purposes on the same site!
In this easy to follow tutorial we’ll implement only one custom registration form and place it on our site. You can then tweak these steps to tailor your forms to your own needs.
(Note that you will need the “Developer license” of Gravity Forms, which includes the User Registration add-on. Lesser licenses don’t have this capability.)
The custom registration form that we’re about to build can be styled to look like anything you want, but here’s the one that I built.
The submit button on this demo form is disabled intentionally. However, when a user submits an actual registration form, it’ll be up to you what happens next.
You can display feedback that the registration is complete. You can send email notification to the user and/or the administrator. All depends on your settings.
An account for the user will be created in the back-end, but the custom fields, such as phone number and resume file will not be displayed in the user’s profile unless you implement some custom code to display them. They will, however, be displayed in the entries list of Gravity Forms.
It’ll be something like this:
So, let’s create this form.
First, have Gravity Forms installed and activated. Next, in WordPress admin, go to:
Forms â†’ New Form
Make the General Form Settings
First, youâ€™ll wanna adjust the general form settings. You do that by clicking on â€œForm Settingsâ€ at the top.
Give your form a title and a description.
Then go to the â€œAdvancedâ€ tab and configure the form submit button, its label, and whether itâ€™s a standard button or an image. And adjust the rest of the settings as you see fit. Every field in Gravity Forms has a little clickable question mark icon next to it that explains what the field does.
Inserting the Registration Fields
A typical registration form should have fields for name, email, username, and password. We’ll also add phone number, website, areas of interest, and resume file. Adding these fields to your form with Gravity Forms is easy.
Go to the Advanced Fields box, and add:
For the username and areas of interest we’ll use Standard Fields. From the Standard Fields box, add:
After inserting these fields, you can rearrange them by dragging them around.
Most of these fields are self explanatory and easy to deal with. You can click on each one to edit its properties to your liking.
Two of these fields require a bit more attention: the file upload and checkboxes. We’ll use the checkboxes as areas of interest. I have three of those: creative, information technology, and business. I just have to put these values in and and change the field label.
For the file upload field, you’ll have to specify the accepted file types. Because in my example I’m expecting to receive resumes, the accepted file types are doc, docx, and pdf.
With that, we’ve actually built the form. Now we have to tell Gravity Forms that this is a user registration form.
User Registration Form Add-On
In Gravity Forms, when you activate the User Registration add-on, an additional menu with the same name will become available. You can access that menu by going to:
WordPress admin â†’ Forms â†’ User Registration
In that screen, you can select which of your Gravity Forms is a registration form. So, click on Add New.
In the next page, select the form you just built from the drop down menu. Doing that will take you to the page where you link the WordPress user registration attributes with the fields in the form that you’ve just created.
Here’s how I linked my form fields with WordPress user registration fields:
The values in the left column represent the data that will be stored in WordPress and the values in the right column represent the data that the user provided in the form.
Notice how Gravity Forms allows me to specify the “Role” that will be given to those who register using my form. This allows me to create different forms for different roles. I can then place those forms on different pages on my website and refer people to the appropriate form, based on the role that I want them to have.
Displaying the Form Publicly
The beauty about this form is that it can be inserted any where on your websiteâ€”a post, a page, the sidebar, you name it.
You just have to know the shortcode for the form, which is something like this:
[gravityform id="7" name="Register with Boston's Employment Agency" ajax="true"]
If you don’t know the specific shortcode for your form, don’t worry. You can get it from the form insertion button on the WordPress post editor.
Now, you’re ready to create a customized registration form in WordPress and start receiving applications with rich content. If you have questions or suggestions, let’s talk about them in the comments!