Do you want to create a custom front-end user registration form in WordPress?
The default WordPress user registration form shows WordPress branding and does not match your site’s theme.
In this article, we will show you how to create a custom user registration form in WordPress.
Why Add a Custom User Registration Form in WordPress
The default WordPress user registration page shows the WordPress branding and logo. It does not match the rest of your WordPress site.
Creating a custom user registration form allows you to add the registration form on any page of your WordPress site. It helps you deliver a more consistent user experience during the registration process.
A custom user registration form also allows you to redirect users upon registration. You can also display additional user profile fields, combine it with custom front-end login form, and connect it with your email marketing service.
Having said that, let’s take a look at how to create a custom user registration form in WordPress.
Creating a Custom User Registration Form in WordPress
WPForms is very easy to use and offers a drag and drop form builder, so you can use it to customize your registration form the way you want. The plugin also integrates with popular email marketing services and payment services like PayPal.
For this tutorial, we will be using the WPForms Pro plan because it includes the user registration addon.
The first thing you need to do is install and activate the WPForms forms plugin on your website. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit WPForms » Settings page to enter your WPForms license key. You can get this key from your account on WPForm’s website.
Once the key is verified, you need to visit WPForms » Addons page and then click on the ‘Install Addon’ button next to ‘User Registration Addon’.
WPForms will now install and activate the User Registration Addon. You will see the Status change to ‘Active’ when the addon is installed.
You are now ready to create your custom user registration form.
To start, simply visit WPForms » Add New to launch the WPForms builder.
First, you need to enter a name for your form at the top and then hover over the User Registration Form template. After that, click the ‘Create a User Registration Form’ button.
WPForms will now create a simple registration form for you. This sample form will have the following WordPress user registration fields added by default.
- Name – First and last name
- Short bio
You can add more fields from the left panel and also drag the fields to rearrange their order.
The plugin also lets you edit each form field. Simply click on any form field, and you’ll see ‘Field Options’ on the left.
For example, you can change the field label, edit its format, add a description, set up conditional formatting, and much more.
When you’re done editing the form, don’t forget to click the ‘Save’ button at the top right corner.
Adding Custom Fields in Your Custom User Registration Form
WPForms also allows you to connect custom user profile fields to your user registration form.
To do this, you will need to add additional user profile fields to your WordPress site. The easiest way to do this is by using a WordPress plugin.
In this tutorial, we are using the Advanced Custom Fields plugin. However, the field mapping feature of WPForms works with any plugin that uses standard WordPress custom fields to add and store user metadata.
The first thing you need to do is install and activate the Advanced Custom Fields plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit Custom Fields » Field Groups and click on the ‘Add New’ button.
After that, enter a name for the new field group. For example, if you want to collect social media information upon registration, then you can name it as Social Media Details.
Next, go ahead and click the ‘+ Add Field’ button.
Now, you’ll need to enter a Field Label that will appear on the profile page. You’ll notice that the Field Name will be automatically generated as you enter a field label, but you can edit the field name if you want.
After that, go ahead and select a Field Type from the dropdown menu. You can choose the field to contain text, numbers, images, files, checkbox, URL, password, and much more.
There are more options for editing your new field as well. You can enable the option to make the field required, add a default value, set a character limit, and configure conditional logic.
Next, scroll down to the ‘Location’ section. In this section, you’ll have to create a set of rules to determine which screens will use these custom fields.
Since we want them to appear for all user profiles, you can change it to Show this field group if ‘User Role is equal to All.’
Now, scroll to the ‘Settings’ section and ensure that the field is ‘Active’ by sliding the toggle from No to Yes.
After you’re satisfied with your new custom field settings, go ahead and click the ‘Publish’ button.
To see your custom field in action, simply headover to User » Profile and scroll down to the bottom of the page.
Now that we have created a custom user profile field, let’s add it to the custom user registration form in WPForms and then make sure to map the form field to the custom field so that the data is stored properly.
You will need to visit WPForms » All Forms page to edit your custom user registration form that we created earlier, or you can also create a new one.
After that, drag a field from the left panel to add it to your form. In this example, we are adding a ‘Website/URL’ field to our form.
The Website/URL field will now appear in your form preview. You need to click on the field, and WPForms will show its properties in the left panel.
Go ahead and change the label from Website/URL to Social Media Details. You can also add a description for the field.
Don’t forget to click on the ‘Save’ button at the top right corner of the screen to save your form.
Next, you need to click on the ‘Settings’ button for advanced form settings and field mapping. On the Settings page, click on the ‘User Registration’ tab.
WPForms will now show your form fields and a dropdown menu below them to select the WordPress registration field to map it with.
You will notice that WPForms will automatically map your default fields like Name, Email, Password, etc. You can also select a page where you want users to be redirected once they submit the form.
You will need to scroll down to the ‘Custom User Meta’ section. Here you can enter the custom meta key you created earlier and then select the custom form field you want to map it with.
Don’t forget to click on the ‘Save’ button on the top right corner of the screen to save your settings.
Adding Your Custom User Registration form in WordPress
WPForms makes it super simple to add forms into your WordPress posts, pages, and sidebar widgets.
You need to create a new post/page or edit an existing one. In your WordPress editor, click on the plus (+) sign at the top and then scroll down to the widgets section to add a WPForms block.
After that, you can select your custom registration form from the dropdown menu in the WPForms block.
You will now see your registration form preview in the WordPress editor. Go ahead and publish your post or page to see the custom registration form in action.
WPForms also allows you to add your custom user registration form in your sidebar. Simply visit Appearance » Widgets page and add WPForm widget to a sidebar.
Next, you’ll need to select the form you want to show from the dropdown menu in the widget settings. Don’t forget to click on the Save button to store your widget settings.
That’s all, you can now visit your website to see your custom user registration form in action.
Create a Custom Login Page with Your Registration Form
When you add your registration form to a page on your website, WordPress will use your theme’s layout, template, and style by default.
However, you can create a stunning registration page from scratch using a WordPress landing page builder.
SeedProd is the best landing page builder for WordPress. It’s user-friendly and offers a drag and drop builder that helps you create all types of landing pages. The plugin also offers prebuilt templates and lots of customization features.
For this tutorial, we’ll use SeedProd’s Pro version as it includes a login page template and advanced customization features. There is also a free version of SeedProd, but it doesn’t have the option to create a login page.
First, you’ll need to install and activate the SeedProd plugin on your site. You follow our detailed tutorial on how to install a WordPress plugin.
Once the plugin is active, you’ll be redirected to SeedProd in your WordPress admin panel and will be asked to enter your license key. You can find the key in your SeedProd account.
After verifying your key, you’re now ready to create a login page with your registration form.
To start, head over to SeedProd » Pages and then click on the ‘Set up a Login Page’ button.
Next, you’ll need to select a template for your login page. SeedProd offers different templates to help you get started quickly.
After selecting a template, a popup window will appear. You will need to enter a name for your landing page and a URL. Once that’s done, go ahead and click the ‘Save and Start Editing Page’ button.
Next, you can edit your login page using SeedProd’s drag and drop landing page builder.
Simply select a block from the menu on your left and drag to where you want to add it on your login page. For instance, you can add a headline, image, video, etc.
To add your registration form, head over to the Advanced blocks section on your left. Then select the ‘Contact Form’ block and place it on your login page.
We would suggest that you delete the existing Username and Password block from the template, so users don’t have to enter the login credentials twice.
Next, click on the WPForms block on your login page. You’ll now see an option to ‘Select a Form’ in the menu on your left. Go ahead and select your registration form from the drop-down menu.
You should now see a preview of your registration form in the landing page builder. Don’t forget to click the ‘Save’ button to store your changes.
Next, you can go to the ‘Page Settings’ tab and change the Page Status to Publish under the General settings. You can even edit the page title, URL, and enable the SeedProd link.
If you want to optimize your page for search engines, then go to the SEO settings. You can enter an SEO title, description, social media thumbnail, etc. SeedProd also lets you add code snippets under the Scripts settings.
Once you’re happy with the settings, simply click the ‘Save’ button at the top and close the page builder.
After that, head over to SeedProd » Pages and click the switch under the Login Page to make your page ‘Active.’
You can now visit your login page to see the registration form in action.
We hope this article helped you learn how to easily add a custom user registration form in WordPress. You may also want to see our guide on how to choose the best website builder, or our comparison of the best live chat software for small business.