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.

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.

This tutorial will provide all information about settings in the JetFormBuilder’s form to update the Repeater field type.

Check the Repeater Meta Field

Initially, check whether there is a filled-in “Repeater” meta field for some object which can be updated using the front-end form.

For example, we previously created a Meta Box for users, where a user can fill in information about education. Check how to apply Meta Box to users.

repeater fields for the user

Then complete these fields, so the values can be updated later.

completed repeater fields for user

Add the Repeater Field in the Form

Now we can work on the form created using the JetFormBuilder plugin to update the user repeater field.

In the form, we added a Hidden Field with the “Current User ID” as a Field Value since the form will update the repeater field values of the current user.

current user id field value in the hidden field

Then add the Repeater Field itself.

NOTE

In the Repeater Field, we wrote its name as “_education” since the name of the repeater field in the form must be the same as in the Meta Box.

By clicking on the plus icon inside of the Repeater Field, the fields can be inserted.

repeater field plus icon

In the user’s “Repeater” meta field, the “Text” and “Date” fields are used. Therefore, we add the fields of these types to the form accordingly. These fields must also have the field names as written in the meta box.
For example, this “Text” field has the “_employee-education-institution” name in the Meta Box.

text field name

This is why we copied the meta field name and inserted it into the form field name of the “Text” field in the Repeater in the form. The same was done for other fields in the form.

text field in repeater

All the fields are added with the field names as in the user Meta Box, and we can proceed with other settings.

Set Up a Preset in the Form

Now, we should Enable the preset in the Preset Settings of the form. The Preset allows loading of the existing values in the user Meta Box into the fields of the form, so a user can see which values are updated in the fields.

enable toggle in the preset settings section

In the Preset Settings, a source should be selected as “User” because we update a user’s data.

The Get User ID From needs to be set to “Current user” so the form pulls the data of a currently logged-in user.

The user_id field is mapped to the “User ID” property.

As for the _education repeater form field, it is mapped to the “User Meta” and “_education” repeater meta field, so the meta data is pulled from there. The inner repeater meta fields do not need fields selected in the preset. Just presetting the repeater field is enough.

adjusted preset settings

Configure the Post Submit Action

Lastly, we should configure the “Update User” post submit action.

To do so, go to the Post Submit Actions tab. Add an “Update User” action, and click the pencil icon to edit its settings.

In the user_id field, select the “User ID (will update this user)” option.

And map the _education field to the User Meta – “_education”.

This way, the values from the form fields will be added to the user meta fields.

edit action pop-up

Hit the “Update” button to save the action settings and update the form.

Check Results on the Front End

Check the result on the front end. We can see the form presets the data from the “Repeater” field of the current user successfully, and now we can edit this data.

completed form on the front end

Let us change the dates in the Education start/end “Date” fields and add the country name in the City, country field.

info changed in the form fields

 After editing the fields, we can submit the form.

form successfully submitted message

Check the User meta fields now. We can see the values have been updated in the fields that were edited via a front-end form. The form successfully updates the meta fields in the Repeater in the user Meta Box.

updated meta fields

That is it; now you know how to update a JetEngine’s “Repeater” meta field values using the front-end form built with the JetFormBuilder plugin.

A default Checkbox Field available with the JetFormBuilder plugin can complete a WordPress form with several options for selection. 

However, it can become a more refined version when you transform a block into the Advanced Choices Field block. 

Let’s go through the customization process.

Table of contents:

Customizing Checkbox Field

Open the existing form in the WordPress Dashboard > JetFormBuilder directory. Or, press the “Add New” button to build a new form.

If you haven’t added a Checkbox Field beforehand, you can find it in the block inserter or by typing the “/” symbol right in the form.

adding a checkbox field

Once added, adjust the Checkbox Field settings located on the right side of the screen.

Now move to the block in the form itself. The “Manual Input” source is set as default for the field. You can change it if needed.

Press the “Manage Input” button to open additional settings.

checkbox field manual input

Here, add desired items by completing the Label and Value fields. You can also fill in the Calculate field if needed.

Click the “Add New Option” to create an additional field option whenever needed.

edit manual options pop-up

After building the desired options, push the “Update” button.

manual options added

Migrating from Checkbox Field

Now, you can upgrade your Checkbox Field by clicking on it and the first icon in the toolbar above the field.

Here, you can pick the block into which you want to transform the Checkbox Field. Among the options are default Columns, Text Field, Conditional Block, Radio Field, Select Field, or Group.

Now, we select the Advanced Choices Field.

NOTE

Mind that not only Checkbox Field can be transformed into other fields, but also Radio and Select fields.

transform to advanced choices field

The block is transformed and can be modified according to the Advanced Choices Field block settings.

transformed checkbox field

Except for the Choice Control block, other blocks can be added in the Advanced Choice box.

NOTE

The exception is JetFormBuilder fields; they can’t be added to the Advanced Choice block.

Hit the plus-shaped button to select the block to add. For instance, we pick the Image block, but you are free to choose any other blocks.

add block window

Once you upload the image, you can put it above the Choice Control block by pressing the arrow-shaped “Move up” or corresponding “Drag” button.

image block added to advanced field

We also add a picture to the second option, and now the advanced Checkbox Field is ready.

customized advanced field block

Now you know how to transform the default Checkboxes form field into the desired fields with the JetFormBuilder plugin.

Turnstile Captcha lets you make user verification via WordPress form possible and, moreover, easy. In addition, the whole customization process takes minimum effort with the JetFormBuilder plugin.

Create Turnstile Keys

Initially, open the Cloudflare Turnstile website and press the “Sign Up/Log In” button to log into your account.

cloudflare turnstile starting page

Now that the dashboard is open, find and press the Turnstile option in the sidebar.

cloudflare dashboard

In the Get started section, click the “Add site” button to open a CAPTCHA editor.

add turnstile site

Complete the Site name field to identify the website where you will be using CAPTCHA.

Then, specify a Domain so the CAPTCHA will be connected to the particular domain. Here, you can specify several options if needed.

site name and domain fields

In the following Widget Mode radio field, you can pick the level of CAPTCHA interaction. 

Pick “Managed” to let Cloudflare decide if an interactive challenge should be used or not in a particular case, “Non-interactive” to make the widget run itself, or “Invisible” to make verification invisible for the user.

In the described case, we pick the “Managed” option.

Push the “Create” button to finish the setup.

widget mode field

Straightaway, you will see generated Site Key and Secret Key. There are also “Copy” buttons next to these fields for user convenience.

turnstile site key and secret key

Adjust Global Settings

Head to WordPress Dashboard > JetFormBuilder > Settings and open the Captcha Settings tab. 

Unfold the Turnstile section to access its settings. They are called global because the changes applied here can be later pulled globally for all the needed JetFormBuilder forms.

As for the fields themselves, the Site Key and Secret Key are available for completion. Here, paste the keys generated beforehand.

Once keys are pasted into the corresponding fields, make sure to press the “Save” button.

turnstile settings

Create/Edit Form

Proceed to WordPress Dashboard > JetFormBuilder > Forms. Here, you can select the already built form for editing or create a new form by pushing the “Add New” button.

jetformbuilder forms directory

You can build a form according to your needs with the various fields available with JetFormBuilder.

Then, open the JetForm settings tab and scroll down to Captcha Settings.

In the Captcha Provider selector, pick the “Turnstile” option to open further settings.

captcha provider selector

Here, you can activate the Use Global Settings toggle to use the keys we have entered before. Or, paste the Site Key and Secret Key manually right for this exact form.

turnstile captcha settings

By default, the Turnstile Captcha is located before the “Submit” button of the form. However, if you want to change its position in the form, press the “Add Turnstile block” button.

NOTE

You can also find this block in the default block search in the form by pressing the plus-shaped button in the editor.

With this button, a Turnstile block is added after the “Submit” button, but you can drag it to place in any needed place of the built form.

add turnstile block button

For instance, you can put the Turnstile block next to the “Submit” button if desired.

NOTE

Also, make sure that the icon in the block should be left as “Turnstile.” If you click on any other icon, the Captcha provider will be changed automatically.

turnstile block icon

Press the “Publish/Update” button to save the form.

Place Form on the Page

Now it’s time to decide where to place the form itself. For instance, it can be a default page built with Gutenberg or Elementor, JetPopup item, or JetThemeCore template.

For example, we will place the form on the usual Elementor page. To do so, we navigate to WordPress Dashboard > Pages and press the “Add New” button. Here, we select Elementor as a primary editor and move on to customizing.

wordpress pages directory

Add the JetForm widget/block onto the page. Pick the newly created item in the Choose Form field.

You can adjust further settings if needed. Press the “Publish/Update” button.

jetform widget in elementor

Check the Result

Open the published content on the front end to check if the form works.

captcha form on front end

Complete the fields and a captcha. Let’s check what will happen if you fail:

failure captcha

And the result for a captcha success will look like this:

success captcha

Now you know how to add the Turnstile Captcha to the WordPress form built with the JetFormBuilder plugin.