Help Center

JetFormBuilder: Form Fields Overview

JetFormBuilder: Form Fields Overview

This tutorial describes all the features of every field block that can be used within theJetFormBuilder plugin. You can learn which field is used for and how to customize it.

Every form consists of a certain number of fields. Those fields differ according to the data they allow to enter like text, numbers, media, etc. Let’s go through all of the fields’ settings.

First of all, let’s take a look at the Block settings menu on the right side of the screen. They are almost the same for all the fields.

In the General section, you can define:

  • Field Label – the field’s name that will be shown over the field;
  • Field Name – the word that will work as an ID;
  • Field Description – the text that will be shown below the field and can contain explanations to the field;
  • Default Value – some value that will be pre-chosen from the start.
general settings section

In the Advanced section, you can set:

  • Placeholder – the example text that will be shown in the field before the user starts to enter something and help him/her understand what to do;
  • Add Prev Page button – if you enable the toggle, you can add the corresponding button after this field. You should use it with the Form Break field or functionalities that work the same way;
  • Field Visibility – you can make the field visible to all users: the ones who logged in or those who haven’t.
advanced settings section

Select Field

select field block

This block adds a Select field with a drop-down list of options that can be chosen by the user. When you add it to the page, it looks like that:

select field

In the Fill Options From drop-down menu, you can choose where the options of the select will be taken from.

Manual Input

This means that you can insert the option values manually. Click the “Manage Items” button and you will see the Edit Manual Options pop-up window.

select field manual input

In the Label and Value fields, you can define the option’s title and value. The Calculated field is used when you want to apply a calculable number into the option’s value. That number can afterward be used in the Calculated Field.

You can add as many options as you need by clicking the “Add New Option” button.

Posts

This option allows you to add the posts of a certain Post Type or the values of those post’s meta fields as the options of the select. 

select field posts

In the Post Type drop-down list, you can choose the type of posts to use. Those can be the default WordPress Posts or the custom ones added with the help of the JetEngine plugin.

By default, the list of options will be formed from the IDs of the posts of the chosen Post Type. However, you can type in the name of that Post Type meta field into the Value from meta field text area. In that case, the list of options will be formed using the values of that meta field.

If you plan to use the select in the Calculated Field, you can apply a number value to the option. Type in the name of the Number meta field you created for the Post Type into the Calculated value from the meta field text area.

Terms

It can be used the same way as the Posts option. This option allows you to form the list of the select items from the terms or taxonomies. Here you can also use the default WordPress categories or the custom taxonomies created with the help of the JetEngine plugin. The Value from meta field and Calculated value from meta field text areas work the same way as for the Posts.

select field terms

Meta Field

If you want to form the select options list from the values of the certain meta field, you can choose this option and type the meta field’s name to the Meta field to get value from text area. However, be aware that only the meta fields of the page where the form is located can be used.

select field meta fields

Generate Dynamically

With the help of this option, you can generate the select’s list dynamically, using one of the special Generator Functions. There are three variants of functions:

  • Numbers range. It creates a range of numbers from 1. In the Field Name text area, you have to put the meta field name of the page where the form is located. The numeric value of the meta field will be the last number of the range;
  • Get values list from database. After choosing this function, you have to type the name of the meta field in the Field Name text area. The select’s list will be formed from the values of that meta fields, taken from all posts;
  • Get values from JetEngine field options. This function will take the options from the Checkbox, Radio, or Select-type meta field created with the help of JetEngine. You just have to put its name to Field Name. However, if you have meta fields that are named the same way in different Post Types, you shouldn’t use it with this function. It won’t work correctly. Rename the field before using it here.

The Value from meta field and Calculated value from meta field text areas work the same way as for the Posts and Terms.

Other settings

Switch page on change. If you enable this toggle, the select will work as a Form Break button. After the user chooses one of the variants, he/she will be redirected to the next part of the form.

Radio Field and Checkboxes Field

radio field block

Those two types of fields are very alike. Both of them offer the users a choice between several options. However, users can choose only one option in the Radio Field. As to Checkboxes Field, they can select as many options as they want there.

checkbox field block

All the settings are similar to the ones available for the Select Field.

Text Field

text field block

This is a field for short text information, like name or email.

text field

Besides the standard General and Advanced menu sections, it has an additional Field Settings section.

  • Field Type. Besides text, there is a number of usual data types that are commonly placed in this field. In this drop-down menu, you can choose the type of data you would like to be placed here like URL, email, phone number, or password;
  • Set Input Mask. An input mask is a grey, slightly visible text in the field that gives the user a hint about what info he/she should type in. When you enable this toggle, you can set that text for the field;
  • Mask Type. It could be a Default value and the Datetime format;
  • Input Mask. Here you can set how the data user inputs to this field will look like. Using the special symbols, you can set the form for the content. “9” means that on that place should be a numeric value, “a” – alphabetical value, “*” means there could be both numbers and letters. Symbols like brackets and dashes will be automatically added to the places you put them. “{1,n}” means that the user can place “n” symbols here. For example, the “+9{1,2}(9{1,3}) 9{1,3}-9{1,4}” mask will look like that after filling on the front: “+38(095) 193-2931”;
  • Mask Visibility. The mask doesn’t have to be visible all the time. You can also make it visible On Hover (when the user hovers the pointer over the field) or On Focus (when the used clicks on the field);
  • Mask Placeholder. You can choose the symbol that will work as a placeholder for the mask in this drop-down menu.
text field settings

Textarea Field

textarea field block

It is almost the same as the Text Field but created for a larger amount of text. 

textarea field

In the Field Settings section, you can set the Min and Max length for this field in the number of symbols.

Hidden Field

hidden field block

The name of this field speaks for itself. The data you put into this field will be invisible to the users but can be used for calculations. For example, you can insert the tax value here and add it to the total price via the Calculated Field afterward. Let’s take a look at the settings.

In the General section, you can only set the field’s name. In the Field Settings section, you can choose where to take the Field Value from. It could be the data of the default post, user, or author. If you choose the Current Post Meta option, you will have to define the meta field’s name in addition. Besides that, you can select the Manual Input option and set the static number in the Value field.

hidden field settings

Calculated Field

calculated field block

This field allows you to use more or less complex formulas to calculate prices or other numeric values. Be aware that it works with numeric values only. The formulas are placed into the main text area that appears on the page after adding the field. 

calculated field formula

%FIELD::field_name% and %META::meta_field_name% macro codes can help you use the data placed to the form fields and meta fields of the page where you have placed the form. You can do all sorts of mathematical operations using those macros as simple numbers. 

Despite putting the code into the main text area, there will be shown only the result of calculations in the front. In the Field Settings section, you can customize the output. 

calculated field settings
  • Decimal Places Number. Here you can define how many numbers after the comma will be shown;
  • Calculated Value Prefix. The text you will type in here will be shown before the result of the calculations;
  • Calculated Value Suffix. This text will be shown after the calculated result;
  • Hidden. Enable this toggle if you don’t want the users to see this field.

Number Field

number field block

Although you can put numbers into the Text and Textarea fields, you can’t use them for calculations. That’s why the Number Field was created to work with the numeric values only. 

number field settings

In the Fied Settings menu section, you can set the Min and Max Value, as well as define the Step between values (how many numbers there will be between two neighboring values).

Date Field

date field block

It is obvious from the title that this field was designed for the date input. Besides the area where you can type in the date manually, the user will also get the drop-down calendar. The date chosen in the calendar will be automatically placed in the field.

In the Field Settings section, you can enable the Is Timestamp toggle. In this case, it will be possible to send the date to external sources like Google Calendar.

date field

Time Field

time field block

That is a field created to work with the time and is useful if you want to give your users an opportunity to schedule some event for a certain time. The user can either type in the data manually or choose the time in the scrollable drop-down menu.

time field

Media Field

media field block

When you add this field to your form, it gives the user an opportunity to upload a media file from his/her PC to your website. However, unless you turn the Insert attachment toggle on, those files will only be stored on your PC ( Local Disc(:)\wordpress\htdocs\wp-content\uploads\jet-form-builder) and not available in the Media Library of the website.

You can set the way that the file will be stored in the Field Settings section.

  • User access. In this drop-down menu, you can choose who will be allowed to upload files to the website. That could be any user, anyone who is allowed to upload files, and anyone who is allowed to edit posts;
  • Insert attachment. If you enable this toggle, you will be able to choose how the attached file will be stored in the Media Library of your site. By default, it is stored as ID. In the Field value drop-down list, you can also choose to store it as an URL and array with ID and URL;
  • Maximum allowed files to upload. Here you can set how many files a single user can upload;
  • Maximum size in MB. By default, users can upload files that are less than 40 MB. You can change that value here by typing the needed value in MB;
  • Allow MIME types. This option sets what types of files can be uploaded to your website. Choose the types from the list. If you won’t choose anything, all types of files listed here will be allowed. You can choose several file types by clicking on them while holding the “Ctrl” (Windows) or “Command” (Mac) button.
media field settings

Wysiwyg Field

wysiwyg field block

WYSIWYG means “What You See Is What You Get”. It is a type of field that allows the user to add some HTML or other content. When you add this field, it will look like a common post editing window on the frontend.

Range Field

range field block

This field adds a range with a slider to the form. It could be used for ranking or choosing the quantity and selection of numeric values. 

In the Field Settings section, you can customize the range according to your needs. After setting the Min and Max Value, you can also choose the Step between them. The chosen value is shown on the right side of the slider. You can add a Value prefix that will be shown before the value and a Value suffix that will be displayed after it if you want.

range field settings

Heading Field

heading field block

If your form needs a heading to name its parts – this field can create them. You can write the text in the text area and after that customize it in the Style Block tab. Be aware that the Style Block is available only if you have the JetStyleManager plugin installed.

Repeater Field

repeater field block

In some cases, you need to give the users an opportunity to add additional rows to the form. For example, if you need the user to give you the names of the visitors but are not sure how many people would be. Repeater field allows you to create a block of fields and give the user an opportunity to add as many of those blocks as necessary. 

The fields can be added to the block that appears on the page after adding the Repeater Field.

repeater field

Besides that, there are additional settings in the right-side menu.

  • Manage repeater items count. With the help of this option, you can choose how the rows of the repeater will be added: 
    • Manually. If you choose this option, you will give users an opportunity to click a special button and add as many rows as they need. The name of that button must be inserted in the Add New Item Label bar;
    • Dynamically (get count from the form field). This option means that the number of rows will be equal to the value of the form field you choose in the Field items count drop-down menu;
  • Calculate repeater row value. Here you can set how the data placed to the repeater will be calculated. The resulting value could be further used in the Calculated field. If you choose the By Default option, it will only count the number of rows a user added. And the Custom option allows you to set a formula that will calculate the value for each row into the Calculation Formula for Repeater text area.

Form Break Field and Group Break Field

form break and page break field blocks

Those two fields were created to divide the form into blocks. Group Break Field creates a line that works like a border between two or more parts of the form. Form Break Field created a “Next Page” button dividing the form into parts that can be accessed after the user clicks it.

Be aware that Form Break Field can be customized in the Style block but only when you place the ready-made form on the page. 

Submit Field

submit field block

Every form can have only one Submit Field because it creates a “Submit” button. In the General settings section, you can change the Label on the button according to your needs.

Those are all fields that you can use in your form. Now you know what they are used for and how you can customize them using only the Gutenberg Editor tools. Create good-looking forms and enjoy the result!

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.