Register Form

Build a compact WordPress Registration Form allowing users to sign up and get a profile page in no time.

Why You Need a WordPress Register Form

Registration forms help website owners to turn one-time visitors into registered users. They prove to be very efficient when it comes to user data collection and mailing list creation.

Keep the WordPress custom registration form simple and make it quick to submit. Thanks to Login & Register, a WordPress Form pattern, you get a signup form layout in one button click. Proceed to style the form blocks, set post-submit actions, and it’s good to go.

Top WordPress Register Form Features

Go light on the form adding only vital fields like Name, Email, Password, and Confirm Password;
Add Required fields for the essential questions only;
Avoid spam during user registration thanks to reCAPTCHA v3 validation;
Provide the Success, Validation, and Error Messages during form submission;
Boost visitor engagement by carefully styling form fields and buttons;
Collect user data and sync to MailChimp, GetResponse, Active Campaign, Zapier, and Integromat.

WordPress Form Pattern Structure

Name. A required Text field for filling in the user name;
Email. A required Text field for filling in the user email;
Password. A required Text field for filling in the password for the first time;
Confirm Password. A required Text field for filling in the same password for confirmation;
Country. A Select field for choosing the country from the drop-down;
Submit. A Submit field to submit a registration form.

How to Create a WordPress Custom Registration Form based on Pattern

The first and the primary step is adding a new Form. Navigate to JetForms > Add New.

You can notice that the editor already has some default blocks. These are Hidden, Text, and Submit fields. You can customize them according to your needs or just delete them.

Mainly, there are two ways of creating the Register Form — by adding separate blocks or using Patterns. Patterns are the JetFormBuilder plugin’s feature that allows you to use already existing content layouts.

There are various Patterns available for use: Buttons, Columns, Gallery, Headers, Text, Query, and JetForms. To make work with Register Form easier, you can click on JetForms, where Login & Register Pattern is provided.

This layout consists of blocks that can be either changed or deleted. Furthermore, Patterns allow adding other blocks to the layout. For instance, the Login & Register Pattern consists of the following fields:

Image — upload a picture in this block;
Text Fields — there are four of them responsible for Name, Email, Password, and Confirm Password;
Select Field — user can choose a Country from the drop-down list;
Submit Field — allows to collect and submit all the input data by clicking on the button.

Let us review these blocks and their customization options.

Image block

A Register form should be made as convenient for the user as possible. Customizing a picture is a good starting point.

Default Style — a style put by default can be chosen from the “Default” or “Rounded” options. You can also leave it unset;
Alt text — write the description of the image;
Width and height — type values manually or set a percentage that will automatically crop the image.

You can also check Advanced settings that include additional customization options.

Text field block

WordPress registration form is all about the input data. So Text Field is, therefore, a very functional feature. Let’s take a closer look at its settings.

Field Label — a name that acknowledges the user about the type of needed information. As an example, it can represent a Username, Password, or any other data;
Form field name — a slug name that becomes an ID. Traditionally, it can replicate or correspond to the Field Label. It should comply with all the requirements, containing only Latin lower case letters, numbers, hyphens, and underscores. Another rule is not to use spaces, so if you need to write more than one word, you can divide them with hyphens or underscores;
Field Description — supplemental information that will appear under the field. This description should be about what users need to write in the field;
Default Value — can pull out user information that already exists. For instance, if the user is logged in, you can set their email that has already been saved. However, it is not so valuable if we create a Register Form as its primary function is to register a user, information about whom is not known yet;

Field Type — define the kind of data that should be written in the field. There are five options such as “Text,” “Email,” “Url,” “Tel,” and “Password”;
Min and Max length — specify the number of characters that can be put in the field;
Set Input Mask — change the default input format into the specific one, pick a Mask Type, its Visibility, and Placeholder.

Placeholder — default example data that is displayed until the user clicks on the bar. It differs from the Default Data, as this text is not input information;
Add Prev Page Button — enable it if Form Break Field is used. It lets a user return to the previous page;
Field Visibility — make this field visible to all, only to logged in or not-logged users;
CSS Class Name — type in a CSS class name to pull off style from the customizer.

You may also need to make the fields required to fill in. There is such an option when it comes to the Text and Select Field blocks of this Pattern.

Just click on the block in the editor and enable the Is Required option.

Select field block

This block lets the user choose from the diverse drop-down menu options. The selection proposed by this layout is Country, but you can change it or delete this block if you don’t need it.

Let’s begin editing from the block’s settings. They are practically the same as the Text Field Settings. You can read about them earlier in this tutorial.

There are the default options available in the drop-down list. Nevertheless, you can edit or delete them and create new options that suit you best.

Fill Options From — choose from the “Posts,” “Terms,” “Meta Field,” and “Glossary” options, generate them dynamically or input manually;
“Manage Items” button — change, add new, delete, or clone options;
Switch page on change — enable switching the page when changing the items.

Submit field block

Submitting a WordPress form is the final and the most crucial thing in the registration. Editing this button will take just a couple of minutes.

The settings of the button repeat some of the Text Field block settings. You can return to their description in this tutorial.

After editing all the block settings, you may want to style them accordingly. Gutenberg forms have no styling options, so you may want to use the JetStyleManager plugin to style the Register Form.

JetForm Settings

Except for the standard block settings, you can edit JetForm settings that apply to the whole WordPress form.

It is significant to edit them setting identical customizations to all the Register Form blocks. You can find them near the block settings.

Fields Layout — pick how the field bar and the field label will relate to each other. You can set “Column” or “Row” options. In the first case, the label will be displayed over the bar, while the second will put the label and the bar in one row;
Required Mark — you can either leave this field empty to represent required fields with an asterisk symbol or set another mark;
Submit Type — specify what action will be carried out after pressing the “Submit” button. Choose between “Page Reload” and “AJAX” that will not reload the page;
Enable form pages progress — toggle it on if you work with the Form Break Field. If the form is divided into parts, the progress bar will be adjusted. This bar will show which part of the form the user is currently on.
Captcha Settings is also an option for the Register Form creation. We already have a tutorial about adding reCAPTCHA that you can check on the Crocoblock YouTube Channel.

When moving on to Post Submit Actions, pay attention that you need to choose the “Register User” option as we create Register Form. You can edit this action by clicking under the drop-down menu. Read more about Register User Submit Action in our tutorial.

Besides, you can add one more action. For instance, send an email when the user has been registered. Watch the following Post Submit Actions overview to find out more about other options.

Preset Settings let you choose the source for a global form preset, and General Messages Settings are responsible for different types of notifications. These will be shown in specific cases that can emerge while completing a form.

When you are done with all the form customizations, click on the “Publish” button, and feel free to add the Register Form to the page.

You can add a JetForm block in the Gutenberg editor or create an Elementor registration form using the JetForm widget.

Choose the form that you have just created and proceed to the following settings. You may notice that these settings were already adjusted in the JetForm block settings. So if you have already customized them, there is no need to do it again, as the JetForm block settings take precedence over them.

For example, you can change the Fields Layout into “Row” in the page editor. Still, if the “Column” was applied while creating a form, it will also be displayed on the page.

Click on the “Publish” button once you are done with editing. There you go, the WordPress registration form is ready.

Creating a Registration Form From Scratch

Above, we described the way to create a Registration form using Patterns. You can build your layout with field blocks if you wish to create a fully custom registration form without using ready-made templates.

The first step is adding a new Form. Navigate to JetFormBuilder > Forms > Add New.

The editor already has some default blocks: a Hidden field, a Text field, and a Submit field. You can customize them according to your needs or remove them.

There are four obligatory fields in a Register form – User Login, Email, Password, and Confirm Password fields. These are required fields for the Register User post-submit action. Let’s start building the form by adding them.

First, add a Text field block (or use the existing one) and proceed to the Block settings in the right sidebar. Add a Label to this block and a Value. Other block settings are optional. Find a detailed description of each option in the Text field guide.

Then, add another Text field block for the email address. Give this block a Label and a Value, and scroll down to the Field Settings section. For the Field type, choose “Email” to add validation for this input type. The rest of the settings are optional.

After that, add two more Text field blocks. Give the first block a label of “Password” and the second block a label of “Confirm Password”. Select “Password” as the Field type to ensure security.

Finally, add the Action Button block that will allow the user to submit the form. Give it a custom label.

Now, all the required fields are complete. You can continue adding different field types to the form if you need the user to provide additional information. For example, you could add a Media field, a Radio field, a Checkbox field, or a Select field to your form. Learn more about the multi-optional fields from our Multi-Optional Field Source Settings tutorial.

After you finished building the form layout, proceed to the JetForm settings tab in the right sidebar and find the Post-Submit Actions tab. Press the “New Action” button to add a “Register User” action. This action will be responsible for registering the user after successful form submission. You can edit it by clicking the pencil-shaped button. Read more about configuring the Register User action in our tutorial.

In addition to registering the user, you may want the form to perform any other actions. Click the “New Action” button to see the list of all available actions. For example, you can send an email to the registered user with the help of the Send Email action.

Mind that all the actions are processed in the defined order. Therefore, each subsequent action is performed only under the condition that the previous action was processed successfully. If one of the actions returns an error, all the subsequent ones are canceled. In this way, the guest user will receive an email right after registration. The email will not be sent if something goes wrong during the registration process.

In the end, style the form. Gutenberg blocks have no styling options by default, but you can use our JetStyleManager plugin to style the Register Form.

Adding a Payment Gateway to the Register Form

In case you build a website with paid memberships, adding a payment option to the registration process is a must. All the currently supported gateway options by JetFormBuilder forms are covered in our guide on “How to Configure Payment Gateways”. A gateway is triggered once the user submits the form.

After you have enabled and configured the payment gateway, you need to decide how the rest of the post-submit actions will be processed with regard to the payment status. For instance, you may want the registration process to run only after a successful payment; at the same time, you may need a custom email to be sent in case of a failed payment.

All of this is handled by Events. By adding Events to the post-submit actions, you configure the scenario that will be performed before payment is processed, on successful and failed payments.

To add an Event to your post-submit action, click on the Edit Conditions & Events button.

In the popup, proceed to the Events Match tab. Select one or several events from the dropdown.

DEFAULT.PROCESS – this is the moment when actions are processed. The current event will trigger the post-submit action before the payment gateway.

BAD.REQUEST – this event is executed after request processing in case some of the fields in the form return errors. For example, the action will be triggered if the user uploads a file to the Media field in the wrong format or if the user exceeds the allowed number of files to upload. This event bypasses the DEFAULT.PROCESS event.

DEFAULT.REQUIRED – this event is executed in any case. It is the last triggered event before the form response is submitted. The event runs even in case other post-submit actions are not processed successfully. Note: if you set the DEFAULT.REQUIRED event to several actions, and one of your actions is the Store Form Record action. Make sure to put the Store Form Record action the last in the row.

GATEWAY.SUCCESS – this one is executed after the user passes the checkout on the side of the payment system; if a payment is successful, the action will be triggered.

GATEWAY.FAILED – It is performed when the user returns from the checkout page of the payment system without making a payment.

Note that the Store Form Record action does not require any Event.

So, most probably, you will want to register the user only after a successful payment. This workflow is provided by the GATEWAY.SUCCESS event. However, once you add the GATEWAY.SUCCESS event on the Register User action, you will see a message notifying you that the action will not be successfully executed if you use a Text field with a Field type set to “Password” for your Password fields.

This means that the Register User action cannot work with the GATEWAY.SUCCESS event due to security reasons.

However, there are two possible workarounds for this case.

Promoting the user after successful payment

To make the users register only after successful payment, you will need to split the registration process into two parts. Before payment is complete, the guest user will be registered as a Subscriber (or any other role with limited capabilities); after the payment is complete, the user will be promoted to a higher user role. To implement this kind of workaround, follow the steps below.

Firstly, create a custom user role with limited access for users who haven’t finished the payment process. The permissions you grant to this user role depend on your business strategy. Alternatively, you can use the default WordPress Subscriber user role. In our example, we will stick with the Subscriber role.

After you decide on the user role that will be suitable for your business model, edit the “Register User” action by clicking on the pencil-shaped button underneath.

Change the role of the newly registered user to your custom role or “Subscriber.”

In the same editing screen, scroll down until you find the Log In User after Register and Add User ID to form data toggles. Enable these toggles to be able to use the ID of the newly created user in further post-submit actions.

Update the changes. Then, click on Edit Conditions & Events under the “Register User” action. Switch the GATEWAY.SUCCESS event to the DEFAULT.PROCESS event. Now, a new user will be registered regardless of the payment status.

After that, hit the “New Action” button and select a further action – Update User. This action will run after the successful payment. Click the pencil-shaped button under the Update User action to edit the post-submit action.

In the Fields Map section, map the “user_id” field with the “User ID (will update this user)” action. In this way, the action will update the user role of the newly registered user. Then, define the user role the customer should receive after the payment.

After you save the changes, the last step would be to give the Update User action a GATEWAY.SUCCESS event.

As a result, the form will function by this workflow: after submitting the form, the user is registered as a lower-ranked user with limited access. Then, the user goes through the payment process, after which the user is promoted to a higher user role, and the registration is complete.

Generating the password automatically

Another possible way to integrate the Register User action with a payment gateway is to generate the user password automatically after successful payment. In this case, the user will not be able to set a password manually because the password will be autogenerated. This workflow involves a custom coding solution.

Firstly, copy the code from the GitHub page. Add this code snippet to the functions.php file of your currently active child theme. Note that any customizations should be added only to a child theme; if you don’t have a child theme, you need to generate it. To add a code, head to your WordPress Dashboard > Appearance > Theme File Editor > functions.php and paste the code snippet.

Now, return to the form editing screen. Add a Hidden field block before or after the existing fields. Choose the “Generated Password” option as a Field Value.

A Hidden field block is a block that will be hidden from the user on the front end. The previously added code snippet will generate a new password after the user completes the payment successfully and will use this hidden field to store it. Mind that the password will be generated only after a successful payment, which makes it impossible for anyone from the outside to access it and makes the process completely secure.

In this case, you can remove the Text field blocks with the “Password” field type because the password will not be defined by the user.

Then, click the pencil-shaped button under the “Register User” action. In the editing screen, map the Password and Confirm Password fields with the newly created Hidden field.

Save the changes. Since the “Register User” action should only be performed after successful payment, give it the GATEWAY.SUCCESS event.

You will notice that the red notification message is still present. However, if you follow the instructions carefully, the action will be appropriately executed after payment is complete. The last step would be to send the registered user an email with the generated password. For this purpose, add a new “Send Email” action and configure the settings – for the Mail To field, choose the “Email from submitted form field” option; for the From Field, select your Email field; then, fill in the rest of the required fields according to the Send Email action guide.

In the Content field area, add a message that the user will receive after a successful registration. Don’t forget to include the generated password with the help of a macro.

To finish the setup, give the Send Email action a GATEWAY.SUCCESS event. Don’t forget to click the “Update” button to save changes.

Register Form

Contents:

Why You Need a WordPress Register Form

Top WordPress Register Form Features

WordPress Form Pattern Structure