jfb fall sale banner element
Expires in
Days
:
Hrs
:
Mins
:
Sec

The Drag and Drop File Upload block provides flexible file upload functionality for forms. It supports both drag-and-drop upload for all users and integration with the WordPress Media Library for logged-in users. Key features include image resizing and quality control before upload, as well as customizable file storage options.

The block field is available if the Drag & Drop File Upload JetFormBuilder PRO Addon is installed and activated.

The Drag and Drop File Upload block can be added by pushing the “+” button on the WordPress Dashboard > JetFormBuilder > Add New Form page.

drag and drop file upload block

The Drag and Drop File Upload block has two sections: Settings and Styles.

The Settings of the block are divided into the General, Field, Image Size & Quality, Labels, and Advanced groups of settings.

drag and drop file upload block settings tab

General Settings

Among the General settings are the following fields:

drag and drop file upload block general settings
  • FIELD LABEL 一 a text field that is intended to insert the field label;
  • FORM FIELD NAME 一 a text field that is used to insert the ID of this field. By default, this value is added from the FIELD LABEL value, but it can be changed if needed;
  • FIELD DESCRIPTION 一 a non-required text field that is intended to insert a description displayed under the field.

Field Settings

This tab contains the following settings:

drag and drop file upload block fields settings
  • USER ACCESS — a dropdown to specify what user roles can use this field;
  • Enable Drag-n-Drop Upload UI — a toggle enabled by default. Activates the drag-and-drop upload interface. Note: at least one upload method must be enabled — either this one or the Enable WP Media Library UI below;
enable drag-n-drop upload ui toggle
  • Enable WP Media Library UI — a toggle disabled by default. Enables the native WordPress Media Library interface for file uploads. This option is available only to logged-in users;
enable wp media library ui toggle
  • Insert attachment — disabled by default. When enabled, it allows users to insert uploaded files as attachments. Activating this option reveals the FIELD VALUE dropdown, where one can define how the file data is stored: as an “Attachment ID,” “Attachment URL,” “Array with attachment ID and URL,” or “Array or attachment IDs”;
  • Save uploaded files on server — enabled by default. Saves uploaded files directly on the server. Note: if the Insert attachment toggle is enabled, this option will remain active and cannot be turned off;
  • UPLOAD MODE — defines when the file is uploaded:
    • Upload on form submit — files are sent to the server only upon form submission;
    • Instant upload (immediately) — files are uploaded to the server immediately after selection.
  • MAXIMUM FILES TO UPLOAD — sets the maximum number of files a user can upload. Default value: 1;
  • MAXIMUM FILE SIZE (MB) — specifies the maximum size allowed for a single file upload, in megabytes;
  • MAXIMUM FILE SIZE MESSAGE — sets a custom message displayed to users when the uploaded file exceeds the allowed size;
allowed mime types for Drag & Drop File Upload
  • ALLOWED MIME TYPES — specifies which file types are permitted for upload. If left empty, all file types supported by WordPress will be allowed by default;
  • ALLOWED MIME TYPES MESSAGE — sets a custom message displayed to users indicating which file types are allowed.

Image Size & Quality Settings

The following settings are available under the Image Size & Quality tab:

drag and drop file upload block image size & quality settings
  • MAX IMAGE WIDTH (PX) — sets the maximum allowed image width in pixels;
  • MAX IMAGE HEIGHT (PX) — sets the maximum allowed image height in pixels;
  • IMAGE QUALITY — defines the maximum image quality, ranging from 1 to 100.

Labels Settings

In the Labels tab, the block labels can be customized.

drag and drop file upload block labels settings

Advanced Settings

The Advanced settings are:

drag and drop file upload block advanced settings
  • ADD PREV PAGE BUTTON — a toggle disabled by default. When enabled, it adds a “Prev Page” button after this field;
  • FIELD VISIBILITY — a drop-down list that allows selecting who can observe the block: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME — a field for entering custom CSS classes to style the block as needed.

Style Settings

The Styles of the block can be customized in this section.

drag and drop file upload block style settings

That’s it. Now you know how to manage the Drag and Drop File Upload settings of the Drag & Drop File Upload PRO add-on of JetFormBuilder for WordPress.

With the JetFormBuilder WordPress plugin, you can display a live character count for text fields in your forms. This feature is especially useful when you need to limit user input—such as for short descriptions, passwords, messages, or feedback fields—while giving users real-time feedback.

Table of Contents:

Creating the Form

In this tutorial, we will show you how to attach the sign counter to the password field, allowing users to see how many characters they have entered and prompting them to fill out the field to the required number of characters. For this, we use the Register Form pattern

Let’s proceed to the WordPress Dashboard > JetFormBuilder > Forms > click the “Add New Form” button or hit the “Edit” button for an already existing form. 

First, add the pattern to the form page as described in our Register User guide. In this case, we use the Texarea Field for the password.

register user form created

For the Textarea Field, we set up Advanced Validation to ensure that fewer than eight characters cannot be entered into the password field. For this, we used the following REGULAR EXPRESSION:

^.{8,}$

For more information on Advanced Validation settings, refer to the Advanced Form Validation for Separate Blocks guide.

advanced validation set up for the textarea field

Setting Up the Counter

For the counter, we need the Calculated Field to be added. Add the FIELD LABEL (e.g., “Character count”) and put the following formula into the textarea: 

%password|length%

Here, the “password” is the name of the Textarea Field whose characters are expected to be counted.

Ensure that the “as Number” option is selected in the VALUE TYPE field. 

formula added to the calculated field

Click the “Save” button once you’re finished with the form settings.

Add the Form to the Page

Now, we need to add the form to the required page. You can refer to the How to Display a Form on the Front End guide if you are unsure about the settings. 

Click the “Publish” button once you are ready. 

Check the Result

Proceed to the frontend page and try to fill in the “Password” field. We can see the counter being changed while we are entering the symbols.  

We use a too-short password as an example, so we receive a validation error message and see the real-time character count. 

character counter works on the front - too short password

However, when we enter at least eight characters, the error message disappears, and we can still see the real-time count, making the registration process even more user-friendly.

character counter works on the front - good password

That’s it. Now you know how to display a live character count for text fields in your forms with the JetFormBuilder WordPress plugin.

The Advanced Date Field block is intended to select the needed date range with the required recurrence of the events. The dates and times are stored in the site’s database in the YYYY-MM-DD HH:MM format.
On the front end, the Advanced Date Field is presented by two Datetime Fields and corresponding toggles that allow setting the recurrence rules.

the advanced date field block on the font end

The JetFormBuilder’s Advanced Date Field block is fully compatible with the JetEngine plugin’s side in the Dynamic Calendar module, as well as the JetEngine’s “Advanced Date” meta field. Therefore, the JetFormBuilder’s Advanced Date Field block is available if the JetEngine’s meta field and the Dynamic Calendar module are activated.

Due to the full compatibility with the JetEngine plugin, this block allows data to be entered into Custom Post Types via the “Insert/Update Post Post Submit Action.

Inserting the Advanced Date Field Block

This block can be added to any form by finding it in the search bar of the block inserter (the “plus” icon) and placing it where preferred.

inserting the advanced date field

Advanced Date Field Settings

The block settings are divided into two groups: Settings and Styles. The Settings tab consists of the General, Field Render Setting, Labels, and Advanced settings. 

settings of the advanced date field block

In turn, the Styles tab is intended to specify the colors and backgrounds for different field elements.

styles settings of the advanced date field block

General

The General settings are presented by the following fields:

general settings of the advanced date field block
  • FIELD LABEL ㅡ a field that allows inserting the field’s label;
  • FORM FIELD NAME ㅡ a field designed for the field’s name. This field will be filled out automatically after the FIELD LABEL is added;
  • FIELD DESCRIPTION ㅡ a non-required field intended to insert the field’s description;
  • DEFAULT VALUE ㅡ a text field that allows inserting data that will be automatically shown in the field. However, it can be changed by the user who completes the form. 

Pressing the “Dynamic Tag” icon opens the Edit Preset pop-up with the SOURCE drop-down list, which has the following options: “Post,” “User,” “URL Query Variable,” “Option Page,” and more. In turn, each selected option activates the appropriate field, allowing one to choose the needed data. Also, this pop-up includes the Restrict access toggle that allows restricting users who are allowed to edit this value. 

The required settings should be saved by pressing the “Update” button.

edit preset pop-up

Pressing the “wrench” icon next to the DEFAULT VALUE field unfolds the list of the form’s Fields, available extra macros, and filters:

list of macros and filters available
  • %CT::CurrentDate% — a macro that returns the date as a timestamp (to use this macro, the quotation marks are required as follows: ‘%CT::CurrentDate%’);
  • %CT::Min_In_Sec%, %CT::Day_In_Sec%, %CT::Month_In_Sec%, %CT::Year_In_Sec%  — the macros that return the number of milliseconds in one minute, day, month, year, correspondingly, and can be used, for example, to get the difference between dates in the needed values.

The macros can be used individually or with filters to provide calculations, return timestamps, etc. The following filters are available for the Advanced Date Field:

  • ifEmpty — a filter that returns the value passed in the argument if the macro returns an empty value;
  • length — a filter that returns the length of the string or array;
  • T — a filter that returns the timestamp and is usually used in conjunction with the Date, Datetime, and Time Fields;
  • toDatetime — a filter that gets the timestamp from the macro and formats it according to the field format;
  • addMin, addHour, addDay, addMonth, addYear — filters that add minutes, hours, days, months, and years correspondingly via an argument to a macro that returns a date or timestamp;
  • subMin, subHour, subDay, subMonth, subYear — filters that subtract minutes, hours, days, months, and years correspondingly via an argument to a macro that returns a date or timestamp;
  • setMin, setHour, setDay, setMonth, setYear — filters that set minutes, hours, days, months, and years correspondingly via an argument to a macro that returns a date or timestamp.

Field Render Settings

These settings are presented by the following drop-down and toggle:

field render settings of the advanced date field block
  • RECURRENCE FORMAT — a drop-down list that allows setting the required recurrence rule and has two options:
    • Recurring Rule — a default option that, if selected, displays the Is requiring toggle on the front end to set the recurrence rule by selecting the needed day, week, month, etc.;
    • Manual Input — an option that, if selected, displays the “+ADD DATE” button(s) on the front end to choose the needed date(s) manually;
  • Allow timepicker — a toggle that enables the time picker;
  • SAVE AS — a drop-down list that allows saving the dates in the “Date” or “Timestamp” formats.

Labels

These settings are a set of text fields to insert the labels that will be shown on the front end on the corresponding fields or toggles: START DATE, HAS END DATE, IS RECURRING?, REPEAT, RECURRING LABEL DAILY, RECURRING LABEL WEEKLY, and more.

labels settings of the advanced date field block

Advanced

The Advanced section includes the following fields:

advanced settings of the advanced date field block
  • Add Prev Page Button ㅡ a toggle that enables the PREV PAGE BUTTON LABEL, a field for inserting text that will be displayed on the corresponding button (if added);
  • FIELD VISIBILITY 一 a drop-down list that allows selecting who can observe the block. It includes the following options: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

The JetFormBuilder Plugin: Looking Through Advanced Settings tutorial explains how to configure the Advanced settings. 

Style Settings

The Style settings are intended to set the colors and backgrounds for the Toggles (e.g., “Thumb Color,” “Track Background,” “Track Checked background”), Weekdays Switcher (e.g., “Border Color,” “Day Text Color,” “Day Background,” “Day Checked Background”), and Manual Add Date (e.g.,”Color” and “Color Hover”).

setting colors with the styles settings of the advanced date field block

Also, the free JetStyleManager plugin allows more customization of the Alignment, Border, Color, Margin, Padding, and Typography settings of the Advanced Date Field.

jetstylemanager settings

That’s it. Now you know how to use the Advanced Date Field block of the JetFormBuilder plugin for WordPress and manage its settings.

With the User Login Action Addon from the JetFormBuilder WordPress plugin, you can not only identify registered users and let them log into the system, but also reset their passwords, according to the validation rules.

https://www.youtube.com/watch?v=lxW5d0tvUro

Table of Contents:

Installing and Activating the User Login Action Addon

To install the add-on:

  1. Go to WordPress Dashboard > JetFormBuilder > Addons tab and find the User Login Action addon in the All Available Addons section.
  2. Press the “Install Addon” button, and once installed, it will appear in the Your Installed Addons section.
  3. Click the “Activate Addon” button.
jetformbuilder addons tab

Creating a New Form

NOTE

Please note that you can use the pre-set Login Form template. Make sure that the User Login Action addon is installed; the form will not work without it.

In this case, we built the form from scratch. Navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to create a new form.

The new form will be opened in the Gutenberg block editor. 

Press the “Start from scratch” button in the Welcome block to create your custom form. 

The Welcome block will be closed, and the Hidden Field, the Text Field, and the Action Button will be added by default.

Type the form’s name instead of the “Add title” placeholder. Also, check how to build forms from the Form Creation tutorial.

jetformbuilder default form

Building a Login Form

In this case, we started with the creation of a Login Form part. 

First of all, add the Conditional Block. Inside the block, we added a Heading Field and two Text Fields — one for the username and the second one for the password. In the Heading field, we typed “Log In”.

heading, username, and password text fields added to the login block

In the settings of the “Password” field, in the right-side tab, select the “Password” FIELD TYPE.

‘password’ field type selected for the password text field

Also, we added the Checkbox Field with the “Remember me” option.

‘remember me’ checkbox field added

Then, we added the Action Button and changed its label to “Log In”.

Render state for login form

Now, let’s set up the Render State for the Login Form. Click the Conditional block, and on the right side, you will see the block’s settings. 

Under the Show current block label, you see that you have no conditions set for this block. Once you hover over the blue box, you can click the “Add new” button.

add new condition for the login block

In the newly appeared pop-up, select the “Show if…” option from the WHICH FUNCTION NEED EXECUTE? dropdown. Choose the “Is render state” option for the OPERATOR field. Then, pick the “DEFAULT.STATE” for the RENDER STATE.

default.state set for the login block

Click the “Update” button.

Building a Reset Password Form

Add one more Conditional Block. Inside this block, we added the Heading field as well and typed “Reset Password” in it. 

Add the Reset Password Fields and Reset Password Button blocks.

reset password fields and reset password button blocks are set

The Add New Password and Confirm New Password fields are set in the form by default. 

To find them, proceed to the right-side settings tab of the Reset Password Fields block. There is a switcher with two states: Default and Reset.

states of the reset password fields block

Once you switch to the Reset state, you see the Input new password and Confirm new password fields as well as a new button that allows one to reset the password.

the reset state is on

This way you can customize the fields’ and the button’s labels if needed. 

Note that the “Reset State” fields will not be visible to the users until they follow the link provided in the email.

Render state for reset password form

The Render State should be set up for the Reset Password Form as well. Click the Conditional block, and click the “Add new” button under the Show current block label.

In the newly appeared pop-up, select the “Show if…” option from the WHICH FUNCTION NEED EXECUTE? dropdown. Choose the “Is render state” option in the OPERATOR field. 

Then, select a different Render State. In our case, we clicked the “+” icon and added custom “DEFAULT.STATE.2” RENDER STATE. Also, we added the “RESET.PASSWORD” state from the dropdown.

render states are set for the reset password block

Click the “Update” button once you are ready.

Setting Up the Advanced Validation Rules for the Password Field

In this case, we need to ensure that the password the user uses is secure and does not repeat the old one. To achieve this, we used the Advanced Validation for the fields. 

Click the “Three Dots” icon of the Reset Password Fields block and press the “Group” option.

group reset password fields block

Now, you can modify each field of the Reset Password group separately. You can also define your own rules for the Add Password and Confirm Password fields of the Reset Password group.

In the settings of the block, scroll down to the Validation tab and switch to the Advanced mode, and click the “Add New” button.

add new advanced validation rule

We need the password to contain at least one lowercase letter, one uppercase letter, one digit, and at least 8 characters. So we selected the “Matches regular expression” option from the RULE TYPE dropdown. Keep the “Custom field” option for the CHOOSE FIELD input. In the REGULAR EXPRESSION field, we put the following value:

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})

Then, the desired ERROR MESSAGE can be set.

the advanced validation rule for the password is set (1 lowercase, 1 uppercase, 1 digit and at least 8 characters)

To add one more rule, click the “Add Rule” button. Now, select the “Server-Side callback” RULE TYPE. Pick the “Compare with Current User Password” option from the CHOOSE CALLBACK dropdown. Put the needed ERROR MESSAGE.

compare with the current user password validation rule is set
NOTE

Pay attention to the fact that the “Compare with Current User Password” rule works for the logged-in users only. So it is suitable to be used on the Account page, rather than on the Login page, when the user needs to update the old password.

Click the “Update” button once you are ready.

Adding a Button to Switch Between Forms

To make sure that the user is able to switch between the forms, proceed to the Login Form block and add one more Action Button. Select the Change Render State button type.

change render state button set up for login block

We changed the button’s label to “Forgot your password?”.

In the SWITCH STATE field, put the state assigned to the Reset Password block – “DEFAULT.STATE.2” in our case.

default.state.2 put to the switch state field

Now, let’s proceed to the Reset Password block and do the same: add the Action Button with the Change Render State button type. In the SWITCH STATE field, put the state assigned to the Login block – “DEFAULT.STATE” here.

 change render state button set up for reset password block

We changed the button’s label to “Get back to login form”.

Adjusting Post Submit Actions

To make the form work properly, we need to set the Post Submit Actions. Once the reset Password Fields block is added, the “Reset

Password Post Submit” action will be added automatically. To access the action settings, click the “Edit Reset Password action” button under the states’ switcher.

edit reset password action button

All the needed fields are already pre-filled, so you do not need to fill them manually. You can customize the messages for the PASSWORD MISMATCH and INCORRECT LOGIN/EMAIL.

This action sends a standard email to reset the password by default. If you need to customize this email, enable the Add custom reset password email toggle. This step is optional.

edit reset password action set up

If you apply any changes, click the “Update” button once you are ready with the settings. 

In our case, we added the “Send Email” action. Once this action is activated, you are redirected to the JetForm > Post Submit Actions tab. Here you see that the “Reset Password” and “Send Email” actions are already added. You can edit them by clicking the pencil-shaped icon. 

We need to add the “User Login” and “Redirect to Page actions as well. 

The “Save Form RecordPost Submit Action is set by default. We did not delete this action to collect and manage data via the JetFormBuilder dashboard on the Form Records Page.

Setting up events for actions

To make sure that the form does not execute all the actions at once, we need to assign Post Submit Actions with Events. Events define when a specific action is executed.

Click the “Edit Conditions & Events” button under the first action, “User Login.”

edit conditions and events button clicked

Inside the Edit Action Conditions & Events pop-up, switch to the Events match tab and assign the “ON.DEFAULT.STATE” event (ADD EVENT field).

on.default.state event is selected for the user login action

Click the “Update” button. 

The same event we set for the “Redirect to Page” action. 

For the “Reset Password” and “Send Email” actions, we set the “ON.DEFAULT.STATE.2” and “ON.RESET.PASSWORD” events.

on.default.state2 and on.password.reset events are selected for the user reset password

Press the “Update” button once you are ready. 

Once you are ready with the settings, click “Publish/Update” to create the form. The configuration part is complete.

Adding the Form to a Login Page

Now, proceed to the Login page and use the JetForm widget (in Elementor), JetForm block (in Block Editor), or JetForm element (in Bricks). 

From the Choose Form drop-down list, select the built form. Learn about other settings from the JetForm Overview.

the form added to the page

We placed our form on the page edited in Elementor. To display the form on other page builders, check our guide on How to Display a Form on the Front End.

Apply the desired style settings and click the “Publish” button.

Checking the Result on the Frontend

Open the Login page where the form is located on the front end. Only the first part — the Login form — should be visible. To switch to the Reset Password form, click the “Forgot your password?” — the Change Render State button.

the login form is visible on the frontend

Now, the Reset Password form is displayed.

reset password form is visible on the frontend

We put the email address in the User login/email field and click the “Submit” button. The form is successfully submitted, and if we check our inbox, we see that we got the email message with the link for resetting the password.

email message with the link for resetting the password

Click the link, and we are redirected to the Reset Password page with two fields.

add new password and confirm new password fields on the frontend

Let’s see how the validation rules work. Type some password and see that it cannot be applied until all the requirements are completed.

validation message is displayed on the frontend

Finally, when we try to log in with the Login form, we can do it successfully.

login page is successfully submitted

After that, we are redirected to the Account Page.

account page is visible after being logged in

Now you know how to reset the password according to the validation rules with the help of the User Login Action Addon from the JetFormBuilder WordPress plugin.

In this tutorial, we’ll show how to create a JetFormBuilder form that dynamically calculates a final date based on a selected start date, duration, and optional extra service. This setup is useful for rental forms, service bookings, or any scenario where the end date depends on user inputs.

Table of Contents:

Form Structure:

  • “Start Date” Date Field — lets the user select the beginning of the service or booking period;
  • “Duration” Number Field — to enter the number of days the service or booking will last;
  • “Extra Service” Select Field — allows users to choose optional add-on services that extend the total duration;
  • “Final Date Calculation” Calculated Field — calculates the final timestamp by combining the start date, duration, and extra service time;
  • “Final Date” Date Field — displays the calculated end date in a readable format.

Create a New Form

Proceed to the WordPress Dashboard > JetFormBuilder > Add New Form tab. 

Name your form, e.g., “Date Calculation,” and press the “Start from scratch” button from the Welcome Block. It inserts the Hidden Field, Text Field, and Action Button.

We delete the Text Field and place the Date Field block with the “Start Date” FIELD LABEL.

Next, we press the “+ Add Dynamic Value” button to open a pop-up.

Then, we click the “wrench” button near the VALUE TO SET textarea and select “%CT::CurrentDate%” from the Extra Macros list and “toDate” from the Filters list.

JetFormBuilder macro editor with %CTCurrentDate% and toDate filter selected

In this way, we set such a value:

‘%CT::CurrentDate|toDate%’

The value should be wrapped in single quotes.

Next, we set the “Always” APPLY TYPE.

In the repeater item, we select the current block from the FIELD drop-down (“Start Date”) and the “Empty” OPERATOR.

This ensures the field defaults to today if left empty.

To save the dynamic condition settings, we press the “Update” button.

JetFormBuilder start date field with %CT::CurrentDate|toDate% macro condition

The second block we set is the Number Field with the “Duration” FIELD LABEL and “Enter number of days” FIELD DESCRIPTION.

The third block is the Select Field with the “Extra Service” FIELD LABEL.

The options can be adjusted by clicking the “Manage items” button. In the pop-up, variants can be added by pushing the “+ Add new Option” button. We fill in the repeater item fields, especially the CALCULATE, since its value will be used in the calculations further. The value equals the number of extra days needed for the service.

The options can be saved with the “Update” button.

extra service select form field options

The fourth block is the Calculated Field with the “Final Date Calculation (Hidden)” FIELD LABEL.

Here, we type such a formula:

%start_date|T% + %duration|toDayInMs% + %extra_service|toDayInMs%

where:

  • %start_date|T% — is the name of the Date Field with the ‘|T’  (timestamp) filter. It converts the selected date into a Unix timestamp in milliseconds;
  • %duration|toDayInMs% — is the name of the Number Field with the ‘toDayInMs’ filter, which converts the entered value (in days) into milliseconds by multiplying it by the number of milliseconds in a single day;
  • %extra_service|toDayInMs% — works the same way for the Select  Field.

Then, we proceed to the Block > Field tab and select the “as Date” VALUE TYPE.

calculated field settings to calculate the total timestamp in milliseconds

We also scroll down the settings and activate the Hidden toggle to make this block invisible on the front end.

hidden toggle for the calculated field

The fifth block is the Date Field with the “Final Date” FIELD LABEL.

We press the “+ Add Dynamic Value” button to open the pop-up, click the “wrench” button near the VALUE TO SET textarea, select the name of the “Final Date Calculation (Hidden)” Calculated Field from the Extra Macros list, and wrap it in single quotes:

‘%final_date_calculation_hidden%’

Next, we set the “Always” APPLY TYPE. The repeater item can be deleted.

It displays the final date in a user-friendly format.

To save the pop-up settings, we press the “Update” button.

calculated field name as the dynamic value

All form fields are adjusted, so the Post Submit Actions can be set in the JetForm settings tab on the right side. We keep the “Save Form Record” action to store the input.

Finally, the “Save” button should be pressed to save the changes.

Check the Result

Test the form on the front end to ensure all values calculate correctly.

Open any page in Elementor/Gutenberg/Bricks editor and place the JetForm widget/block/element.

Check the page with the form on the front end and fill in the form fields.

We set “14/05/2025” start date, “3” Duration, and “Maintenance & Support” extra service with the “3” value (which means three extra days). Based on the “start_date + duration + extra” calculation, we obtain the “20/05/2025” final date.

calculating the final date

That’s all. With JetFormBuilder macros and dynamic values, you can create forms that handle real-time date calculations on your WordPress website. It improves user experience and ensures accuracy in time-sensitive bookings.

This tutorial explores a set of JetFormBuilder macros designed for working with time and date-based logic. Use macros to perform calculations, comparisons, and dynamic form behaviors based on time intervals.

Where Macros Can Be Used

These macros were created for Date, Time, and Datetime Fields. They can be used in the fields of the Block > Value section by clicking the “wrench” button.

date and time macros in jetformbuilder

Also, macros can be used in the Conditional Logic pop-up of the Conditional Block.

date and time macros in conditional logic

%CT::CurrentDate%

%CT::CurrentDate% returns the current date and time as a Unix timestamp (the number of seconds since January 1, 1970). This macro acts as a replacement for JavaScript’s Date.now() and can be used in dynamic conditions, filters, or calculations where the current moment in time is needed.

NOTE

Always wrap the macro in single quotes.

Example

For the Date Field: use the ‘|toDate’ modifier to display only the date in ‘YYYY-MM-DD’ format:

‘%CT::CurrentDate|toDate%’

Result:

'2022-10-22'

For the Datetime Field: use the ‘|toDateTime’ modifier to display both date and time:

'%CT::CurrentDate|toDateTime%'

Result:

'2022-10-22T17:49'

For the Time Field: use the ‘|toTime’ modifier to display only the time in ‘HH:MM’ format:

'%CT::CurrentDate|toTime%'

Result:

'17:49'

%CT::Min_In_Sec%

It returns the number of milliseconds in one minute. It’s useful for time-based calculations, especially when defining delays, countdowns, or converting minutes into a usable format for scripts, filters, or dynamic logic.

Example

Getting the difference between dates in minutes:

(%some_date_field|T% - %another_date_field|T%) / %CT::Min_In_Sec%

%CT::Hour_In_Sec%

It returns the number of milliseconds in one hour.

Example

Getting the difference between dates in hours:

(%some_date_field|T% - %another_date_field|T%) / %CT::Hour_In_Sec%

%CT::Day_In_Sec%

It returns the number of milliseconds in one day.

Example

Getting the difference between dates in days:

(%some_date_field|T% - %another_date_field|T%) / %CT::Day_In_Sec%

%CT::Month_In_Sec%

It returns the number of milliseconds in one month.

Example

Getting the difference between dates in months:

(%some_date_field|T% - %another_date_field|T%) / %CT::Month_In_Sec%

%CT::Year_In_Sec%

It returns the number of milliseconds in one year.

Example

Getting the difference between dates in years:

(%some_date_field|T% - %another_date_field|T%) / %CT::Year_In_Sec%

That’s all; now you know how to use the date and time-based macros in JetFormBuilder forms on the WordPress website.

The Radio Field in JetFormBuilder is a form field type that allows users to select a single option from a predefined list. Options can be added manually or pulled dynamically from the specified source. This field is suitable for cases where only one choice is allowed, such as selecting a payment method, choosing a subscription plan, or specifying a user preference.

jetformbuilder radio field

Source Settings

Radio Field is a field that allows users to choose one option from a ready-made list. The list can be added manually, from posts, terms, meta fields, glossary sources, or generated dynamically. All settings are described in the Multi-Optional Field Source Settings overview.

radio field source settings

General Settings

The General settings tab includes the most common settings for field customization. More information can be found in the General settings section article.

jetformbuilder radio field settings

Value Settings

The Value settings tab has the following settings:

radio field value settings
  • DEFAULT VALUE — data put here will be automatically shown in the field. Although it can be changed by the user who completes the form;
  • Add Dynamic Value — a button that allows adjusting the value displayed under specific conditions. Once pressed, the Edit Dynamic Value pop-up appears.
edit dynamic value pop-up for radio field
  • VALUE TO SET — a value that will be put in the field once the required conditions are met;
  • APPLY TYPE — a selector for the dynamic behavior. Among the options are “On change conditions result,” “Once,” and “Always”;
  • FIELD — a drop-down list with fields from the current form that should be compared;
  • OPERATOR — a comparison operator that will be a binding for the selected FIELD and VALUE TO COMPARE options;
  • VALUE TO COMPARE — a field for the name of the value to compare;
  • Add New Condition — a button that opens one more settings repeater for setting a new condition;
  • Set value only if field is empty — a toggle that makes the dynamic value feature work only if the FIELD is empty.

After configuring the dynamic value settings, the “Update” button should be clicked.

Advanced Settings

This tab has an additional set of settings for the field. More information about it can be found in the Advanced settings section article.

radio field advanced settings

Style Settings

If the JetStyleManager plugin is installed and activated, the “Block Style” button will appear in the top right corner of the editing window. Here are the styling settings:

jetformbuilder radio field style settings

That’s all about the Radio Field available with the JetFormBuilder plugin for WordPress forms.

The Checkbox Field in JetFormBuilder is the only multi-optional form field type that allows users to choose several variants. Options can be added manually or pulled dynamically from the specified source. For example, this block can be used for a newsletter subscription form to let users choose several topics that they are interested in.

jetformbuilder checkbox field

Source Settings

Checkbox Field is a field that allows users to choose one or several options from a ready-made list. The list can be added manually, from posts, terms, meta fields, glossary sources, or generated dynamically. All settings are described in the Multi-Optional Field Source Settings overview.

checkbox field source settings

General Settings

The General settings tab includes the most common settings for field customization. More information can be found in the General settings section article.

jetformbuilder checkbox field settings

Value Settings

The Value settings tab has the following settings:

checkbox field value settings
  • DEFAULT VALUE — data put here will be automatically shown in the field. Although it can be changed by the user who completes the form;
  • Add Dynamic Value — a button that allows adjusting the value displayed under specific conditions. Once pressed, the Edit Dynamic Value pop-up appears.
edit dynamic value pop-up for checkbox field
  • VALUE TO SET — a value that will be put in the field once the required conditions are met;
  • APPLY TYPE — a selector for the dynamic behavior. Among the options are “On change conditions result,” “Once,” and “Always”;
  • FIELD — a drop-down list with fields from the current form that should be compared;
  • OPERATOR — a comparison operator that will be a binding for the selected FIELD and VALUE TO COMPARE options;
  • VALUE TO COMPARE — a field for the name of the value to compare;
  • Add New Condition — a button that opens one more settings repeater for setting a new condition;
  • Set value only if field is empty — a toggle that makes the dynamic value feature work only if the FIELD is empty.

After customizing the dynamic value settings, the “Update” button should be clicked.

Advanced Settings

This tab has an additional set of settings for the field. More information about it can be found in the Advanced settings section article.

checkbox field advanced settings

Style Settings

If the JetStyleManager plugin is installed and activated, the “Block Style” button will appear in the top right corner of the editing window. Here are the styling settings:

jetformbuilder checkbox field style settings

That’s all about the Checkbox Field available with the JetFormBuilder plugin for WordPress forms.

The Select Field in JetFormBuilder is a form field type that allows users to select a single option from a dropdown list. Options can be added manually or pulled dynamically from the specified source. This field is useful for cases when there is a big list of options, so that the space will not be occupied by them. The list will be unrolled when the user clicks on it.

jetformbuilder select field

Source Settings

Select Field is a field that allows users to choose one option from a ready-made list. The list can be added manually, from posts, terms, meta fields, glossary sources, or generated dynamically. All settings are described in the Multi-Optional Field Source Settings overview.

select field source settings

The Is multiple toggle is specific for the Select Field block. If enabled, it activates the ROWS COUNT range field that determines how many rows with options will be shown in the selector in the default state.

is multiple option of the select field

If this toggle is turned off, the selector shows only one row.

selector shows one row

If this toggle is turned on, the selector shows as many rows with options as indicated in the ROWS COUNT field.

selector shows several rows

General Settings

The General settings tab includes the most common settings for field customization. More information can be found in the General settings section article.

jetformbuilder select field settings

Value Settings

The Value settings tab has the following settings:

select field value settings
  • DEFAULT VALUE — data put here will be automatically shown in the field. Although it can be changed by the user who completes the form;
  • Add Dynamic Value — a button that allows adjusting the value displayed under specific conditions. Once pressed, the Edit Dynamic Value pop-up appears.
edit dynamic value pop-up for select field
  • VALUE TO SET — a value that will be put in the field once the required conditions are met;
  • APPLY TYPE — a selector for the dynamic behavior. Among the options are “On change conditions result,” “Once,” and “Always”;
  • FIELD — a drop-down list with fields from the current form that should be compared;
  • OPERATOR — a comparison operator that will be a binding for the selected FIELD and VALUE TO COMPARE options;
  • VALUE TO COMPARE — a field for the name of the value to compare;
  • Add New Condition — a button that opens one more settings repeater for setting a new condition;
  • Set value only if field is empty — a toggle that makes the dynamic value feature work only if the FIELD is empty.

After finishing working with the dynamic value settings, the “Update” button should be clicked.

Advanced Settings

This tab has an additional set of settings for the field. More information about it can be found in the Advanced settings section article.

select field advanced settings

Style Settings

If the JetStyleManager plugin is installed and activated, the “Block Style” button will appear in the top right corner of the editing window. Here are the styling settings:

jetformbuilder select field style settings

Additionally, the Select Autocomplete Pro Addon can be used for the Select Field, which enables auto-filling values dynamically.

That’s all about the Select Field available with the JetFormBuilder plugin for WordPress forms.

The Time Field allows the user to enter the desired time. It is possible to type the time manually or choose it from the drop-down menu.

select time

An input mask is added automatically and displays to the user how to fill in the field. The time the user chooses in the timer is immediately added to the field.

Settings

The Settings section lets users configure key options for the Time Field.

General

The General tab settings allow users to customize the Time Field by configuring the following set of fields:

general settings time field
  • FIELD LABEL — a field that sets the visible name of the input on the form;
  • FORM FIELD NAME — a field that defines the technical name used in the form data;
  • FIELD DESCRIPTION — a field that provides extra guidance or context under the input field.

Value

The Value tab settings allow one to define the default time, set time limits, and apply dynamic or conditional values using macros and filters, or attributes.

value settings time field
  • DEFAULT VALUE — a field that sets a pre-filled time that is shown when the form loads. This field accepts “hh:mm” format, macros, or filters;
  • STARTING FROM TIME — a field that defines the earliest time a user can select. This field supports static times or dynamic values via macros/filters;
  • LIMIT TIME TO — a field that sets the latest selectable time in the field. This field also accepts macros or filters for flexible control.

Time Field macros allow one to retrieve values from existing fields or predefined variables that can be used for form operations:

  • %CT::CurrentDate% — a macro that inserts the current date in “Y-m-d” format;
  • %CT::Min_In_Sec% — a macro that returns the number of seconds in one minute (60);
  • %CT::Hour_In_Sec% — a macro that returns the number of seconds in one hour (3600);
  • %CT::Day_In_Sec% — a macro that returns the number of seconds in one day (86400);
  • %CT::Month_In_Sec% — a macro that returns the number of seconds in 30 days (2592000);
  • %CT::Year_In_Sec% — a macro that returns the number of seconds in 365 days (31536000).

Check this article for more information on the Time Field macros.

Time Field filters allow one to modify values (like converting timestamps, formatting dates, or performing calculations), which can be used together to manipulate data within the form fields:

  • ifEmpty — a filter that replaces the value with a fallback if it’s empty;
  • length — a filter that returns the length of the input value;
  • toDate — a filter that converts a timestamp into a date string;
  • toDateTime — a filter that converts a timestamp into a date and time string;
  • toTime — a filter that converts a timestamp into a time string;
  • addMin — a filter that adds minutes to a timestamp or date value.

Check this article to discover more Time Field filters.

Validation and Advanced

For the Validation tab settings, users can select validation types (“Inherit,” “Default,” or “Advanced”) to determine how time inputs are validated in the Time Field.

validation and advanced settings tabs

For the Advanced tab settings, users can configure additional options, including:

  • Add Prev Page Button — a toggle that enables the use of the “Previous” button in multi-step forms for easier navigation;
  • FIELD VISIBILITY — a field that sets visibility conditions. By default, the field is shown to all users; 
  • CSS CLASS NAMES — a field for adding custom CSS classes to style the Time Field as needed.

Style Settings

If one has a JetStyleManager plugin installed and activated, the “Block Style” button will appear in the top right corner of the editing window.

Here are the styling settings one can find there:

block style settings

That’s all about the Time Field available with the JetFormBuilder plugin for WordPress forms.

In this tutorial, we exemplify building a form that allows inserting a Custom Post Type (CPT) post on a site from the front end and choosing the needed taxonomy using the Hierarchical Select block. In particular, we simulate a case of adding an ad for the sale of a vehicle via an advertisement website. Here, the selection will be provided by the “Vehicle Type 一 Manufacturer” hierarchy. 

In this use case, we are focusing on configuring the Hierarchical Select Form Field settings. Other details about creating CPT and taxonomies, building forms for users to submit their posts from the front end, setting the needed Post Submit Actions, placing the form on a page, and more can be found in the corresponding tutorials.
To provide the hierarchical select form functionality, the Hierarchical Select Addon for the JetFormBuilder plugin should be installed and activated. Read the JetFormBuilder WordPress Plugin Installation tutorial to select the way of plugin installation.

Create the CPT and Taxonomies

Since we intend to get the ads of a specific design, we create the CPT, name it “Vehicle Ads,” and add the following meta fields: “User Name” Text field, “Email” Text field, “Model” Text field, “Engine Type” Checkbox field, “Mileage” Number field, “Engine Capacity” Number field, and “Price” Number field to collect the corresponding data.

NOTE

To add the featured image to CPT posts, select the needed options in the Supports drop-down list in the Advanced Settings.

Read the How to Create Custom Post Types in WordPress tutorial to learn how to organize the site’s content.
After that, in order for the ads to be inserted, we create the “Vehicle Type” taxonomy for the previously built “Vehicle Ads” CPT.

NOTE

When creating a taxonomy, the Hierarchical toggle in the Advanced Settings should be activated.

The taxonomy includes the “Cars,” “Motorcycles,” “Buses and Trucks,” and “Special Machinery” categories with child subcategories. For example, the “Cars” Category includes the subcategories “Audi,” “BMW,” “Toyota,” etc., and the “Motorcycles” Category includes the subcategories “Kawasaki,” “Ducatti,” etc.

cpt categories and subcategories enlisted

Read the WordPress Taxonomy Explained: Categories, Tags, Custom Taxonomies article to learn the differences between these groups.

Create a Form

Insert the form’s fields

Navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to create a new form. The form will be opened in the Block editor, and the Welcome block, which allows the application of pre-created or AI-generated forms, will be displayed.

Learn how to build forms from the form creation tutorial.

In this case, we delete the Welcome block and type the form’s name (here, “Hierarchical Select Form”). After that, we divide the layout into two Columns and insert Text Fields to enter the user’s name and email, respectively.

NOTE

If you intend to allow users to update posts on the front end, add the Hidden Field.

After that, we add the Hierarchical Select Form Field and adjust the following settings. First, unroll the TAXONOMY TYPE drop-down list and select the needed taxonomy (the “Vehicle Type” taxonomy, in this case). Next, choose the “Term ID” option in the TERM VALUE FROM drop-down list and the “Hide all children levels until parents level selected” option in the ACCESS TO CHILD LEVELS drop-down list. After that, navigate to the block settings and enter the text in the FIELD LABEL field (“select the vehicle type and manufacturer” in this tutorial). The FORM FIELD NAME field will be filled out automatically (“select_the_vehicle_type_and_manufacturer”).

hierarchical select form field inserted

Second, press the “Edit Levels” button and complete the newly-appeared Edit Levels pop-up. Here, put the cursor in the NAME field, and it will be filled out using the default text (the “select_the_vehicle_type_and_manufacturer_level_0”, in this case). Then insert the text that will be displayed as the level’s LABEL and in the PLACEHOLDER (here, we type the same “Vehicle Type” and “Any…” texts, respectively). Next, scroll this pop-up down and press the “+Add new level” button. 

edit levels pop-up

In the next step, press the “Edit Levels” button and complete the newly-appeared Edit Levels pop-up. Here, we add the following texts: “select_the_vehicle_type_and_manufacturer_level_1” in the NAME field, “Make” in the LABEL, and “Any…”  in the PLACEHOLDER field. After that, press the “Update” button in the Edit Levels pop-up.

edit levels pop-up settings

In the last step, we divide the layout into two Columns and insert the block fields to fill out the needed fields of the created “Vehicle Ads” CPT: “Model” Text field, “Photo” Media field, “Engine Type” Checkbox field, “Mileage, km” Number field, “Engine Capacity, l” Number Field, and “Price” Number field to collect the corresponding data. Next, we add the Action Button block.

NOTE

To add the data inserted via the form’s Media field to the featured image in the CPT posts, set the “Any registered user” USER ACCESS, enable the Insert attachment toggle, and select the “Attachment ID” FIELD VALUE.

edit levels pop-up settings

Configure the Post Submit Action settings

Navigate to the JetForm settings tab and open the Post Submit Actions tab. Since we deleted the Welcome block, the “Save Form RecordPost Submit Action was not set by default. We press the “+ New Action” button and add this action to collect and manage data via the JetFormBuilder dashboard.
Then, press “+Add New Action” and select the “Insert/Update Post” action in the newly-appeared Add new action pop-up. The Edit Insert/Update Post pop-up will then appear. First, in this pop-up, in the POST TYPE field, choose the post type for which posts will be created (the “Vehicle Ads” CPT in this case). Second, select the “Published” POST STATUS and head to the FIELDS MAP setting block.

edit insert and update post settings

Second, assign the form fields to the corresponding post field names. In this case, we select the “Post Meta” options and specify the CPT‘s meta fields in the pop-up fields.

assigning form fields to the cpt meta fields

After that, we select the “Post Term” option in the drop-down related to the parent taxonomy field and the needed taxonomy (the “Vehicle Type” taxonomy, in this case) in the newly-appeared drop-down list near the parent taxonomy (the “(select_the_vehicle_type_and_manufacturer) Vehicle Type” text). Next, select the same options for the child taxonomy: choose the “Post Term” option in the drop-down related to the taxonomy field (the “Vehicle Type” taxonomy, in this case) in the newly-appeared drop-down list near the parent taxonomy (the “(select_the_vehicle_type_and_manufacturer) Make” text).

setting taxonomy options to cpt posts

Also, we set the data inserted in the form’s Model field as the “Post Title” and the Insert a photo form field as the “Post Thumbnail.” 

assigning form fields to the cpt post options

Once completed, click the “Update” button. To improve the form’s usability​​, you can add another Post Submit Action, for example, the “Send Email” or “Redirect to Page.”

NOTE

If you intend to allow users to update posts on the front end, configure the form’s Preset Settings.

Finally, publish the form.

Place the Form on a Page

Create a page or open a page/post you need in the editor you prefer (we use Elementor) and add the JetForm widget/block/element to it. Learn about its settings from the JetForm Overview. Select the built form in the Choose Form drop-down list.

post added to a page

Read the Displaying a JetFormBuilder Form in Any Page Builder tutorial to learn how to add the JetForm widget/block/element in Elementor, Block Editor, and the Bricks theme. Press the “Publish” button to save the page.

Test the Flow

Navigate to the front end and fill out the form. Since we selected the “Hide all children levels until parents level selected” option in the ACCESS TO CHILD LEVELS drop-down list of the Configure Hierarchical Select Form field settings, the drop-down list displaying the child taxonomy (the “Manufacturer” in this case) is not visible.

form on the front end

After selecting the needed option in the parent taxonomy drop-down list, the child taxonomy drop-down will be displayed. Add the required data and press the “SUBMIT” button.

form on the front end

After selecting the needed option in the parent taxonomy drop-down list, the child taxonomy drop-down will be displayed. Add the required data and press the “SUBMIT” button.

hierarchical select form on the front end

After that, the “Form submitted successfully.” notice will appear. In the next step, move to the WordPress Dashboard and observe if a post was created.

cpt post added

Finally, open the post and check if all data was added correctly.

taxonomy specified

That’s it. Now you know how to use the Hierarchical Select Form Field to insert Custom Post Type posts of the prespecified taxonomy (including a child taxonomy) using the JetFormBuilder plugin for WordPress.

The Signature Field block is intended to add signature functionality to different form types online. In particular, users can draw their signature online, save and store it as a graphic file in a pre-defined format, and send the file to a specific email.

The block field is available if the Signature JetFormBuilder PRO Addon is installed and activated.

The Signature Field can be added using the block inserter. It can be accessed by pushing the “+” button on the top toolbar. Here, the block can be found by typing the corresponding characters in the search bar.

inserting the signature field block

Settings of the Signature Field are divided into the General, Usage Instructions, Saved Image Settings, Canvas Settings, and Advanced groups of settings.

signature field block settings

General Settings

Among the General settings are the following fields:

general settings of the signature field block
  • FIELD LABEL 一 a text field that is intended to insert the field label;
  • FORM FIELD NAME 一 a text field that is used to insert an ID of this field. By default, this value is added from the FIELD LABEL value, but it can be changed if needed;
  • FIELD DESCRIPTION 一 a non-required text field that is intended to insert a description displayed under the field;
  • DEFAULT VALUE 一  a non-required text field that is meant to insert a default value of the field, select it from the metadata, or add it using an extra macro.

Usage Instructions Settings

This tab is presented by the code snippet (the contents below the Code snippet to use in Send Email or Generate PDF actions field) for copying and further pasting into the CONTENT field of the “Send EmailPost Submit action.

Pressing the “Click here for more details” link unrolls the instructions on the “Send Email” and   “Generate PDFPost Submit action settings.

NOTE

The “Generate PDF” Post Submit action is available if the PDF Attachment Addon for JetFormBuilder is installed and activated.

usage instructions settings of the signature field block

Saved Image Settings

These settings are intended to configure images generated when submitting the form. Among the Saved Image Settings are the following fields:

saved image settings of the signature field block
  • IMAGE FORMAT 一 a drop-down list that sets in what format to generate the final image: “PNG,” “PNG with Background,” “JPG,” “SVG,” or “SVG with background”;
NOTE

Since some email clients may block SVG content, we do not recommend using SVG files with the “Send Email” Post Submit action.

  • STORAGE TYPE 一 a drop-down list that sets how to save the generated image: “File in a hashed folder without WP attachment,” “File in a hashed folder without WP attachment,” or “Data URL string.”

If the “File in a hashed folder without WP attachment” and “File in a hashed folder without WP attachment” options are selected, the Delete created file on form error toggle will be displayed under the STORAGE TYPE list. This toggle, if activated, saves only the forms submitted successfully and stores them in the WordPress Dashboard > JetFormBuilder > Form Records tab.

NOTE

To save the form data, the “Save Form Records” Post Submit action should be set.

Canvas Settings

This tab is presented by the following fields:

canvas settings of the signature field block
  • CANVAS WIDTH 一 a text field that allows inserting the canvas width in percents or pixels;
  • CANVAS HEIGHT 一 a text field that allows inserting the canvas height in pixels;
  • CANVAS BACKGROUND 一 a field that allows selecting the canvas background’s color instead of the default white;
  • Pen Color 一 a field that allows selecting the pen’s color instead of the default black;
  • CLEAR BUTTON LABEL 一 a text field that allows adding the text on the signature-clearing link instead of the “Clear” default.

Advanced Settings

These settings are:

advanced settings of the signature field block
  • PLACEHOLDER 一 a text field that is intended to insert the placeholder’s name;
  • Add Prev Page Button 一 a toggle that, if enabled, activates the PREV PAGE BUTTON LABEL text field;
  • PREV PAGE BUTTON LABEL一 a text field that is intended to insert the text displayed on the “Prev Page” button;
  • FIELD VISIBILITY一 a drop-down list that allows selecting who can observe the block: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

That’s it. Now you know how to manage the Signature Field settings of the Signature PRO add-on of JetFormBuilder for WordPress.

The Switcher Field block is a horizontal toggle form field for switching between two states of the same form. The Switcher Field block functionally can be replaced by the Checkbox, Radio, or Advanced Choices Field blocks. This block can be used in contact forms, registration forms, order forms, etc. (for example, while selecting the email or mobile method of communication, preferred services, and more).

Field Settings

To add the Switcher Field block to a JetFormBuilder form, navigate to WordPress Dashboard > JetFormBuilder and open a new form or edit a previously built one.
Find the Switcher Field block and drag and drop it into the form.

adding the switcher field block

The Switcher Field block has two settings tabs 一 Settings and Style.

Settings Tab

The Settings tab includes the General, Value, and Advanced settings.

switcher field block settings

General settings

The tab contains the following fields: FIELD LABEL, FORM FIELD NAME, and FIELD DESCRIPTION:

general settings of the switcher field block
  • the FIELD LABEL field allows typing the text to be displayed over the switcher;
  • the FORM FIELD NAME field allows typing the form’s ID text;
  • the FIELD DESCRIPTION field is for the text about the field or to enter a shortcode. 

Value settings

The Value settings include the DEFAULT VALUE, VALUE, and CALCULATED VALUE fields:

value settings of the switcherfield-block
  • the DEFAULT VALUE field allows typing or selecting the default value for the on/off switcher: If the default value is not empty or does not equal the string “false,” the switcher will be turned on. Pressing the “Dynamic Tag” icon allows users to select dynamic data (i.e., data from posts, user data, queries, option pages, or related terms). If the “Restrict access” toggle is enabled, it sets the default value from preset only for users allowed to edit this value; if disabled, it sets the default value from preset for all.
edit preset popup window
  • the VALUE and CALCULATED VALUE fields allow typing/selecting data for the enabled switcher. Pressing the “Dynamic Tag” icon turns on the Edit Preset pop-up with the SOURCE drop-down menu to select data from posts, user’s data, queries, option pages, or related terms).

Advanced settings

The Advanced tab consists of two fields: the BLOCK NAME and CSS CLASS NAME fields intended to type the block name and a custom CSS class to style the block.

advanced settings of the switcher field block

Style Settings Tab

The Style Settings tab manages the background colors of the Track (for the enabled and disabled switcher) and Thumb.

style settings of the switcher field block

JetStyleManager Style Settings

In contrast to the default block Style settings, the JetStyleManager plugin allows customization of the block’s Alignment, Border, Color, Margin, Padding, and Typography.

Click the pencil icon in the top right corner of the page and apply the necessary settings to the block’s Content, Label, Required Mark, and Description.

jetstylemanager applied to the switcher field block


That’s all about the Switcher Field’s settings from the JetFormBuilder plugin.

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.

The Prev Page block allows users to go back to the previous page of a multi-page form. As an attribute of multi-page forms, this block indicates the end of the form section and, together with the Page Break block, manages form navigation, thus contributing to the form’s usability by dividing the form into logical parts.

Field Settings

To add this block to a JetFormBuilder form, go to WordPress Dashboard > JetFormBuilder and press the “Add New” button.

prev page field transform buttons

After adding this block to the form, the “Submit” button appears, and the Block settings are available in the right side panel. The Action Button settings section allows switching between the following block variations by clicking the appropriate button:

The Prev Page block has the General and Advanced settings.

prev page settings

General settings

The General settings tab includes the FIELD LABEL field for customizing the text on the “Submit” button.

prev page general settings

Advanced settings

The Advanced settings tab has the “Add Prev Page Button” toggle, which turns on the PREV PAGE BUTTON LABEL field to type its label and the CSS CLASS NAME field for customizing the button’s design with a CSS class.

prev page advanced settings

JetFormBuilder Settings

Additionally, the Prev Page block allows applying global settings, particularly the automatic scrolling to the top of the form when switching between form pages. To enable this option, navigate to the JetFormBuilder > JetForm Settings > Options > Form Accessibility tab and activate the Scroll to the top on page change toggle.

scrolling to the top of the form toggle

Style Settings

To customize the “Prev Page” button, you can use 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. 

scrolling to the top of the form toggle

Two of the styling tabs are the Submit Wrap and Action Button. Inside these tabs, one will find settings for styling the Alignment, Border, Color, Margin, Padding, Typography, and more block options.

The style settings are also available in the Elementor editor.

NOTE

Be aware that the Form Break Buttons tab are only for the Next Page and Prev Page blocks, not for the “Next” and “Prev” buttons. For example, to align the buttons, you need to use the Alignment from the Form Break Buttons tab.

form page break styles in elementor

Use Case

Users can place this block field at any place of the form, as the pre-built Application Form pattern shows.

NOTE

Users can apply any pre-made form patterns (i.e., Booking Form, Contact Us, Register Form, and more) for their forms. To add the form pattern, press the plus-shaped icon and click the Patterns > JetForm tab.

previous page field in the form

The Prev Page block works with the Form Page Break block, indicating the end of the page section.

form page break field added

After publishing the form and adding it to a page/post by the JetForm block/widget, one can check it on the front end.

When users are not on the first page of the form, they can go back to the previous page by clicking the Prev Page button.

prev page block of the front end

That’s all about the Prev Page block settings.

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

The style settings are also available in the Elementor editor.

NOTE

Be aware that the Form Break Buttons tab are only for the Next Page and Prev Page blocks, not for the “Next” and “Prev” buttons. For example, to align the buttons, you need to use the Alignment from the Form Break Buttons tab.

form page break styles in elementor

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.

Advanced Choices Field block is a feature for more advanced selection options in the form, which can be used instead or additionally to the alternative Checkbox, Select, and Radio fields.

With this block, text, images, or other objects can turn into the object for selection. And now, this block is available for WordPress with the JetFormBuilder plugin.

The Advanced Choices Field block can be found in the Gutenberg block search or by typing the “/” right in the empty spot in the form.

adding advanced choices field block

Block Layouts

There are four default layouts available for selection: “Text,” “Images,” “Images with description,” and “Images with controls.” Besides the given layouts, the user can build a custom block by pressing the “Skip” button.

select choices layout

Text

Except for the general Advanced Choices Field block settings, the Paragraph blocks can be customized in every separate choice field.

paragraph block settings

Images

In this case, the Image block settings can be customized.

image block settings

Images with description

Once this option is picked, there are both Paragraph and Image block settings are available for every choice box.

image block settings for image with description

Images with controls

The “Images and Controls” layout provides adjusting options for the Image and Choice Control block.

choice control block settings

Custom

If the “Skip” button is pressed, two empty options for completing appear. Inside them, different needed blocks can be added.

NOTE

JetFormBuilder form fields can’t be added inside the Advanced Choice option.

build custom layout

Advanced Choices Field Block Settings

Once the Advanced Choices Field block is added, a panel with the following toolbar controls appears above the block:

advanced choices field icons
  • Transformation button (this block can turn to Conditional Block, Columns, and Group);
  • Elements for controlling the position of the block;
  • Justification button. The block can be put left, center, or right. Or a space between items can be added;
  • Button to make the field required;
  • Button for name copying;
  • New Advanced Choice” button to create an additional choice box; 
  • Automatic transition button that redirects to the next page when the values are changed;
  • Other options.

There are two settings tabs to adjust the Advanced Choices Field block: General and Styles.

General

In this tab, the main customization options of the block are available.

Layout

In the Layout section of the Settings tab, there are the following settings:

advanced choices field layout settings
  • Justification — options to justify a block. It can be put left, center, or right. Additionally, the gap between blocks can be added with the help of the corresponding buttons. Mind that the last option is available only when horizontal Orientation is picked;
  • Orientation — the view of the columns, which can be either horizontal (in a line) or vertical (stackable boxes);
  • Allow to wrap to multiple lines — toggle that allows putting options in the next line if there is not enough space on the screen. For instance, on mobile devices.

General

The next section is called General:

advanced choices field general settings
  • Field Label — label for the field that will be displayed in the form before options;
  • Form Field Name — unique field name/ID that can be used for further work with the field on the WordPress back end. It should contain only lowercase Latin letters, numbers, and “-” or “_” characters with no spaces;
  • Field Description — optional field for the field description. If completed, the description will be displayed under the field.

Value

The Value section includes several settings options:

advanced choices field value settings
  • Allow multiple choices — a toggle that allows selecting several options in the field (basically, like a Checkbox Field). Otherwise, the field works as a Radio Field, meaning that only one option of the field can be picked.
  • Default Value — a field where one can put the Value of one or more fields. If put, this exact value will be selected by default. For instance, “Book Name #1”. If several options are desired to be default, these can be separated by a comma and space.
NOTE

If several values are put in the Default Value field, but only one option is allowed for selection (the Allow multiple choices toggle is disabled), only the first option will be chosen by default in the form. The following ones are going to be ignored.

  • Add Dynamic Value — a button that allows setting value under certain conditions. Once clicked, the Edit Dynamic Value pop-up with additional customization options appears.

Styles

NOTE

For this block, there is no need to install JetStyleManager to configure styles, as they are located in a separate tab.

In the Styles tab of the settings, by default, the user can alter the Text Choice and Background Choice of the default, hover, and checked states of the choice boxes.

advanced choices field styles tab

Except for the mentioned text and background settings, there is a three-dots button next to each section. 

By clicking, additional Tools, like Border and Radius of the field, can be added, default Text and Background can be removed, or the selected options can be reset by pressing the “Reset All” button.

advanced choices field styles tab default and tools list

Advanced Choice Block Settings

These are the settings of the one particular choice block. For example, in the “Text” layout, there are three boxes by default (but more can be added.) So, clicking on one of the boxes will open the Advanced Choice block settings.

A needed box can also be found in a Document Overview section.

advanced choice in the document overview

Above the selected box, there is a toolbar with controls located:

advanced choice block icons
  • Button to switch to the Advanced Choices Field block;
  • Inactive transformation button (the structure cannot be changed);
  • Justification button; 
  • Button to switch between “Default” and “Checked” states.
NOTE

This button does not affect the preset in any way. It is designed to view the applied styling in the Checked choice section of the Advanced Choices Field block.

General

Layout

Initially, the general Layout settings can be adjusted. These are the same as in the Advanced Choices Field block.

text advanced choice layout settings

General

In this section, there are two fields displayed:

text advanced choice general settings
  • Value — value for an option. It will be displayed in the choice box;
  • Value for Calculated Field — value that will be used in the Calculated Field if needed.

Styles

Except for the General Settings tab, there is also the one called Styles.

In the Color section, the Text and Background colors for an option can be selected.

text advanced choice style settings

The Dimensions section is initially empty. To add settings, the plus-shaped icon should be clicked.

Here, the Width line can be pressed to add its settings.

text advanced choice dimensions options

The “Fit” option is set by default. By picking this option, the option boxes will be displayed as standard, fit options.

text advanced choice fit width

The “Fill” Width stretches options to available space.

text advanced choice fill width

With the “Fixed” variant, a needed field width can be specified in the appeared field.

It is also possible to choose the desired unit in the selector next to the field: “px,” “%,” “em,” “rem,” “vw,” or “vh.”

text advanced choice fixed width

That’s all about the Advanced Choices Field block settings available with the JetFormBuilder plugin for WordPress.

Custom templates are a feature to customize forms view. Use JetEngine to build a custom item template and set it for any Form you fancy. In this way, make the Radio and Checkbox fields more appealing on the front end.

Creating a Custom Item Template in Elementor

Radio and Checkbox form fields provide a possibility to apply a template to their options. If the source of the field is “Posts” or “Terms”, you can create a Listing Template in JetEngine with the same source and make the Radio or Checkbox field inherit the layout from the template.

Also, it is possible to use a template if the source of the field is a JetEngine custom query.

NOTE

If the Radio or Checkbox field generates options from a meta field, it is not possible to apply a template.

In our case, we will customize a Checkbox field that lists posts from a custom post type named “Services”.

Since the custom item templates are not pre-made, you’ll have to build them manually.

Create a new listing

Go to WordPress Dashboard > JetEngine > Listings.

jetengine listing items

Click the “Add New” button to open a Setup Listing Item window.

creating listing template for jetformbuilder forms in jetengine

Make sure to pick the “Posts” as a Listing source, then select the post type to pull the options from; in our case, it’s the CPT named “Services”, and our future Checkbox field in the form will list SPA services as options. 

After that, enter the Listing item name and choose the Listing view. You can work either in Elementor or Gutenberg. Lastly, click the “Create Listing Item” button.

Right afterward, you’ll be redirected to the chosen webpage builder.

Build the listing in Elementor

First of all, select the desired layout for your new section. To do so, press the cross icon, then pick the desired structure:

section structure

Now, search for the Check Mark or Check mark widget. Drag and drop it to the first column of the newly-created structure and choose the icon from the library or upload an SVG file.

adding check mark widget to the listing template
NOTE

Make sure to select icons for both unchecked and checked modes.

adding check mark widget to the listing template in checked state

Then proceed to the left-side toolbar, press Style, and customize the icons’ appearance if needed.

You can adjust the Box Size, Icon Size, and Border Radius, set Background Color for the Default icon, and play around with the Border Type, Width, Color, and Box Shadow of the Checked icon.

Configure the dynamic fields

Let’s configure the second column. We’ll use the Dynamic Field widgets to pull meta data from posts and build the listing layout.

Search for the Dynamic Field widget and drag and drop it to the second column.

dynamic field post data source
NOTE

You can also change the typography and font size to make your custom template pop.

We will display the post title and some meta field values with the help of this widget.

Once you are satisfied with your custom item template, click “Publish.”

Add Template to the Form

Now, it’s time to set the template you’ve created for the form.

Choose and edit the form

Go to WordPress Dashboard > JetFormBuilder > Forms.

edit button next to the form

Find the form you would like to customize and click the “Edit” button.

Configure the field settings

In the newly-opened window, there will be form fields settings. Click on the Checkbox field to edit it.

assigning custom template to checkbox form field in jetformbuilder
NOTE

The custom item templates can only be applied to the Radio or Checkboxes field types. You cannot set a custom item template for the rest of the field types.

Scroll down the settings until you see a Use custom template switcher. Tick it, and the new drop-down field will appear. Make sure to pick here the template you’ve created beforehand.

NOTE

This function will not work with the manual input, meta field, or glossary source.

Press the “Apply changes” button and then “Update the form.

Add form to the front end

After configuring fields settings and updating the form, check out how it looks on the front end.

jetformbuilder form on the front end
NOTE

If you need to use the Radio field, you can make the same steps; just change the field type in the form.

That’s all; now you know how to build a WordPress custom template for Radio and Checkbox form fields options.

The Map Field block displays maps (Google, Leaflet, and Mapbox) with set zoom parameters (zooming to a specific country). The field block allows:

  • inputting coordinates by pinning the needed location on the map;
  • storing the data location in three different ways: as a string with location Lat and Lng separated by a comma, as an array, and as a physical address;
  • saving its values conveniently in the Map” meta field of the JetEngine plugin.
NOTE

To use the Map field block, install and activate the JetEngine (v3.0.3 or higher) plugin, enable its Map Listing Module, and set the Maps Settings options.
Read the How to Create Google Maps API Key tutorial to know how to receive the API key and set it in the JetEngine dashboard to display maps on your site.

Adding the Map Field

After creating a new form or opening a previously built one, the Map Field block should be found in the search bar of the block inserter (the “plus” icon) and then inserted where needed.

adding the map field block

Settings of the Map Field

This field block has the following settings tabs: General, Value, Map Settings, and Advanced

map field block settings

General Settings

The General settings tab includes the FIELD LABEL, FORM FIELD NAME, and FIELD DESCRIPTION fields:

map field block general settings
  • FIELD LABEL ㅡ a field intended for the field’s label;
  • FORM FIELD NAME ㅡ a field intended for the field’s name. This field will be filled out automatically after adding the text in the FIELD LABEL field;
  • FIELD DESCRIPTION ㅡ a field for the description of the map.
NOTE

The FIELD LABEL and FIELD DESCRIPTION fields allow the usage of shortcodes.

Value Settings

The Value settings allow for the specification of the location center using coordinates and the zoom setting of the map. The Value tab includes the following settings:

map field value settings
  • VALUE FORMAT ㅡ a field that allows choosing how to store the location by clicking the corresponding button (“String,” “Array,” or “Address”):
    • String ㅡ an option that, if selected, stores the coordinates as a string with location latitude and longitude separated by a comma. For example: “46.969686110698525,31.991035188696703”;
    • Array ㅡ an option that, if selected, stores the coordinates as an array of latitude and longitude. For example: “{“lat”:46.969686110698525,”lng”:31.991035188696703}”;
    • Address ㅡ an option that, if selected, stores the location as a physical address, like this: “6 Walnut Road, Manchester SW1A 1AA, UK”.
  • DEFAULT VALUE ㅡ a field that allows entering or selecting dynamically the latitude and longitude coordinates.
NOTE

While the location can be stored in three different formats, manual input in the DEFAULT VALUE field is available only in the “String” format, i.e., “50.45,30.53”. This format works regardless of the options set in the VALUE FORMAT field.

The DEFAULT VALUE field allows usage of the dynamical data by pressing the “Dynamic Tag“ icon. 

It opens the Edit Preset pop-up for selecting a data source from the following options: “Post,” “User,” “URL Query Variable,” and “Option Page.” In turn, each selected option turns on the appropriate field, allowing one to choose the needed data. Also, this pop-up includes the Restrict access toggle that allows restricting users who are allowed to edit this value.

dynamic data as a source for map data

The needed settings should be saved by pressing the “Update” button.

After selecting the dynamic data in the Edit Preset pop-up, the ZOOM slider will be added to the Value settings. This field has three buttons to set the “Default,“ “Small,“ and “Custom“ zoom. Clicking the “Custom” button enables a field to type a zoom value ranging from “1” to “18.”

zoom field of the value settings

Map Settings

The Map Settings tab has the following settings:

map settings of the map field
  • Show search autocomplete ㅡ a toggle that, if enabled, adds a drop-down field that allows selecting an address from a drop-down list of the proposed five addresses and displaying a picked location on a map. Read the How to Enable Search Autocomplete for Map Field Block tutorial for more details;
  • HEIGHT ㅡ a slider that allows setting the map dimensions. The map height can be adjusted between “50“ and “1000“ pixels. Pressing the “Reset” button sets a 300-pixel height.

Advanced settings

The Advanced settings include:

advanced settings of the map field
  • Add Prev Page Button ㅡ a toggle that, if activated, adds the “Prev Page” button to the form;
  • Prev Page Button Label ㅡ a field that allows changing the text to be shown on the “Prev Page” button;
  • Field Visibility ㅡ a drop-down list that allows displaying the form for “For all,” Only for logged in users,“ and ”Only for NOT-logged in users”;
  • CSS Class Name ㅡ a field for adding the CSS class.

Post Submit Actions

The Map Field block allows storage of the map data inserted on the front end in the WordPress database. In particular, the “Insert/Update PostPost Submit Action should be added. In this case, the formats of the form Map Field block and the JetEngine’s “Map“ meta field should be of the same type.

aadding the map field data to cpt

Pressing the “Update“ button saves the changes.

Front End View

On the front end, the Map Field will display two fields: the text field with the “Search” text and the map.

the field map on the front end

After typing three characters in the text field, the drop-down list will appear.

typing a text in the address autocomplete drop-down

Once the needed address from the list is picked, the map will show this location.

the map of the map field displays the location

After pressing the “SUBMIT” button, the set address will be added to the specified Custom Post Type.


That’s all about the Map Field block of the JetFormBuilder plugin, which allows one to work with the “Map“ meta field of JetEngine and gives users the ability to select the location on the map.

The Repeater Field can be an advantageous option for your form when content needs to be repeated. One can’t deny that the ability to add as many fields as you need dynamically is really handy when it comes to similar data. Let’s look at how to add new fields to book additional places on tour just with one button click. 

Let’s begin by proceeding to JetFormBuilder > Add New to create a form from scratch. For example, we will build a booking form with the repeater field that lets users register as many travelers as needed.

Initially, we delete the default Hidden Field, Text Field, and Action Button to avoid getting confused.

default form in gutenberg

Next, we give a title to the form and add general fields to create a canvas. Among them are Hidden, Heading, Date, Text, and Radio fields.

booking form in jetformbuilder

Then add the essential part of the form, the Repeater Field. Adjust the settings according to your demands.

Hit the plus-shaped button to add the first block to the Repeater.

repeater field general settings

We begin with the Heading Field to name the proceeding section.

heading field in the repeater

Then we add a couple of Text Fields specifying the information about the traveler.

text fields in the repeater

And the final fields we create in the Repeater are the Radio Field and one more Text Field.

Besides, don’t forget to change the button’s label located under the fields placed in the Repeater.

radio and text fields in the repeater

Once done, we’ll add an Action Button and two more Hidden Fields to complete the form. One represents the current post title.

current post title hidden field

And the other one’s Field Type is selected as “Current Post Meta.” Here the Meta Field to Get Value From is also specified. 

current post meta hidden field

Though don’t forget to adjust the JetForm settings. Especially, pay attention to the Post Submit Actions. Set the needed amount of actions taken once the form is submitted.

For instance, we add three post-submit actions, Insert/Update Post, Send Email, and Redirect to Page.

Finishing with all the settings, mind pressing the “Publish” button to make the form live.

jetformbuilder post submit actions

Head to the page on which you want to place the form. For instance, we will add the form to a single page. To do so, we open WordPress Dashboard > Crocoblock > Theme Templates and hit the “Edit” button that appears next to the needed template once we hover on it.

Mind that you can use both Gutenberg and Elementor for editing.

Moreover, you can add a new template by pressing the samely-named button.

NOTE

You can also add the form to the pop-up if the JetPopUp plugin is installed and activated.

crocoblock single templates

Find the JetForm block/widget, place it on the page, and work on the settings.

Press the “Update” button once the changes have been applied.

jetform settings in elementor

Or, look at the template made with Block Editor. The settings here are pretty much the same.

jetformbuilder form in gutenberg

Check the form on the front end. You can also observe the fields we have added to the Repeater.

booking form on the frontend

And after them, there is a button that duplicates the fields once the button has been pressed.

new repeater fields

That’s it; the fields can be repeated as many times as needed. Now you know in which cases and, most importantly, how to add the Repeater Field to the JetFormBuilder form.

Field validation is an automated process of determining that all fields contain correct values before the WordPress form is accepted.

First of all, you need to create a form. Here’s an example of a simple form with a Number field, a Select field, and a Checkbox and Calculated fields combo.

calorie calculator form

There is no “Submit” button, and if there are any conditions set to the fields, e.g., Min and Max value, it’s impossible to determine whether the user enters a correct value.

field settings min and max value

The second step is to either copy the post ID from the form’s URL or head back to the JetFormBuilder > Forms folder. Find the necessary form and get its ID from the Shortcode column.

id of the form

Now, to implement the fields validation without clicking the “Submit” button, you need to go to WordPress Dashboard > Appearance > Theme File Editor.

Then click on the functions.php file in the right sidebar.

functions file

Scroll down the file and add the filter where your-form-id will be the ID you previously copied:

add_action( 'wp_footer', function () { ?>
<script>
  jQuery( '.jet-form-builder[data-form-id="your-form-id"] input, .jet-form-builder[data-form-id="your-form-id"] select' ).on( 'blur', function() {
      this.reportValidity();
    } );
</script>
<?php } );
code for field validation

Don’t forget to click the “Update File” button. On the front end, a user will see a certain tooltip if the entered value is incorrect without clicking the “Submit” button.

incorrect value

Now you know the easiest way of implementing field validation without submitting the form.

Render in HTML allows you to make a Hidden field invisible in the HTML markup. With this feature, any Hidden field in the form becomes more secure, which is paramount when using Payment Gateways (PayPal/Stripe). 

Secure field is a field that cannot be modified, read or seen on the front-end even with the help of JavaScript.

Render in HTML is turned on by default. This way, the Hidden field type will be seen in the page’s source code.

render in HTML feature enabled

If you disable the Render in HTML toggle, the Hidden field will disappear in the HTML markup and be secured. 

render in HTML feature disabled

The Render in HTML feature works with all Field value types of the Hidden Field although there are two exceptions. The Hidden Field won’t be secure if it is set to URL Query Variable or when using a preset with URL Query Variable set as a source.

url query variable

If Referer URL is chosen, the Render in HTML toggle won’t be available meaning that this feature is turned on by default.

referer url of the hidden field
NOTE! The Render in HTML feature cannot be used when combining Hidden and Calculated field types or applying custom JavaScript code for a Hidden field.

Make work with JetFormBuilder easier by using the Blocks Transformation feature. Make changes to the WordPress form you create with the JetFormBuilder without effort. 

The feature is already built in the JetFormBuilder’s main functionality, so you don’t need to activate any additional elements.

Just proceed to the JetFormBuilder > Forms and click on the “Edit” button of the form you want to change. 

Or build a new form by pushing the “Add New” button to test the WordPress Blocks Transformation there.

jetformbuilder forms

As Gutenberg has been opened, let’s check the Text Field. It is the most telling example, as this field type supports transformation to any other JetFormBuilder fields.

Click on the block and its icon on the appeared panel. Now the transformation list is available.

wordpress text field transformations

For instance, we transform this field into the Checkbox Field. As you can see, the Field Label and Form field name are preserved as in the Text Field.

wordpress text field transformed into checkbox

So, the main feature is the transformation of the already adjusted coinciding settings into the new block.

Other JetFormBuilder blocks also transform into different form blocks effortlessly.

wordpress radio field transformations

All the JetFormBuilder blocks can transform into Conditional Block. When transformed, the selected block or group of blocks are placed inside the conditional block.

wordpress radio field transformed into conditional block

Besides, you can place several blocks into the Conditional Block. To do so, initially click on the upper block.

Push the “Shift” button on your keyboard if you are a Windows user or the “Command” button if you are a macOS user, and, without releasing it, click on the lower block.

Then press the block icon above the blocks and transform them into the Conditional Block.

several blocks transformation into the conditional block

Moreover, not only the JetFormBuilder blocks can be transformed, but also some core Gutenberg blocks.

So, the Buttons can be transformed into the Form Break Field, Action Button, and Conditional Block.

wordpress buttons transformations

Separator is compatible with Group Break Field and Conditional Block.

wordpress separator transformations

And last but not least Paragraph transforms into Heading Field, Text Field, and Conditional Block.

wordpress paragraph transformations

Now you know how to transform form field blocks in Gutenberg with the help of the JetFormBuilder plugin.

Referer URL is a JetFormBuilder feature that allows you to get a hidden field with the user’s address to the current page with the WordPress form, created via the Gutenberg block editor. This feature can help you to collect SEO statistics.

Proceed to JetFormBuilder > Forms and click on to “Edit” or “Add New” form, according to your needs.

Open the Field Value drop-down menu in the Hidden Field block and select the Referer URL option.

referer url option in the hidden field block in the form

Add the form to any post or page, if you haven’t done it yet, hit the “Publish” or “Update” button and proceed to the front end. You can do this by pushing the “View Post” or “View Page” buttons.

Submit the form and open the DevTools page. Here you can see the user’s referer URL.

referer url on the front end

That’s it. You know now how to get the user referer URL from the JetForm Hidden Field block.

color picker field

Give your users an opportunity to design your website and pick a certain color in the form with the help of the Color Picker Field.

You will be able to use the default HTML Color Picker and choose a color in HEX, RGB and HSL formats. However, the values can be saved only in seven-character hexadecimal format. 

If you want to get advanced Field Settings and save values in HEX or RGB format, please check our Advanced Color Picker addon that has such an option.

Settings

general and advanced color picker block settings
color picker field default value option

You can choose a Default Value for Color Picker field by clicking on the cylinder-shaped icon. The Edit Preset window will pop up, where you should choose the Source the information will be taken from. Check this tutorial to get more information about using the Preset.

Style Settings

color picker field and jetstylemanager styling options

You may install the JetStyleManager plugin to get the Block Style button in the top right corner of the editing window. Here are the styling settings you can meet there:

The Action Button field block inserts the form submission button with the default “Submit” text, which is the final and only field of every form. This block includes three additional block options to insert the “Next Page,” “Prev Page,” and “Change Render State” buttons. Users can switch these variations of the Action Button directly from the Inserter.

action button settings

Settings

The “Action Button” button has the following settings:

  • the General setting tab includes the FIELD LABEL field to type the text on the button instead of the default “Submit” text. This field allows the use of shortcodes;
  • the Advanced settings tab, which includes:
    • the “Add Prev Page Button” toggle, which turns on the PREV PAGE BUTTON LABEL field to type its label. The field allows to use the shortcodes;
    • the CSS CLASS NAME field to type the CSS class to modify the button’s design.

Style Settings

Users can style the Action Button field block using the free JetStyleManager plugin. After installing and activating it, the brush-shaped icon appears in the top corner of the screen.

action button style settings

This plugin enables two styling tabs: Submit Wrap and Action Button. Inside these tabs, one can customize the block’s Alignment, Border, Color, Margin, Padding, Typography, and other options.

That’s all about the Action Button block settings.

The Form Page Break block of the JetFormBuilder plugin divides forms into some parts (pages) for their visual separation. The next page of the split form will appear after filling in the previous ones. On the front end, it looks like a “Next page” button that opens the next part of the form when the current one is finished.

The Form Page Break block can display the global content and work inside the Conditional Block field. Usage of the Conditional Block field allows displaying the Progress Bar block through a separate block.

The Form Page Break block allows displaying the Next /Prev buttons anywhere within the current page. 
Additionally, you can add the Form Pages Start block to specify the starting point for form parts. If the Form Page Break block is added after the Form Pages Start block, a new form page will start from the Form Pages Start block.

form page break block in the conditional block

Settings

The Form Page Break block has three groups of settings: Button Settings, Page Settings, and Advanced:

form page break block settings
  • the Button Settings include the Enable Next Button and Add Prev Page Button toggles; if enabled, turn on the Next Button Label Field and Prev Page Button Label Fields to type the appropriate button name instead of the default text; additionally, if disabled, the Enable Next Button toggle, can be used as a form break;
  • the Page Settings has the following settings:
    • the Label of Progress field to type a last progress name added to the Form Page Break field at the very end of the form;
    • the Validation Message field to type the text to show if the next page button is disabled.
  • the Advanced settings allow adding some CSS coding in the CSS Class Name bar.

Style Settings

The style settings to be applied to this field will be visible on the front end of the form. Partially, the style settings include the button options (margins, typography, colors, etc.) and coincide with the button options referring to the template used.

Here are the styling settings you can meet there:

The Form Break Page style settings are also available in the Elementor editor.

NOTE

Be aware that the Form Break Buttons tab are only for the Next Page and Prev Page blocks, not for the “Next” and “Prev” buttons. For example, to align the buttons, you need to use the Alignment from the Form Break Buttons tab.

form page break styles in elementor
group break form field appearance

Actually, this field creates a single line that can divide one part of the form from another. You can customize the thickness of the line and its color. The users will see it but won’t be able to interact with it.

Settings

group break form field advanced settings

Style Settings

group break form field styling options

If you have installed the JetStyleManager plugin, the Block Style button will appear in the top right corner of the editing window. Here are the styling settings you can meet there:

The Repeater Field block is intended to contain all types of blocks (so-called “nested fields”) that will be repeated as many times as needed.

a repeater field with nested fields
NOTE

The JetFormBuilder plugin does not restrict inserting the Repeater Field into the Repeater Field, but we strongly do not recommend doing it.

The Repeater Field block is often used in booking forms (for example, if the number of visitors is set manually), T-shirt order forms (to specify needed settings for each T-shirt), Calculators, etc.

For an in-depth understanding of how to configure the Repeater Field’s settings, use it in calculations, specify the number of repetitions in different ways, and more, the How to Add and Use Dynamic Repeater in the JetFormBuilder Forms tutorial should be read.

Also, more details can be found in the How to Create a Form with a Dynamic Repeater in WordPress video. 

Inserting the Repeater Field Block

This block can be added to any form by finding it in the search bar of the block inserter (the “plus” icon) and placing it where required.

adding the repeater field block

Also, the Repeater Field can be inserted as part of JetFormBuilder’s embedded templates, presented in the Welcome Block, and patterns (for example, the booking form).

Inserting Nested Field into Repeater Fields

To insert the needed block(s) into the Repeater Field, the “plus” icon (inserter) should be pressed.

adding a block into the repeater field

Settings of the Repeater Field

The settings of this field are presented by the General, Field, and Advanced settings.

settings of the repeater block

General

The General settings include the following fields:

general settings of the repeater block
  • FIELD LABEL ㅡ a field for inserting the field’s label;
  • FORM FIELD NAME ㅡ a field for the field’s name. This field will be filled out automatically after the text is added to the FIELD LABEL field, but it can be corrected according to requirements. However,  only Latin letters (lower case), numbers, `-` or `_` chars are allowable;
  • FIELD DESCRIPTION ㅡ a non-required field for more information on this field, e.g., the field’s description;
  • DEFAULT VALUE ㅡ a field that displays the default value that will be shown in the Repeater Field. After pressing the “Dynamic Tag” icon, the Edit Preset pop-up will be opened. This pop-up includes the SOURCE drop-down list (with the “Post,” “User,” “URL Query Variable,” “Option Page,” and “Related Items” options) that allows selecting the corresponding source for the default value. In turn, each option activates the appropriate field, allowing one to choose the needed data.
the edit preset pop-up

Field

The Field settings allow for selecting the way to set the number of repetitions and the way to make calculations. The tab is presented by the following fields:

field settings of the repeater field
  • MANAGE REPEATER ITEM COUNT ㅡ a drop-down list for choosing how the blocks of the repeater will be added to the form. The list has the following options:
    • Manually ㅡ an option that, if selected, adds a button to the form and, by clicking that button, users can add as many blocks as needed. The label of the button is defined in the ADD NEW ITEM LABEL bar;Dynamically ㅡ an option that allows taking the number of repetitions from the form’s field. Once selected, it activates the FIELD ITEMS COUNT field that is intended to insert such a field;
  • CALCULATE REPEATER ROW VALUE ㅡ a drop-down list for choosing how to count the data from the Repeated Field in the Calculated Field. The list has the following options:
    • Default (returns rows count) ㅡ an option that allows a calculation for each row separately;
    • Custom (calculate custom value for each row) ㅡ an option that adds a text area for the formula, similar to the one used in the Calculated Field. That formula will be calculated for every repeater block separately, and that value may be used in other fields.

Advanced

The Advanced section includes the following fields:

advanced settings of the repeater field block
  • Add Prev Page Button ㅡ a toggle that enables the PREV PAGE BUTTON LABEL, a field for inserting text that will be displayed on the corresponding button (if added);
  • FIELD VISIBILITY 一 a drop-down list that allows selecting who can observe the block. It includes the following options: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

The JetFormBuilder Plugin: Looking Through Advanced Settings tutorial explains how to configure the Advanced settings. 

Usage of the Repeater Field in the Post Submit Actions

The “Insert/Update PostPost Submit Action allows data to be added to Custom Post Types (CPT) posts via the Repeater Fields

In this case, the Repeater meta field and Repeater Field block in the form should be created. 

In turn, the two conditions for correctly adding form data to the CPT should be met:

  • Both Repeaters should have fully identical Names (not to be confused with Labels); for example, the form’s Repeater Field block has the “cars” Name:
setting the repeater block name

Also, the Repeater meta field (from the associated CPT) has the “cars” name/ID.

setting the repeater meta field name
  • Meta fields and the form’s fields from the Repeaters should have fully identical Names and Types. For example, the form’s Repeater Field block includes the “model” Text Field, “price” Number Field, and “engine” Radio Field.
setting the repeater nested field names

In turn, the Repeater meta field includes the following meta fields: “model” Text field, “price” Number field, and “engine” Radio field.

setting the meta field names

Finally, when configuring the “Insert/Update Post” Post Submit Action, the names of the corresponding meta fields should be entered into the fields of the FIELD MAP.

configuring the insert and update user post settings

That’s all about the Repeater Field available with the JetFormBuilder plugin for WordPress forms.

The Heading Field block has functionality similar to the standard WordPress Heading block – it adds a heading block. However, in contrast to the WordPress Heading block, the JetFormBuilder’s Heading Field block allows one to set the visibility rules and specify users who can see this field.

Adding the Heading Field

The Heading Field block can be inserted into a form, just like any other WordPress block. It can be found in the search bar of the block inserter (the “plus” icon) and then placed where needed.

adding the heading field

Settings of the Heading Field

The Heading Field has only two settings tabs: General and Advanced settings.

settings of the heading field

General

The General tab contains the following two settings:

general settings of the heading field block
  • FIELD LABEL ㅡ a field for inserting the field’s label;
  • FORM FIELD NAME ㅡ a field for the field’s name. This field will be filled out automatically after the text is added to the FIELD LABEL field.

Advanced

The Advanced section includes the following fields:

advanced settings of the heading field block
  • Add Prev Page Button ㅡ a toggle that enables the PREV PAGE BUTTON LABEL, a field for inserting text that will be displayed on the corresponding button (if added);
  • FIELD VISIBILITY 一a drop-down list that allows selecting who can observe the block. It includes the following options: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

The JetFormBuilder Plugin: Looking Through Advanced Settings tutorial explains how to configure the Advanced settings. 

Styling the Block

After installation and activation of the free JetStyleManager plugin, the “Block Style” button will appear in the top right corner. This plugin configures the Alignment, Border, ColorMargin, Padding, and Typography settings of the Heading Field.

That’s it. Now you know how to add the Heading Field block from the JetFormBuilder plugin to a WordPress site to write a form title that allows one to set the visibility rules and specify users who can see this field.

range form field appearance

This field creates a range with a slider in the form and gives the user an opportunity to move that slider. This way, the user chooses one value in a range. The Range Field works nicely when you want the users to evaluate something. It looks eye-catching, so it will also be a kind of decoration if there are lots of multi-choice fields already.

Settings

range form field settings

Field Settings

  • Min/Max Value. By default, the range has values from 1 to 100. If you need some other minimum and maximum values, you can set them in those bars;
  • Step. When the user moves a slider, it goes through the small steps. By default, the step is set to 1. However, you can change the value if you need it;
  • Value prefix/suffix. This is the text that goes before and after the value that is shown at the end of the range, on the right side. To create a space, use the “&nbsp;” code; in the front, it will be visible as space, not as the set of symbols.
range form field value prefix and suffix

Style Settings

range form field styling

If you have installed the JetStyleManager plugin, the Block Style button will appear in the top right corner of the editing window. Here are the styling settings you can meet there:

The Wysiwyg Field block (an acronym for “What You See Is What You Get”) allows users to create and style content, including texts, links, and images. 

On the front end, this field looks like a common WordPress editing window with a toolbar at the top. Using this window, users can add styled text, HTML coding, or other types of content to the form.

 

the

Adding the Wysiwyg Field

After creating a new form or opening a previously built one, the Wysiwyg Field block can be found in the search bar of the block inserter (the “plus” icon) and then dragged-n-dropped where required.

adding the wysiwyg field block

Settings of the Wysiwyg Field

The Wysiwyg Field block settings include two tabs: Settings and Styles. The Settings tab consists of the General, Field, Validation, and Advanced settings. In turn, the Styles tab is intended to specify the Text colour and Background for different field elements.

settings of the wysiwyg field

General

The General settings comprise the FIELD LABEL, FORM FIELD NAME, FORM DESCRIPTION, and DEFAULT VALUE fields:

general settings of the wysiwyg field
  • FIELD LABEL ㅡ a field that allows inserting the field’s label;
  • FORM FIELD NAME ㅡ a field designed for the field’s name. This field will be filled out automatically after the text is added to the FIELD LABEL field;
  • FIELD DESCRIPTION ㅡ a non-required field intended to insert the field’s description;
  • DEFAULT VALUE ㅡ a text field that allows inserting data that will be automatically shown in the field. However, it can be changed by the user who completes the form. Pressing the “Dynamic Tag” icon opens the Edit Preset pop-up with the SOURCE drop-down list, which has the following options: “Post,” “User,” “URL Query Variable,” “Option Page,” and more. In turn, each selected option activates the appropriate field, allowing one to choose the needed data. Also, this pop-up includes the Restrict access toggle that allows restricting users who are allowed to edit this value. The required settings should be saved by pressing the “Update” button.
edit preset pop-up

Editor

These settings configure the size of the Wysiwyg window. They are presented by the ROWS slider, which allows setting the number of rows needed in the Wysiwyg window. The ROWS field ranges from 4 to 25 rows. Pressing the “Reset” button returns the default value of eight rows.

Also, the Save text styles when pasting slider allows text formatting to be preserved when copying from other text editors.

editor settings of the wysiwyg field

Validation

This section is presented by the VALIDATION TYPE field with three buttons:

Inherit ㅡ an option that sets the validation inherited from the form arguments;

Default ㅡ an option that sets the browser’s native validation;

Advanced ㅡ an option that sets the advanced rules for validation. If pressed, the FIELD EMPTY text field will appear, which is intended to insert the corresponding text.

validation settings of the wysiwyg field

More details can be found in the Advanced Form Validation tutorial. Also, the Advanced Field Validation with JetFormBuilder: Use Cases contains additional information for a better understanding of this feature.

Advanced

This section contains the following fields:

advanced settings of the wysiwyg field
  • Add Prev Page Button ㅡ a toggle that enables the PREV PAGE BUTTON LABEL field to add a text that will be displayed on the corresponding button (if the button is added);
  • FIELD VISIBILITY 一 a drop-down list that allows specifying what users can observe the block: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

The JetFormBuilder Plugin: Looking Through Advanced Settings tutorial explains how to configure the Advanced settings. 

Styles settings

These settings allow for the specification of the Text color and Background color for the Editor container, Toolbar, Toolbar buttons, Hover toolbar buttons, Checked toolbar buttons, and Status bar.

the style tab of the wysiwyg field

Setting Fonts and Font Size

The font and font sizes configuration is not available via the standard settings, but they can be configured using the following code:

In particular, one should navigate to the WordPress Dashboard > Plugins > Plugin File Editor tab and insert this code into the function.php file of the child theme or into the code snippets plugins. 

Here, the “JetFormBuilder plugin“ option should be selected in the Select plugin to edit drop-down list, and wysiwyg > module.php – in the Plugin Files drop-down list.

selecting files to edit 1x.png

Then, the initial code of the file should be scrolled, and the code presented above should be pasted.

the code added

After pressing the “Update File” button below the editor window, one should update the form with the added WYSIWYG block field. 

In turn, on the front end, a font configuration panel with menus for fonts, sizes, colors, and backgrounds will be added.

the wysiwyg field with additional settings on the front end

That’s it. Now you know how to use the JetFormBuilder plugin to add the Wysiwyg Field to your form to upload files on WordPress websites.

The Media Field block from JetFormBuilder is intended to upload media files of a pre-specified type to a website as well as use specific macros and filters

After inserting the Media Field, a button will be added to the form that allows users to upload a media file from their PC to the website. The media files uploaded this way will be stored in the JetFormBuilder folder (“wordpress\htdocs\wp-content\uploads\jet-form-builder”) on the PC where WordPress is installed. Also, the protection for directories where files are saved is provided by the Media Field functionality.

On the front end, the Media Field shows not only the thumbnails of the uploaded images but also the uploaded file names or the number of files.

media field with uploaded files

Adding the Media Field

After creating a new form or opening a previously built one, the Media Field block can be found in the search bar of the block inserter (represented by the “plus” icon) and then placed where needed.

adding the media field block

Also, the Media Field can be inserted as part of JetFormBuilder’s embedded templates, presented in the Welcome block, and patterns.

Settings of the Media Field

The Media Field block settings are presented by the General, Field, Validation, and Advanced tabs.

settings of the media field

General

The General settings tab includes the following fields:

general settings of the media field
  • FIELD LABEL ㅡ a field for inserting the field’s label;
  • FORM FIELD NAME ㅡ a field for the field’s name. This field will be filled out automatically after the text is added to the FIELD LABEL field;
  • FIELD DESCRIPTION ㅡ a non-required field intended to insert the field’s description.

Field

The following fields are presented in Field tab:

field settings of the media field
  • USER ACCESS ㅡ a drop-down list that allows choosing the type of users that will be able to upload media files. Those could be all registered users (“Any registered user”), all users permitted to upload files (“Any user who is allowed to upload files”), the users permitted to edit posts (“Any user who is allowed to edit posts”) and all users in general, including guests (“Any user (incl. Guest)”). Mind that allowing all users to upload files could make the website a target of spam and inappropriate content;
  • Insert attachment ㅡa toggle that, if disabled, allows storing the uploaded media files in the folder on the PC without accessing them via the Media Library. If enabled, this toggle turns on the FIELD VALUE drop-down list, which has three options: to store the ID of the file (“Attachment ID”), the URL of the file (“Attachment URL”), and both of them (“Array with attachment ID and URL”);
  • MAXIMUM ALLOWED FILES TO UPLOAD ㅡ a text field intended to specify how many files the users will be able to upload. The needed value can be typed or selected from the SOURCE drop-down list. In particular, pressing the “Dynamic Tag” icon opens the Edit Preset pop-up, which includes a SOURCE drop-down list with the following options: “Post,” “User,” “URL Query Variable,” and “Option Page.” 
edit preset pop-up
  • MAXIMUM SIZE IN MB ㅡ a text field intended to specify the maximum file size the user can upload instead of the default 40 MB. The needed value can be typed or selected from the SOURCE field. In particular, pressing the “Dynamic Tag” icon opens the Edit Preset pop-up, which includes a SOURCE drop-down list with the following options: “Post,” “User,” “URL Query Variable,” and “Option Page.” 
  • MAXIMUM FILE SIZE MESSAGE ㅡ a text field intended to insert the text to display the maximum allowed file size;
  • ALLOW MIME TYPES ㅡ a text field designed to add the types of files that users are allowed to upload. If left empty, all file types will be allowed. The entered data should be separated by commas, spaces, or the “Enter” key.

Validation

The setting is presented by the VALIDATION TYPE field with three buttons:

validation settings of the media field
  • Inherit ㅡ an option that sets the validation to be inherited from the form arguments;
  • Default ㅡ an option that sets the native validation that works by a browser;
  • Advanced ㅡ an option that sets the advanced rules for validation. If pressed, the FILES LIMIT EXCEEDED and FILE SIZE LIMIT EXCEEDED text fields will be shown, which are intended to type the corresponding text or use a macro.

Read the Advanced Form Validation and Advanced Field Validation with JetFormBuilder: Use Cases tutorials for a better understanding.

Advanced

The Advanced section includes the following fields:

advanced settings of the media field
  • Add Prev Page Button ㅡ a toggle that enables the PREV PAGE BUTTON LABEL field for inserting a text that will be displayed on the corresponding button (if added);
  • FIELD VISIBILITY 一 a drop-down list that allows selecting who can observe the block: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

More details on managing the corresponding settings can be found in the  JetFormBuilder Plugin: Looking Through Advanced Settings tutorial. 

Styling the Block

After installation and activation of the free JetStyleManager plugin, the “Block Style” button will appear in the top right corner. This plugin configures the Alignment, Border, ColorMargin, Padding, and Typography settings of the Media Field.

That’s all about the Media Field available with the JetFormBuilder plugin for WordPress.

The Datetime Field block by the JetFormBuilder plugin merges the Date and Time Fields into one. The field is intended to insert/select the date and time manually in the “yyyy-mm-dd” and “hh:mm pm/am” formats, respectively. Also, the data can be set dynamically or using macros.

On the front end, the Datetime Field is presented as a text field that allows typing the needed date and time. In addition, pressing a “calendar” icon allows selecting the required ones. By default, the unrolled calendar displays the current local date and time.

Also, clicking the “Clear” and “Today” links allows resetting the data or setting the current date and time, respectively.

the datetime field block on the front end

Inserting the Datetime Field

To insert this block, first, it should be found in the search bar of the block inserter (the “plus” icon) and then dragged and dropped where required into a form.

adding the datetime field block

In addition, the Datetime Field can be found in the JetFormBuilder’s embedded templates, available via the Welcome block or patterns.

Datetime Field Settings

The settings of the Datetime Field include the General, Value, Field, Validation, and Advanced tabs.

settings of the datetime field block

General

The General tab is presented by the following fields:

general settings of the datetime field block
  • FIELD LABEL ㅡ a field that allows inserting the field’s label;
  • FORM FIELD NAME ㅡ a field designed for the field’s name. This field will be filled out automatically after the text is added to the FIELD LABEL field. Also, one can change this text if needed, but only Latin letters (lower case), numbers, `-` or `_` characters are allowed;
  • FIELD DESCRIPTION ㅡ a non-required field intended to insert more information on this field, e.g., the field’s description.

Value

These settings include the DEFAULT VALUE, STARTING FROM DATE, and LIMIT DATES TO fields. They allow setting the pre-defined values, selecting them dynamically (by pressing the “Dynamic Tag” icon), and selecting the needed macro (by clicking the “wrench” icon). Plain dates for all these fields are set in the “yyyy-MM-ddThh:mm” format. 

the value tab of the datetime settings
  • DEFAULT VALUE ㅡ a field that allows adding the default value that will be shown in the Datetime Field. The following dynamic SOURCES can be set for this field (as well as for the other fields in the Value settings) after pressing the “Dynamic Tag” icon in the newly appeared Edit Preset pop-up: “Post,” “User,” “URL Query Variable,” “Option Page,” and “Related Items.”  Each selected option activates the corresponding field, allowing one to choose the needed data. Also, this pop-up includes the Restrict access toggle that allows restricting users who are allowed to edit this value. The required settings should be saved by pressing the “Update” button.
edit preset pop-up

Also, one can set the needed DEFAULT VALUE by clicking the “wrench” icon and selecting the required form’s Fields, macro from the list of available Extra macros, and filters:

selecting the form fields, macros, and filters
  • %CT::CurrentDate% — a macro that returns the date as a timestamp (to use this macro, the quotation marks are required as follows: ‘%CT::CurrentDate%’);
  • %CT::Min_In_Sec% — a macro that returns the number of milliseconds in one minute  (can be used, for example, to get the difference between dates in minutes);
  • %CT::Day_In_Sec% — a macro that returns the number of milliseconds in one day (can be used, for example, to get the difference between dates in days);
  • %CT::Month_In_Sec% — a macro that returns the number of milliseconds in a month (can be used, for example, to get the difference between dates in months);
  • %CT::Year_In_Sec% — a macro that returns the number of milliseconds in a year (can be used, for example, to get the difference between dates in years).

The macros can be used individually or with filters to provide calculations, return timestamps, etc. The following filters are available for the Datetime Field:

  • ifEmpty — a filter that returns the value passed in the argument if the macro returns an empty value;
  • length — a filter that returns the length of the string or array;
  • T — a filter that returns the time stamp and is usually used in conjunction with Date & Datetime and Time Field;
  • toDatetime — a filter that gets the timestamp from the macro and formats it according to the Datetime field format;
  • addMin, addHour, addDay, addMonth, addYear — filters that add minutes, hours, days, months, and years correspondingly via an argument to a macro that returns a date or timestamp;
  • subMin, subHour, subDay, subMonth, subYear — filters that subtract minutes, hours, days, months, and years correspondingly via an argument to a macro that returns a date or timestamp;
  • setMin, setHour, setDay, setMonth, setYear — filters that set minutes, hours, days, months, and years correspondingly via an argument to a macro that returns a date or timestamp.

The DEFAULT VALUE field, in contrast to the STARTING FROM DATE and LIMIT DATES TO fields, allows adding a condition-dependent value by pressing the “+Add Dynamic Value” button. The Edit Dynamic Value pop-up will be open with the following fields:

edit dynamic value pop-up
  • VALUE TO SET ㅡ a field that supports multiple values and allows entering or selecting them dynamically, as well as applying macros;
  • APPLY TYPE ㅡ a drop-down list that specifies how to apply the needed condition: “On change conditions result,” “Once,” or “Always”;
  • FIELD ㅡ a drop-down list that allows selecting the needed form’s field to compare;
  • OPERATOR ㅡ a drop-down list that allows selecting the needed operator to compare (e.g., “Equal,” “Not equal,” and more);
  • VALUE TO COMPARE ㅡ a text field that allows entering or selecting values to compare fields dynamically, as well as applying macros;
  • +Add New Condition ㅡ button that adds another FIELD, OPERATOR, and VALUE TO COMPARE set of fields to compare the form’s field with the specific value;
  • Set value only if field is empty ㅡ a toggle that, if enabled, allows setting the needed value only for empty fields.

Pressing the “Update” button closes this pop-up and saves the settings.

More details on how to use conditional logic in forms can be found in the Conditional Logic for Form Fields on WordPress article.

  • STARTING FROM DATE and LIMIT DATES TO ㅡ the fields of the Value settings that allow users to set the earliest time and the latest time in the “yyyy-mm-dd” format, or setting them dynamically (by pressing the “Dynamic Tag” icon) or using the macros (pressing the “wrench” icon).

Field

The Field setting is presented by the Is Timestamp toggle, which, if enabled, allows saving the date as a timestamp instead of the default plain date. Unlike the plain date data, the timestamps can be sent and used in some third-party apps like Google Calendar.

field settings of the datetime field

Validation

The Validation tab includes the VALIDATION TYPE field with three options:

validation settings of the datetime field
  • Inherit ㅡ an option that sets the validation to be inherited from the form arguments;
  • Default ㅡ an option that sets the native validation that works by a browser;
  • Advanced ㅡ an option that sets the advanced rules for validation. If pressed, the FIELD IS EMPTY text fields will be shown, which are intended to type the corresponding text or use a macro if the validation is not completed.

Read the Advanced Form Validation and Advanced Field Validation with JetFormBuilder: Use Cases tutorials for a better understanding.

Advanced

The Advanced section includes the following fields:

advanced settings of the datetime field block
  • Add Prev Page Button ㅡ a toggle that enables the PREV PAGE BUTTON LABEL, a field for inserting text that will be displayed on the corresponding button (if added);
  • FIELD VISIBILITY 一 a drop-down list that allows selecting who can observe the block. It includes the following options: “For all,” “Only for logged in users,” or “Only for NOT-logged in users”;
  • CSS CLASS NAME 一 a text field that allows inserting an additional CSS class to design the block field.

The JetFormBuilder Plugin: Looking Through Advanced Settings tutorial explains how to configure the Advanced settings. 

Styling the Block

If one has the free JetStyleManager plugin installed and activated, the “Block Style” button will appear in the top right corner. This plugin customizes the Alignment, Border, ColorMargin, Padding, and Typography settings of the Datetime Field.

jetstylemanager settings

That’s all about the Datetime Field available with the JetFormBuilder plugin for WordPress forms.