The JetFormBuilder plugin provides the JetForm block for Block Editor, JetForm widget for Elementor, and JetForm element for Bricks Builder to help you display a ready form on the front end. Let’s take a closer look at their settings. 

JetForm Block in Block Editor

The Form Settings tab of the JetForm block consists of the following options:

jetform block settings
  • FIELDS LAYOUT — defines the positioning of the input field and its label. The layout can be set to the default “Column” or the “Row” option. In the first case, the label will be displayed over the input, while in the second one, they will be in the same row;
  • REQUIRED MARK — sets a symbol that will mark mandatory fields. The field can be left empty to mark required fields with an asterisk symbol;
  • FIELDS LABEL HTML TAG — one can select between “DIV” and “LABEL” HTML tags for the representation of the field label. The default tag is “LABEL”;
  • SUBMIT TYPE — defines how to process the Post-Submit Actions after the Action Button (formerly Submit Field) is pressed. If the “Page Reload” option is selected, the page will be reloaded after form submission; if “AJAX” is set, the page won’t be reloaded, and the post-submit message will appear immediately;
  • Enable form pages progress — this toggle can be enabled to display a progress bar with a step indicator at the top of the form. It is recommended to enable form page progress if the form is divided into several steps with the Form Break Field.

The Advanced tab presents the default WordPress settings:

advanced settings of the jetform block of jetformbuilder
  • BLOCK NAME — sets the block name;
  • HTML ANCHOR — allows a text string without spaces. An anchor makes it possible to link a specific section where the current block is located, so when the users follow the URL, the page is scrolled down or up to this block;
  • ADDITIONAL CSS CLASS(ES) — here, one can input one or several CSS classes to target the block easily with custom code.

The “Form Block Style Settings” guide explains how to style JetFormBuilder blocks with the help of the JetStyleManager plugin.

JetForm Widget in Elementor

The widget presents a Form Settings tab with a list of settings:

jetform widget settings in elementor
  • Choose Form — a drown-down list of form titles. Here, one should select the form to display;
  • Fields Layout — defines the positioning of the input field and its label. One can opt for the “Column” layout, the default setting, or choose the “Row” layout. In the first case, the label will appear over the input field, while in the second, they will align within the same row;
  • Required Mark — sets the symbol to indicate mandatory fields. By default, required fields are marked with an asterisk symbol;
  • Fields label HTML tag — one can select between “DIV” and “LABEL” HTML tags to represent the field label. The default tag is “LABEL;”
  • Submit Type — the “Page Reload” option makes the page reload after form submission, and the “AJAX” option prevents page reloading;
  • Enable form pages progress — shows a progress bar featuring a step indicator at the top of the form. Enabling form page progress is appropriate if the form is segmented into multiple steps using the Form Break Field.

JetForm Element in Bricks Builder

The FORM SETTINGS toggle unfolds the following settings:

jetform element settings in bricks builder
  • Choose Form — here, one should select the title of the form, which should be displayed;
  • Fields Layout — defines how the input field and its label will be positioned. The “Column” layout is the default option, which makes the field label display over the input field. The “Row” option aligns them within the same row;
  • Required Mark — in this field, one can specify a symbol to mark the required fields in the form. By default, required fields are marked with an asterisk symbol;
  • Fields label HTML tag — the HTML tag, which will represent the field label — “DIV” or “LABEL.” The default tag is “LABEL”;
  • Submit Type — defines the behavior of the form after the Action Button (formerly Submit Field) is clicked. The “Page Reload” option reloads the page after form submission, and the “AJAX” option prevents page reloading;
  • Enable form pages progress — shows a progress bar with a step indicator at the top of the form. Enabling form page progress is recommended for multi-step forms that use the Form Break Field.

That’s all about the JetForm settings available with the JetFormBuilder plugin for your WordPress website.

The Change Render State block is a form button that lets users toggle between different states of the same form. For example, the first render state can represent a form for registration, while the second render state can represent a login form. The user will be able to switch between these two states by toggling the “Change Render State button.

Field Settings

To add the Change Render State block to a JetFormBuilder form, one needs to follow the WordPress Dashboard > JetFormBuilder path and press “Edit” under one of the existing forms or create a new form by pressing the “Add New” button in the top left corner.

One should find the Change Render State block and drop it in the needed place.

using block inserter in block editor to add the change render state field

The current Change Render State button can be switched to one of the following transformation options:

change render state field transform buttons
  • Action Button — a button to submit the form;
  • Next Page — a button that leads the user to the next page in a multi-step form;
  • Prev Page — a button that leads to the previous page in a multi-step form;
  • Change Render State — the current state button.

General settings

This tab contains a single field called FIELD LABEL for inserting the text to be displayed on the button.

change render state field general settings

Change Render State settings

The SWITCH STATE drop-down menu in this tab provides options for changing the button’s state. The default option is “DEFAULT.STATE.”

selecting render state in the change render state field

Additional states can be manually added within the settings of the Conditional Block. When choosing the “Is render state” condition in the Conditional Block field, the plus-shaped button should be pressed to add a new custom state.

add new render state in conditional block settings

Advanced settings

The Advanced tab consists of the following fields:

change render state field advanced settings
  • Add Prev Page Button — adds the functionality of the Prev Page button, which leads the user to the previous step in a multi-step form;
  • CSS CLASS NAME — a custom class can be inserted in this field to style the block further with additional CSS code.

Style Settings

The Change Render State block can be styled with the help of the JetStyleManager plugin. Once the plugin is installed and activated, the brush-shaped icon appears in the top right corner. After clicking the icon, one will see a new section of style settings. 

Two of the styling tabs are the Submit Wrap and Action Button. Inside these tabs, one can customize the block’s Alignment, Border, Color, Margin, Padding, Typography, and more.

change render state block style settings

That’s all about the Change Render State field available with the JetFormBuilder plugin for WordPress websites.

A Sanitize value feature helps to validate the data put in the form. It works immediately once the form is submitted and is available for Text and Textarea Fields from the JetFormBuilder plugin.

In this tutorial, we will use Text Field as an example. However, feel free to use Textarea Field if needed.

Create a Form with a Text Field

Initially, the Text Field should be placed in the form. So, proceed to WordPress Dashboard > JetFormBuilder > Add New

We will delete the default Hidden Field and search for the Text Field.

The “Sanitize value” button can be found if you click on the Text Field.

sanitize icon in the text field settings panel

After pressing the “Sanitize value” button, a list of sanitizing options is displayed.

sanitize data options for the text field

Set Up the Form

The next step is adjusting Post Submit Actions in the JetForm settings tab.

Once opened, choose the “Insert/Update Post” option and press the pencil-shaped button to edit the action.

insert update post submit action

With the help of the newly opened Edit Action pop-up, we can configure the form to add a new post and complete its content with the value we put in the Text Field.

Select the desired POST TYPE. For instance, we pick the default WordPress “Posts.”

Pick the needed POST STATUS.

The FIELD MAP area contains all the fields from the form. Now, we have one Text Field and set it to be connected to the “Post Content” to demonstrate the result of the sanitized value in the post. However, you can choose any desired option.

To save the changes, hit the “Update” button.

edit action pop-up

That’s all about the basic form adjusting. Now, let’s look through all the “Sanitize value” options.

Adjust the Sanitize Value Options

Select one or several desired options in the Sanitize value list. 

Let’s look through the available options.

Sanitize email

This option clears all the characters that are not allowable in the email address.

sanitize email feature

Let’s assume you need this option. So, once the form is ready, press the “Publish” button.

Then, we go to WordPress Dashboard > Pages and press “Add New” to create a new page.

Search for the JetForm block and add it to the page. 

After selecting the needed Form from the list and adjusting the form, click the “Publish/Update” button.

jetform block on the page

Then, open the page you have just built and complete the field with data.

For instance, our email input looks like: “[email protected]!.”

incorrect email in the form

Now we go to WordPress Dashboard > Posts, as here, in our case, the new posts will be displayed. Then, we open the latest post to check the content. So now it is set to “[email protected].”

sanitized email

Sanitize key

This feature can be used for validating keys like post slugs or category names. It ensures that input data is safe to use in URLs or other contexts. 

Lowercase alphanumeric characters, dashes, and underscores are allowed.

sanitize key feature

For instance, we put the “New Car!” value and submit the form.

incorrect key in the form

The content in the post will be changed to “newcar”.

sanitized key

Sanitize text

A text sanitizing process includes checking for invalid UTF-8, converting “less-than” (“<”) characters to an entity, stripping all tags, removing line breaks, tabs, and extra whitespace, and removing percent-encoded characters.

sanitize text feature

The user can complete the form with something like: “<b>My name is <i>Dave</i></b>.”

incorrect text in the form

After the sanitizing process, the data will look like this: “My name is Dave.”

sanitized text

Sanitize textarea

It is similar to the “Sanitize text” option. However, it doesn’t clear new lines and whitespaces as they are considered normal for textarea fields.

To see the difference, let’s change the Text Field to Textarea Field.

sanitize textarea feature

So, it’s better for the text that includes several lines. For instance, the user writes a letter in the text area that looks like this:

“Hi!

<p>I am inquiring about the status of <b>my order</b>. When can I expect it to be delivered?</p>

Thank you.

John.”

incorrect textarea in the form

As you can notice, new lines (\n) are put in the text. If we used “Sanitize text” instead, the new lines would not be preserved:

“Hi! I am inquiring about the status of my order. When can I expect it to be delivered? Thank you. John.”

sanitized textarea

Sanitize title

Sanitizes string to a slug, which can be used in URLs or HTML attributes.

sanitize title feature

We put the “My Article” title in the field.

incorrect title in the form

The content is now sanitized to “my-article.”

sanitized title

Sanitize url

This option sanitizes the URL for redirect usage. It helps avoid issues with special characters that are not allowed in the links.

sanitize url feature

For instance, we put the “product-id-932-car” value in the Text Field.

incorrect url in the form

The value will be sanitized to “http://product-id-932-car.”

sanitized url

Sanitize user name

This option can be used for user names accordingly. It clears all the unsafe characters like tags, percent-encoded characters, or HTML entities.

sanitize user name feature

We complete the field in the form with the “User%231” value.

incorrect user name in the form

So, the content will be changed to “User1.”

sanitized user name

Custom transform

If this option is selected, the additional field for completion appears. It allows adding custom sanitizing code if needed.

For instance, we complete the field with the “full_name” value. According to this custom value, the content will be returned as first and last name.

custom transform feature

To make it work, we also go to WordPress Dashboard > Appearance > Theme File Editor, open the Theme Functions (functions.php) tab, and paste the following code at the end of the file:

/**
 * Full Name sanitizer.
 * Value returned be in such format: FirstName LastName
 *
 * @param \JFB_Modules\Block_Parsers\Field_Data_Parser $parser
 */
function jet_fb_sv_full_name( \JFB_Modules\Block_Parsers\Field_Data_Parser $parser ) {
   $value = $parser->get_value();

   // Delete not-allowed characters & html-tags
   $value = sanitize_text_field( $value );

   // Get separated first name and last name
   $names = preg_split( '/[\s]+/', $value, 2 );

   // Not enough names
   if ( ! is_array( $names ) || 2 > count( $names ) ) {
      $parser->set_value( '' ); // Clear value to make this field invalid

      return;
   }

   list( $first_name, $last_name ) = $names;

   // Make a name's first character uppercase
   $first_name = ucfirst( $first_name );
   $last_name  = ucfirst( $last_name );

   $parser->set_value(
      sprintf( '%s %s', $first_name, $last_name )
   );
}

Then, we hit the “Update File” button.

This is just the case example; you are free to use the needed piece of code.

theme functions php

To see the result, we return to the page where the form is located and complete it with the “<b>John            <i>Doe</i></b>” value.

custom transform value in the form

In the post, the content will look like this: “Jonh Doe.”

sanitized custom value

That’s all about using the Sanitize value feature available for Text and Textarea Fields from the JetFormBuilder plugin for WordPress.

With the help of the JetFormBuilder plugin, it is possible to create a front-end registration form with email confirmation. To register on the site, the user should input the login and email address and follow the verification link sent to the mailbox. Once the user follows the link, the registration process is completed.

Email verification helps validate the user request before the form is submitted. Also, it makes the registration process fast and effortless — creating a password to complete the registration is not required. The user can use an automatically generated password to log in to the site in the future.

registration form with double opt-in created in jetformbuilder

Create a New Form

In the WordPress Dashboard, navigate to WordPress Dashboard > JetFormBuilder > Add New to start creating a new form. 

Enter the form name and delete the Hidden Field. To delete a field, press the button shaped as three dots and choose the “Delete” option in the drop-down list.

press three dots and select to delete the default hidden field

Add Form Fields

The form will contain two Text Fields and one Checkbox Field. The first Text Field will allow the user to enter the login, and the second Text Field will allow entering the email address. The Checkbox Field will serve as a “Remember Me” field. 

Click on the first Text Field to edit it. In the right sidebar with Block settings, enter a FIELD LABEL and a FORM FIELD NAME values.

NOTE

Mind that the FORM FIELD NAME should contain only lowercase Latin letters with no spaces; numbers, dashes (“-”), and underscores (“_”) are allowed.

For example, the label of the field can be set as “Login,” and the name of the field can be set as “login.”

add field name and field label to login field

Then, press the blue plus-shaped button in the top left corner of the screen. Search for the “Text Field” to drag and drop a new field for the email address input below the first Text Field.

search for the text field in the left sidebar

Once again, click on the new field to edit it. Provide a label and a name for the field. After that, scroll down the settings in the right sidebar to find the Field section. In the FIELD TYPE drop-down list of options, select “Email” to allow email address validation.

select email field type in text field settings

After adding the Text Fields, add a Checkbox Field below. Leave the FIELD LABEL empty and define the FORM FIELD NAME — for example, type “remember-me.”

creating remember me checkbox in jetformbuilder registration form

Press the “Manage items” button to configure the options for this Checkbox field

In the opened pop-up, click the “Add new Option” button. Complete a LABEL field — “Remember Me.” Insert “1” as the VALUE option.

configuring the remember me checkbox field

Once done, “Update the changes.

Set Up Post Submit Actions

Switch the Block settings tab in the right sidebar to the JetForm tab. Unfold the Post Submit Actions section. 

Currently, there is only one default action — the “Send Email” action. Push the three dots under the action name and press “Delete” to remove this action.

delete default send email action by clicking on three dots

Configure the “Verification” action

Click the “+ Verification button to add the “Verification” action. Only one “Verification” action can be added for each form.

add the verification action

Next, click the pencil-shaped icon under the action name to open the customization pop-up.

edit the verification action

The “Verification” action sends an email with a verification link to the specified email address. The user should press this link within the defined timeframe to complete the verification. Once the verification is complete, the rest of the Post Submit Actions will be executed.

verification action setup in jetformbuilder

Start configuring the action by entering the number of hours into the LINK LIFESPAN field. This setting defines the timeframe within which the verification link remains active. If the LINK LIFESPAN field is left empty or if “0” is entered, the verification link will not have an expiration time.

After that, choose the email field from the suggestions under the EMAIL FIELD drop-down menu. Once the email field is specified, a new toggle will appear, encouraging you to “Create custom verification email.”

create a custom verification email in verification action settings

If the toggle remains disabled, a standard email will be sent to the user from the Administration Email Address set in WordPress Dashboard > Settings > General.

standard email verification letter of jetformbuilder

Enable the “Create custom verification email” toggle and proceed to the rest of the action settings. We will set up the “Send Email” action later.

Move on to the SUCCESS PAGE and the FAILED PAGE settings. Select a page where the user should be redirected in case of a successful or failed verification. If no page is selected, the user will be redirected to the page where the form was initially submitted. It is also possible to “configure a separate Redirect to Page action” for each case.

select pages to redirect after email verification

In our example, we will redirect the user to a “My Account” page after successful verification and to a static “Verification Failed” page if the user fails to complete the verification. 

Once you finish the setup of this action, click the “Update” button to save the changes.

Set up the “Register User” action with an auto-generated password

Click the “+ New Action” button to add a new post-submit action. Change the “Send Email” to the “Register User” action. Press the pencil-shaped button to edit the action’s settings.

editing the register user action by clicking the pencil button

Firstly, find the FIELDS MAP section. Map the User Login field with the “Login” Text Field and the Email field with the “Email” Text Field. Therefore, the value entered by the user into the “Login” field will be saved as the user login, and the value of the “Email” field will be saved as the user’s email. 

Then, map both the Password and the Confirm Password fields with the “Secure unique token” option. The “Secure unique token” option is added by the “Verification” action and represents a unique password auto-generated after form submission. This way, the form lets the user sign up with only their email and login, not requiring them to create a password manually at this stage. Later, this password will be sent to the user with a “Send Email” action.

setting up register user action to work with email verification

Scroll past the FIELDS MAP section and select the User Role, which should be assigned to the newly registered user.

select user role in register user action settings

Next, scroll down to find and activate the “Log In User after Register:” toggle. This way, the user will be automatically logged in after completing the verification process. 

Select the “remember-me” Checkbox Field as the “REMEMBER ME” FIELD option. This field helps to keep the user authenticated for a longer period of time — after checking the “Remember Me” checkbox, the user will remain logged in for fourteen days; if not, only for two days.

We have finished setting up the “Register User” action. Save the settings and proceed to the next step.

enabling remember me field in the register user action to remember the user

Add a “Send Email” action for a custom verification email

Now, it is time to create a custom verification email.

Open the settings of the “Verification” action once more to click the “+ Add Send Email action” button. It will automatically add a new “Send Email” action where each part of the verification email can be customized.

Leave the MAIL TO and FROM FIELD settings intact and proceed to configure the rest of the fields.

configuring the verification email settings in jetformbuilder

After setting up the REPLY TO, SUBJECT, FROM NAME, and FROM EMAIL ADDRESS fields, select the “HTML” CONTENT TYPE to allow the processing of HTML tags in the content of the email.

Then, edit the content of the email according to your needs. It is also possible to insert Macros to retrieve the values entered by the user into the form fields. To see the list of available Macros, click the wrench-shaped icon near the CONTENT field label.

adding macros to email content in the send email action settings

The list contains general Macros that represent each form field and three special Macros added by the “Verification” action:

  • %_jfb_verification_token% — represents a unique token generated for the user. If this token was set as the user password in the “Register User” action settings, you can insert the %_jfb_verification_token% macro in the email content to send the user this automatically generated password. The user will use it to log in; 
  • %_jfb_verification_token_id% — represents the ID of the verification token in the database. A reference to each verification token is saved in the “jet_fb_tokens” database table; however, the token itself is not stored there;
  • %_jfb_verification_url% — a verification link the user receives to complete the verification process. The link contains the verification token and its ID.

We used only the %_jfb_verification_url% macro from the above list and composed such an email:

“Please confirm your registration on the site %CT::SiteName%.

<b>If this was a mistake, ignore this email, and nothing will happen.</b>

To complete the registration, click on the link:

%_jfb_verification_url%

The link expires in 4 hours!”

Click the “Update” button to close the customization window and proceed to the following “Send Email” action.

Add a “Send Email” action to send the password details

The next step is to compose an email, which will be sent to users after they complete the registration. The letter will include an automatically generated password that users can utilize to log into the site until they opt to modify it.

Press the blue “+ New Action” button to add a new “Send Email” action, and click the pencil-shaped icon under the action name to call the customization pop-up.

add new send email action

Select the “Email from submitted form field” option for the MAIL TO field. Then, pick the “Email” field in the FROM FIELD drop-down menu, which appears below.

setting up a send email action to send users an email after successful registration

After setting up the REPLY TO, SUBJECT, FROM NAME, and FROM EMAIL ADDRESS fields, select the “Plain Text” CONTENT TYPE option. To allow the processing of HTML tags in the content of the email, select the “HTML” CONTENT TYPE.

Finally, compose the content of the letter, which the users receive after they complete the registration. Include the %_jfb_verification_token% macro to send the users their auto-generated passwords.

We composed such a letter:

“Your registration on [%CT::SiteName%] is completed. Follow this link to enter your account:

https://test-site/account/

This is your temporary password: %_jfb_verification_token%

You can change the password in Profile Settings: https://test-site/account/settings/”

including auto-generated password in the email content in jetformbuilder

Once you are finished with the settings, “Update the changes.

General Messages Settings

Scroll past the Post Submit Actions settings tab and unfold the General Messages Settings. Settings in this tab allow changing the default notifications that pop up after the form submission.

Most importantly, change the default FORM SUCCESSFULLY SUBMITTED message and encourage users to check their mailbox after they submit the form. For example: “Please, check your email inbox to complete the registration.”

editing general messages settings in a registration form

Once you finish customizing the form messages, the form is complete. Hit the “Publish” button to save the result. 

Display the Form on the Front End

Head to the page or template where the registration form should be located.

If editing the page with Block Editor, use the JetForm block to display the form in the needed part of the page.

display the registration form with the jetform block in block editor

If editing with Elementor, use the JetForm widget to place the form on the page.

display the registration form with the jetform widget in elementor

For more details, follow the detailed “Adding the Form Block” guide to learn how to add the form in any page builder.

Test the Flow

Move to the front end and complete the form to register a new user. Use an email address you can access.

submitting the registration form with email verification

Check the email inbox for a new letter containing the verification link. Follow the link to complete the registration.

click the link in the inbox to complete the registration

After following the link, one should be redirected to the page previously selected in the settings of the “Verification” action. The registration is complete, and a new user is created in WordPress.

Also, the second email is sent to the user containing the password to the account.

auto-generated password is sent to the registered user in email

That’s it; you have learned how to create a registration form with a double opt-in using only the free version of the JetFormBuilder plugin.

The “Verification” action allows verifying the user’s email before processing other Post Submit Actions. The form will send an email with a confirmation link to the address entered by the user. After the user follows the confirmation link, the verification is completed, and the form is submitted successfully.

email verification action settings in jetformbuilder

Table of contents:

Verification Action Settings

The “Verification” action can be found by opening the Post Submit Actions tab of the form. To add a “Verification” action, the “+ Verification button should be pressed. 

Each form can have only one “Verification” action.

add new verification action in jetformbuilder

To edit the action, one should click the pencil-shaped button.

edit verification action

Pressing the button activates the customization pop-up.

the first part of verification action settings
  • LINK LIFESPAN — after submitting the form, the user receives an email containing a verification link. The LINK LIFESPAN setting indicates the expiration time of this verification link. Here, one can specify the number of hours during which the link stays active. If this field is left empty or contains the “0” value, the link will have no expiration time;
  • EMAIL FIELD — a drop-down list to select a form field in which the user should enter the email address. A verification email will be sent to the address entered into the selected field. If one of the Text Fields in the form has the “Email” Field Type chosen, this Text Field will appear in suggestions.
create a custom verification email
  • Create custom verification email — the toggle appears after selecting an EMAIL FIELD option. If the switcher is disabled, a standard verification email will be sent. If enabled, an Add Send Email action” button will appear, encouraging one to create a custom “Send Email action with complete control over the email settings.
select the custom page to redirect the user after email verification
  • SUCCESS PAGE — here, one of the existing pages can be selected to redirect the user after a successful verification. If no page is set, the user will be redirected to the page where the form was submitted. It is possible to configure a separate “Redirect to Page action for the same purpose by clicking on the “configure a separate Redirect to Page action link;
  • FAILED PAGE — here, one of the existing pages can be selected to redirect the user in case of a verification failure. If no page is selected, the user will be redirected to the page where the form was submitted. By clicking the “configure a separate Redirect to Page action link, a fully customizable “Redirect to Page” action can be created.

Events

Events define the time and condition under which a specific Post Submit Action should be performed. Usually, events are used with the Payment Gateways to control when the action should be executed — after or before the payment is completed.

The “Verification” action adds two new Events — “VERIFICATION.SUCCESS” and “VERIFICATION.FAILED.” These events can be added to Post Submit Actions to define which action to perform in case of a successful or unsuccessful verification. 

In a form where the “Verification” action is present, and the Payment Gateways are disabled, three events can be used:

  • DEFAULT.PROCESS — actions with the “DEFAULT.PROCESS” Event will be executed right after the form submission and before the user completes the email verification. For example, if a custom verification email is created through the “Send Email” action, the “Send Email” action is automatically assigned the “DEFAULT.PROCESS” Event
  • VERIFICATION.SUCCESS — this event fires after the email verification is completed successfully. Therefore, actions with the “VERIFICATION.SUCCESS” Event will be performed once the user clicks the confirmation link in the mailbox and the verification is successful;
  • VERIFICATION.FAILED — this event is triggered when the user fails to complete the email verification. Actions with the “VERIFICATION.FAILED” Event will run if the user follows a verification link that was already used or if the link contains an incorrect token.
NOTE

If an action is not associated with any specific Event, it will be executed after the verification is completed successfully, identically to the behavior of the “VERIFICATION.SUCCESS” Event.

To assign a new Event to a Post Submit Action, one should click the “Edit Conditions & Events button under the name of the specific action.

adding new events to post submit actions

Then, one should switch to the Events match tab in the Edit Action Conditions & Events pop-up to add a new Event.

add new post submit action event

Additional Settings for Register User Action

The “Verification” action adds new field options to the settings of the “Register User” action:

fields added to post submit actions by the verification action
  • Secure unique token — this option is usually selected for the Password and Confirm Password fields. The “Secure unique token” allows automatically generating a password for the user until the user creates a new password manually. This token can be sent to the user in the “Send Email” action using the %_jfb_verification_token% macro;
  • ID of the secure unique token — a reference to each token is saved in the “jet_fb_tokens” database table, and the “ID of the secure unique token” option represents the ID of that record in the database. The token itself is not stored in the database;
  • Verification URL — a verification link the user clicks to complete the verification process. The link contains the token and its ID.

Follow a related step-by-step guide to learn How to Create Registration Form With Email Verification from scratch.

That’s all about the “Verification” Post Submit Action available as part of the JetFormBuilder functionality for your WordPress-built forms.

The Next Page feature allows adding the form button, which separates the fields and leads to the following step of the form submission.

Field Settings

This field can be added to the JetFormBuilder form by following the WordPress Dashboard > JetFormBuilder > Add New path.

Once the block is added to the page, the settings are displayed.

Initially, there is a panel with the following transformation buttons:

next page field transform buttons
  • Action Button — button for the form submission;
  • Next Page — current state of a button;
  • Prev Page — button that leads to the previous page of the form;
  • Change Render State — changes the render state of the entire form.

General settings

This tab consists of one field called Field Label. It represents the label displayed on the button.

next page field general settings

Advanced settings

The Advanced tab consists of the following fields:

next page field advanced settings
  • Add Prev Page Button — a switcher that adds a “Prev Page button to the form;
  • CSS CLASS NAME — a field for CSS code to style the button.

JetFormBuilder Settings

The Next Page field settings can be adjusted in the WordPress Dashboard > JetFormBuilder > Settings > Options, in addition to those in the form.

Specifically, there are three toggles presented in the Form Accessibility section:

jetformbuilder settings
  • Disable “Next” button — if this option is active, the “Next” button will not be clickable until all the required fields are completed;
  • Scroll to the top on page change — once enabled, the form will automatically scroll when switching between the form pages;
  • Automatic focus — a switcher that indicates the field that has been completed incorrectly and prevents a user from going to the following page or submitting the form without fixing the mistake.

Style Settings

The block can be additionally styled with the help of the JetStyleManager plugin. If it is installed and activated, the brush-shaped icon appears in the top corner of the screen.

Among the styling tabs are: Submit Wrap and Action Button. These tabs include such settings as Alignment, Border, Color, Margin, Padding, Typography, etc.

next page field block style settings

Use Case

The Next Page field can be placed in the desired form to separate the form into parts. The ready-made Application Form pattern can serve as an example.

NOTE

Form Patterns can be found by pressing the plus-shaped button and opening the samely named tab. Here, the JetForms tab includes premade forms that can be used for certain use cases.

The Next Page field can be added after the fields to indicate the end of the form section.

next page field in the form

Another essential part of this use case is the Form Page Break. It will serve as the end of the current part of the form.

form page break field in the form

Once the form is published and added to the desired page with the help of the JetForm block/widget, it can be saved and checked on the front end.

jetform in elementor

After going through the first part of the form (and filling in the mandatory fields, if there are any), the user can proceed to the following part by clicking the “Next Page” button.

form on the front end

That’s all about the Next Page field available with the JetFormBuilder plugin.