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.
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 JetStyleManagerplugin. After installing and activating it, the brush-shaped icon appears in the top corner of the screen.
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 blockto 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.
Settings
The Form Page Break block has three groups of settings: Button Settings, Page Settings, and Advanced:
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.
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.
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.
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:
There are cases when you can’t be sure how many fields the user will need in the form. For example, you are creating a form for table booking and want the user to insert the names of the visitors. That is why you may need a Repeater Field. With its help, you can create a repeatable block and include as many fields there as you need. The user will be able to add several blocks according to the necessary quantity.
NOTE
You can add variable blocks inside the Repeater Field, but we don’t recommend placing another Repeater Field within it.
Manage repeater item count. In this drop-down menu, you choose how the blocks of the repeater will be added to the form.
Manually. In this case, you add a button to the form, and by clicking on that button, the user can add as many blocks as needed. The label of the button is defined in the Add New Item Label bar;
Dynamically. If you have another field in the form and want to use the value of that field as a number of repeater blocks added to the form, use this option. For example, you asked the user to mention the number of people that he/she will be bringing to the restaurant. If you choose that field in the Field items count drop-down, the same number of repeater blocks will be added to the form.
Calculate repeater row value. Every added block of the repeater is counted. That count can be shown further in other fields or used in the formula of the Calculated Field. If you choose the Default option here, the counter will only count the number of added blocks. The Custom option will add 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.
Style Settings
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:
This field creates a heading for the form that can’t be changed by the users. Actually, it only names the different parts of the form. However, it is a form field, not a standard WP block, and you can set visibility rules for it.
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:
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.
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 “ ” code; in the front, it will be visible as space, not as the set of symbols.
Style Settings
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 name of this field is an abbreviation of the phrase “What You See Is What You Get”. On the frontend, this field looks like a common editing WordPress window with a toolbar at the top. Using this window, the users can add some styled text, HTML coding, or another type of content to the form.
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:
Sometimes you need the users to have an opportunity to upload media files to your website. For example, that could be a personal photo or a photo of documents. The Media Field adds a button to the form that allows users to load 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 your WordPress is installed. Also, the Media Field contains protection for directories where files are saved.
After the JetFormBuilder 2.1.0 plugin version, the media field shows not only the thumbnails of the uploaded pictures but also the uploaded file name or the number of files. To be able to upload several files, set the number of Maximum allowed files to upload in the field settings.
User access. In this drop-down menu, you can choose the type of users that will be able to upload media files. Those could be all registered users (Any registered user), all users to whom you permitted to upload files (Any user who is allowed to upload files), the users to whom you permitted to edit posts (Any user who is allowed to edit posts) and all users in general, including guests (Any user). Be aware that allowing all users to upload files could make your website a target of spam and inappropriate content;
Insert attachment. When this toggle is turned off, the uploaded media files are stored in the folder on the PC, and you don’t have access to them via Media Library. After enabling this toggle, you can choose how to store the files in the Library. In the FIELD VALUE drop-down, there are 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. This is the feature where you can define how many files the user will be able to upload;
Maximum size in MB. By default, the maximum file size the user can upload is 40MB. If you want to set another value, you can do it here;
Allow MIME types. From this list, you can select the types of files you allow the users to upload. You can choose several types by pressing and holding the “Ctrl” (for Windows) or “Command” (for Mac) button while clicking on the options. If you don’t choose any of the options here, all of them will be allowed for upload.
Style Settings
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:
This field merges the Date and Time Fields into one. If you don’t have enough space for the two fields, for date and time separately, you can use the Datetime Field. The user can type in the date and time manually following the input mask or choose the values from the calendar and timer.
The timestamp data can be used in external applications like Google Calendar, so you can make the date and time inserted by the user a timestamp – just turn on the Is Timestamp toggle.
Style Settings
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:
This field allows the user to insert the date manually and also offers a drop-down calendar to choose the date from there. The input mask is added automatically here, showing the user the right order of typing the date. The date chosen in the calendar will be put into the bar in the proper order.
If you want to use the date chosen by the user as a timestamp, enable the Is Timestamp toggle. Unlike the plain date data, the timestamps can be sent and used in some third-party apps like Google Calendar.
Style Settings
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:
Despite the Text Field allowing the user to insert numbers in it, you need a field for numbers only. With the help of this field, you can either make a bar in the form that will be filled with numbers or set a range for the user to choose from. The value of the Number Field can be used in the formula of the Calculated Field.
This field was created for numbers, so the user won’t be able to put letters or other symbols into it. By default, it is possible to type in both whole and fractional numbers into the field. It also has controls that allow choosing any whole positive or negative number, including 0, with the step of 1. However, you can change the range settings.
Min/Max Value. By default, there are no restrictions for the field, so the user can insert any value. In those two bars, you can set the maximum and minimum values if you need to limit the possible values;
Step. When the user clicks on the controls, a number, equal to the one you have set in this bar, is added to or extracted from the current value in the field. By default, it is set to 1 but you can change it to any whole or fraction number.
Style Settings
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:
This settings tab includes the basic customization fields:
FIELD LABEL — a name that appears above the field and is visible to users;
FORM FIELD NAME — a value that is used as an ID of this field. By default, it is generated from the FIELD LABEL value, but it can be changed if needed.
NOTE
The FORM FIELD NAME value should be unique for the page; it can have no spaces and contain only lowercase Latin letters, numbers, and “-” and “_” symbols.
FIELD DESCRIPTION — a description displayed under the field. It can be added to explain how to complete the field.
Field Settings
A set of options that allows customizing the input of the field:
VALUE TYPE — a value type stored in the Calculated Field. There are two options available: “as Number” and “as String”.
As Number
With the “as Number” VALUE TYPE, the Calculated Field will calculate the numeric values taken from the form fields.
These numeric values can be set in the settings of the needed field. Some of the fields have corresponding customization fields: the CALCULATE field for the Select, Radio, and Checkbox Fields, VALUE FOR CALCULATED FIELD for the Advanced Choices Field, and CALCULATED VALUE for the Switcher Field.
NOTE
If the VALUE TYPE is changed from “as Number” to “as String,” usual values will be pulled for concatenation. More about it can be checked in the next “as String” part of the overview.
When this VALUE TYPE is used, the value should be put within “%” characters. The formula will look similar to this:
%first_field% + %second_field%
NOTE
The provided formula is an example. The formula should be set individually depending on the fields added to the form.
DECIMAL PLACES NUMBER — the number of the digits that will be displayed to the right from the decimal point;
DECIMALS SEPARATOR — the separator put after the decimals. By default, it is set to “.”;
THOUSANDS SEPARATOR — the separator put after the decimals. By default, there is no separator set;
CALCULATED VALUE PREFIX — the text that will be shown before the resulting value here;
CALCULATED VALUE SUFFIX — the text that will be displayed after the calculated value.
If selected, this option can concatenate string values. For example, the “as String” VALUE TYPE can be added to summarize the content completed in the form.
In this case, the set VALUE will be taken from the fields to make concatenations and not its CALCULATE value.
NOTE
If the “as String” VALUE TYPE is changed to “as Number”, the Calculated Field numeric values will be pulled for concatenation, as mentioned above in the “as Number” part of the overview.
If one selects the “as String” option, the values should be put inside the single or double quotes. For instance, like:
‘%first_field% %second_field%’
or
‘%first_field%’ + ‘%second_field%’
NOTE
The provided formula is an example. The formula should be set individually depending on the fields added to the form.
With the “as String” option selected as VALUE TYPE, no additional settings are displayed. However, there is a common customization field left for both “as Number” and “as String” VALUE TYPES:
Hidden — a toggle that can be activated to make the current field invisible to users.
Style Settings
NOTE
This tab becomes available only if the JetStyleManager plugin is installed and activated.
To open the style settings, one should press the “brush” button.
With the Style tab, the following settings can be customized:
To perform calculations, one should put the formula in the Calculated Field.
As Number
If the “as Number” FIELD TYPE is selected, the following types of values can be used in the formula:
Static numbers — those could be either whole or fraction numbers;
Form field value — to get the value, the macro code %field_name% should be used, where “field_name” is the title you put to the FORM FIELD NAME bar;
Meta field value — the value will be taken from the meta field that is attached to the post where you have placed the form. To get the value, use the macro code %META::field_name%, where “field_name” is the name of the field.
Also, once the “wrench” icon above the Calculated Field is clicked, a list of macros is available. There, the form field macros and extra macros, including date operations, can be found.
You can do all sorts of mathematical operations with those values. Just type the formula into the Calculated Field text area. For example, let’s take a close look at the formula:
%quantity% * %META::price% + 2
This means that the field will take the value from the “quantity” form field, multiply it by the value of the “price” meta field, and add 2 to it.
Despite the fact that the formula is put into the field’s text area during editing, the users will see only the result of the calculations. The features of the Field tab allow customizing the look of that result:
As String
If the “as String” FIELD TYPE is selected, the fields from the current form can be concatenated.
For instance, two Text Fields can be concatenated with the following formula:
‘%first_name%’ + ‘%last_name%’
where “first_name’” and “last_name” are the FORM FIELD NAMES of the needed fields.
Or, one can add a custom text before or after the values. For instance, the form includes two fields: Text Field with a “your_name” FORM FIELD VALUE and Calculated Field with the following formula inside:
‘Full name: %your_name%’
With this formula, a value put inside the “Your name” Text Field on the front end will be immediately displayed after the “Full name:” string.
That’s all about the Calculated Field available with the JetFormBuilder plugin for WordPress.
The main feature of this field is that users don’t see it though it is included in the form. You can choose to assign a value to this field and afterward use it in calculations or for other purposes.
Settings
General Settings
In the Form field name bar, you can set the name of the field. It will work as an ID so choose an original name. You can use only Latin letters, hyphens, and underscores for the name. Also, make sure you don’t leave any spaces in the name – replace them with hyphens or underscores.
Field Settings
The value of the Hidden field is set in the Field Value drop-down. There is a big set of values you can assign to this field:
Current Post ID – the ID of the post where you placed the form;
Current Post Title – the title of the post where you put the form;
Current Post/Page URL – the URL of the page that the form is placed to;
Current Post Meta – the value of the meta field that is attached to the post where the form is placed. The name of the field is defined in the Meta Field to Get Value From bar;
Current User ID – the ID of the user that is currently logged in;
Current User Email – the email address of the user that is currently logged in;
Current User Name – the name of the user that is logged in right now;
Current User Meta – the value of the meta field that is attached to the account of the currently logged-in user. That very meta field can be set in the Meta Field to Get Value From bar;
Current Post Author ID – the ID of the author who published the post where you placed the form;
Current Post Author Email – the email address of the author who wrote the currently opened post;
Current Post Author Name – the name of the currently opened post author;
URL Query Variable – the query variable that can be further used for some other field;
Current Date – the date when the form is filled in. You can set the format of the date in the Format bar;
Manual Input – you can define the value of the Hidden Field manually by typing it into the Value bar;
Referer URL – helps to see from which page the user comes to the WordPress form.
Advanced Settings
If you want to add some CSS coding, you can insert it into the Class CSS Name bar.
The General settings tab includes the most common settings for field customization. Their description can be found in the General settings section overview.
NOTE
The Dynamic Value setting is transferred to the Value settings tab.
Value Settings
In the Value settings tab, one can adjust default and dynamic values.
DEFAULT VALUE— a value that will be placed in the form right away when the user opens the form. It can be completed with macros or dynamic presets to pull specific data. User can still change the value if desired;
Add Dynamic Value — a button that opens a window to adjust the dynamic value in the Textarea Field.
The Edit Dynamic Value pop-up includes the following customization settings:
VALUE TO SET — a value that will be put in the Textarea Field if the conditions are complied with;
APPLY TYPE— a drop-down menu with the following options: “On change conditions result,” “Once,” and “Always.” These refer to the application trigger.
FIELD— a list of fields from the built form. Here, the field for comparison should be selected;
OPERATOR— a defining operator that will connect the Field and Value to Compare;
VALUE TO COMPARE— here, one more value for comparison should be put;
Add New Condition — a button that allows setting more dynamic value conditions;
Set value only if field is empty — a switcher that activates the Dynamic Value feature only when the FIELD is empty in the form.
To save the changes, one should press “Update.”
Field Settings
The Field settings tab includes the following customization settings:
MIN/MAX LENGTH (SYMBOLS) — fields where a minimal and maximal number of allowed characters should be put.
Validation Settings
Validation is a process when a browser/web server verifies whether the data in the form has the correct format and works within limits set by the program.
Validation can be set both for the form and for a separate field. In the Textarea Field,there are three types of validation: “Inherit,” “Default,” and “Advanced.” More information about them can be found in the Advanced Form Validation for Separate Blocks article.
In addition to the block settings next to the form, a settings panel is displayed above the field once it is pushed.
The panel consists of buttons with icons.
The “Textarea Field” button can transform this field into a different one. Not all the fields are compatible for the transformation; their list can be found in the How to Use WordPress Blocks Transformation article;
“Click to make this field required” button makes the field required so a user can’t submit the form without completing this specific field;
“Copy name” copies the following Form Field Name value into the clipboard;
Form Field Name is the same field as in the General tab. It can be completed/changed either here or there;
“Sanitize value” option clears disallowed symbols in the field. This button should be pressed to see the specific list of options:
“Sanitize email”— deletes symbols that are not allowable in an email;
“Sanitize key”— keys are used as internal identifiers. Lowercase alphanumeric characters, dashes, and underscores are allowed;
“Sanitize text” — checks for invalid UTF-8, converts single “<” characters to entities; strips all tags; removes line breaks, tabs, and extra whitespace; strips percent-encoded characters;
“Sanitize textarea” — the option is like “Sanitize text,” but preserves new lines (\n) and other whitespaces, which are legitimate input in textarea elements;
“Sanitize title” — sanitizes a string into a slug, which can be used in URLs or HTML attributes;
“Sanitize url” — sanitizes a URL for database or redirect usage;
“Sanitize user name” — sanitizes a username, stripping out unsafe characters;
“Custom transform” — specifies the name of the PHP function to process the value.
Also, the ”Options” button is available, which shows the window with default settings used in the Block Editor.
Style Settings
To style the Textarea Field, one can use the JetStyleManager plugin, which is free and can be installed and activated on your WordPress website.
This field gathers short text information like names, emails, titles, etc. It adds a single narrow text bar to the form. The Text Field could be filled with symbols, numbers, and letters of every language.
The General settings tab includes the most common settings for field customization. More information about the settings can be found in the General settings sectionarticle.
NOTE
The Default Value setting for the Text Field is now located in the Value settings tab.
Value Settings
The Value settings tab has two optional setting fields for completion.
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 value displayed under specific conditions. Once pressed, the Edit Dynamic Value pop-up appears.
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,” or “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 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 with the dynamic value settings, the “Update” button should be clicked.
Field Settings
The following Field settings tab includes several options for adjusting that will make the Text Field more specific for the needed purpose.
FIELD TYPE — a drop-down menu with the most common types of information that can be gathered via the Text Field: “Text,” “Email,” “Url,” “Tel,” and “Password.” The type selected here defines the information considered “correct” for this field. For example, if the user places the letters into the “Tel” field, they will receive a notification saying that one of the fields was filled incorrectly;
MIN/MAX LENGTH (SYMBOLS) — the minimal and maximal number of symbols for the field;
Set Input Mask — the input mask should be used to restrict the users from inserting the wrong data into the field. When this toggle is switched on, the access to the mask settings is opened.
Clear mask before submit — a switcher that inactivates the mask once the form is submitted. This feature prevents the mask value from being saved in the meta field or sent in the email. For instance, the Text Field is completed with “(384) 682-4827”, but it includes a mask, so the user filled in the field only with “3846824827,” and the entered numbers will be saved;
MASK TYPE — the “Default” and “Datetime” variants differ only in the rules of mask creation. The first one is for any alphanumeric data, and the second is for date and time only;
INPUT MASK — a bar where the mask formula should be inserted. There are three definitions: “9” marks the numeric value, “a” means the alphabetic value, and “*” means that both numeric and alphabetic values can be used here.
For example, a “(999) 999-9999” mask for the phone number defines that the first three symbols must be numbers enclosed in brackets, followed by another three numbers, a hyphen, and four more numbers. The user can only insert numbers into that field, following the pattern set by the mask.
MASK VISIBILITY — a time when the mask will be visible to the users. “Always” means that it won’t be hidden, “Hover” will show the mask only when the user hovers a pointer over the field, and “Focus” means that the mask will become visible when the user clicks on the field;
MASK PLACEHOLDER — the symbol that will show the user the structure of the mask. That symbol will display where the number or letter has to be inserted.
Validation Settings
A validation is a feature that can be set either for the entire form or for a separate field. With the form/field validation, a browser/web server will verify that the data adheres to the specified format and within constraints set by the program.
This tab has an additional set of settings for the field. More information about it can be found in the Advanced settings section article.
Additional Settings Panel
Once the person who creates the form clicks on the Text Field, an additional settings panel with buttons is displayed.
The “Text Field” button allows converting the current field into any other required type within JetFormBuilder. Learn more about it in the How to Use WordPress Blocks Transformation article;
“Click to make this field required” is self-explanatory. If the form creator wants to make the field obligatory for completion (which means a user must fill it in to submit the form), this button should be pressed;
“Copy name” button copies the Form Field Name into the clipboard;
Form Field Name is the same field as in the general settings. Having it in this settings panel can make the form-creation process easier;
“Sanitize value” clears unwanted characters in the field. Once clicked, more specific options for selection are displayed:
“Sanitize email”— strip out all the characters that are not allowable in an email;
“Sanitize key”— keys are used as internal identifiers. Lowercase alphanumeric characters, dashes, and underscores are allowed;
“Sanitize text” — checks for invalid UTF-8, converts single “<” characters to entities; strips all tags; removes line breaks, tabs, and extra whitespace; strips percent-encoded characters;
“Sanitize textarea” — the function is like “Sanitize text,” but preserves new lines (\n) and other whitespaces, which are legitimate input in textarea elements;
“Sanitize title” — sanitizes a string into a slug, which can be used in URLs or HTML attributes;
“Sanitize url” — sanitizes a URL for database or redirect usage;
“Sanitize user name” — sanitizes a username, stripping out unsafe characters;
“Custom transform” — specify the name of the PHP function to process the value.
Another button above the Text Field is “Options,” the default settings window for any field used in the Block Editor.
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.
This is the only multi-optional field that allows the user to choose several variants. It creates a list of options, and the user can select as many of them as he/she wants. For example, you fancy creating a newsletter subscription form and want the user to choose several topics that he/she has an interest in.
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:
WordPress radio field creates a list of available options from which the user can choose only a single variant. Adding options to the list is easy, and you can create lists of various lengths. If you want the user to see the whole set of options without performing any additional actions and select only one of them, Radio Field is perfect for the task.
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:
