Register Form

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

Contents:

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.

  • 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.
  • 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.

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.

wordpress login and registration form pattern

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.

wordpress form image styles settings
  • 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.

form text field general 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;
text field settings
  • 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.
text field advanced settings
  • 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.

select field settings
  • 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.

jetform
  • 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 Gutenberg editor or create an Elementor registration form using the JetForm widget. 

jetform block form settings

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.