Category: Advanced Features

Radio and Checkbox Fields are multi-optional form fields that allow users to pick one or more options. You can manually add options to these fields or use pre-made lists. Also, you can allow users to add their custom options from the front end by applying the custom feature to the needed fields of the JetFormBuilder form.

As an example, we added the Radio Field and Checkbox Field blocks with the enabled custom feature to the job application form. 

Keep in mind that all the following steps are an illustration of how the feature works and you can create an entirely different form with other fields and submit actions that suit your needs.

Contents

• Form Creation
  • Adding form fields
  • Setting a post-submit action
• Placing the Form on the Page
• Checking the Results

Form Creation

Adding form fields

To create the form, we proceeded to the JetFormBuilder > Add New tab and got to the form editing page.

We entered the form name and added four Text Fields (for the first and last names, email, and phone number) and the Action Button as the “Submit” button.

Then, we added a Radio Field, set the FIELD LABEL and FORM FIELD NAME values, selected the “Glossary” from the FILL OPTIONS FROM drop-down menu, and picked the “Language” glossary. Such settings will let users choose their working language.

Glossaries is the JetEngine feature that allows you to create a list of the options and use it for different custom meta fields and form fields. Instead of “Glossary,” you can choose the “Manual Input” option and set the desired options manually.

We hit the “three dots” and click the “Enable custom option.”

Next, we added the Checkbox Field, set the FIELD LABEL and FORM FIELD NAME values, selected the “Glossary” from the FILL OPTIONS FROM drop-down menu, and picked the “User Skills” glossary so that users can set their working skills. Options for this field can also be set via the “Manual Input” option.

We pressed the “Enable custom option” for this field, too.

After enabling this option, the BUTTON LABEL can be set in the Value tab of the Checkbox Field. 

Setting a post-submit action

Next, we proceeded to the JetForm > Post Submit Actions tab, kept the “Send Email” action, and hit the “pencil” icon.

You can learn more about the “Send Email” action and its options from this tutorial.

In the Edit Action pop-up, the CONTENT field specifies the body of the message that will be sent by email. Insert the text or HTML code into this text area. Also, you can put values from the fields of the submitted form by clicking the “wrench” icon and selecting macros. We set such a text with inserted macros:

Hi admin!

There is a new application from %first-name% %last-name%.

Details:
Phone: %phone-number%
Work language: %working_language%
Work skills: %skills%

We configured the needed settings and hit the “Update” button.

Also, we clicked the “+ New Action” button in the JetForm > Post Submit Actions tab and selected the “Save Form Record” option that stores the form entries in the database.

After that, we hit the “Publish/Update” button to save form settings.

Placing the Form on the Page

Then, we navigated to the Pages > Add New Page tab, added the JetForm block to the page, selected the recently created job application form from the CHOOSE FORM drop-down menu, and pushed the  “Publish” button.

Checking the Results

We opened the page with the form on the front end.

For the radio buttons section of the form, the input field appeared as one of the options. When we checked it, the input field was activated, and we entered the custom option (“German”).

For the checkboxes section, the “+ Add New” button appeared (the text label may be different if you changed it in the Checkbox Field settings). By clicking it, we were able to add several input fields and enter the custom options (“Creativity,” “Decision-making,” and “Learning”). If we wanted to delete the unwanted input fields, we would have unchecked their boxes.

Also, we filled in other fields to complete the form and pushed the “Submit” button.

According to the Post Submit Actions settings, we could observe the submitted form in an email and the Form Records list.

As we can see, the custom options are displayed in the email message:

Hi admin!

There is a new application from John Smith.

Details:
Phone: +80(000)000-00-00
Work language: German
Work skills: Administrative skills, Creativity, Decision-making, Learning

To check the form record, we went to the JetFormBuilder > Form Records tab and clicked the needed record.

The record shows the saved values from the fields of the submitted form, including the custom options.

That’s all. Now you know how to allow users to add custom options to the Checkbox and Radio fields of the JetFormBuilder form on the front end.

Select, Radio, and Checkbox Fields are the multi-optional form fields that allow users to select one or more options. Using different field sources, you can add options manually or use the pre-made lists. 

This tutorial describes how to add country, month, and weekday names to the form using the bulk add feature. 

As an example, we added the Select Field with the county list to the Application form. 

Keep in mind that all the following steps are the illustration of how the feature works, and you can create an entirely different form with other fields and submit actions that suit your needs.

Contents

• Form Creation
  • Adding a pattern
  • Adding country list via the bulk-add feature
  • Setting a post-submit action
• Placing the Form on the Page
• Checking Results on the Front End

Form Creation

Adding a pattern

To create the form, we proceeded to the JetFormBuilder > Add New tab and got to the form editing page. We deleted all fields since we added new ones via the pattern.

We gave a title to the form, hit the “+” button, moved to the Patterns > JetForms tab, and picked the Application Form pattern.

Adding country list via the bulk-add feature

The pattern contained the “country” Text field.

We selected this field, hit the “Text Field” icon, and changed the field type to the “Select Field.”

Then, we left the “Manual Input” option in the FILL OPTIONS FROM field and hit the “Manage Items” button.

We hit the “Show bulk options” button in the Edit Manual Options pop-up.

Afterward, we selected the “Countries” option in a drop-down list. Besides that, you can also pick the “Three simple options,” “Days,” and “Months” variants.

Items in the list were displayed in such a way:

label : value

If you display the selected results in an email or meta field, the value will be shown (e.g., AF) instead of the label (e.g., Afghanistan). So, we edited the values to be the same as the labels. For example:

Afghanistan : Afghanistan

You can use any text editor to do this quickly.

Also, be aware that you can input data in the JSON format, for example:

[
{
"label": "Ukraine",
"value": "UA",
"calculate": 1
},
{
"label": "United States",
"value": "US",
"calculate": 2
},
{
"label": "United Kingdom",
"value": "UK",
"calculate": 3
}
]

In the textarea, it’s automatically converted into the proper format:

Ukraine : UA : 1
United States : US : 2
United Kingdom : UK : 3

The third component of every line in this format is the value for the calculated field. 

For our case, we created the option list in the “Afghanistan : Afghanistan” format and pushed the “Add to the options” button.

We hit the “Update” button to save the list of the countries.

Setting a post-submit action

Next, we proceeded to the JetForm > Post Submit Actions tab, ensured the “Send Email” action was selected, and hit the “pencil” button.

In the Edit Action pop-up, we set the “Admin email” option in the MAIL TO field.

In the REPLY TO field, we selected the “Email from submitted form field” variant, and from the REPLY TO EMAIL FROM FIELD drop-down menu, we picked the “Email” form field where a user will enter their email address. With such settings, a user would receive the answer on the email they indicated in the form.

The SUBJECT field defines what text will be displayed in the Subject bar of the received email. It can be plain text where you can also put values from the fields of the submitted form by clicking the “wrench” icon and selecting macros. We changed the text in this field to “New application.”

The FROM NAME field signifies what will be shown in the From bar of the letter. We entered the %first-name% and %last-name% macros to include the sender’s name.

The FROM EMAIL ADDRESS field specifies the email address that will serve as the sender’s in the letter. We entered the %email% macro here.

From the CONTENT TYPE drop-down menu, you can choose if the message will be “Plain Text” or an “HTML” code. We picked the “Plain text” option.

The CONTEXT is the body of the message. Insert the text or HTML code into this text area. Additionally, you can insert values from the fields of the submitted form by clicking the wrench-shaped icon and selecting macros. We set such a text with inserted macros:

Hi admin!

There is a new application from %first-name% %last-name%. 
Country: %country%
City: %city%
Phone number: %phone-number%

The ATTACHMENTS option allows users to attach files to the form and send them via email. Create one or several Media Field blocks and set them here. Since we didn’t create any Media Fields for this form, we left this field empty.

Finally, we hit the “Update” button.

We finished customizing the form and pressed the “Publish/Update” button to save its settings.

Placing the Form on the Page

Then, we navigated to the Pages > Add New Page tab, added the JetForm block to the page, selected the recently created application form from the CHOOSE FORM drop-down menu, and pushed the “Publish” button.

Checking Results on the Front End

We opened the page on the front end, filled in the fields, and hit the “Submit” button.

In the received email, we can see values from the submitted form fields, including the select field with the list of the countries.

That’s all. Now you know how to bulk-add countries, months, and days of the week to the JetFormBuilder form fields, like Select, Radio, and Checkbox.

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

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

• Create a Form with a Text Field
• Set Up the Form
• Adjust the Sanitize Value Options
  • Sanitize email
  • Sanitize key
  • Sanitize text
  • Sanitize textarea
  • Sanitize title
  • Sanitize url
  • Sanitize user name
  • Custom transform

Create a Form with a Text Field

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

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

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

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

Set Up the Form

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

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

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

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

Pick the needed POST STATUS.

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

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

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

Adjust the Sanitize Value Options

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

Let’s look through the available options.

Sanitize email

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

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

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

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

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

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

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

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

Sanitize key

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

Lowercase alphanumeric characters, dashes, and underscores are allowed.

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

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

Sanitize text

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

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

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

Sanitize textarea

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

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

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

“Hi!

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

Thank you.

John.”

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

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

Sanitize title

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

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

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

Sanitize url

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

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

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

Sanitize user name

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

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

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

Custom transform

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

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

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

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

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

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

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

      return;
   }

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

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

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

Then, we hit the “Update File” button.

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

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

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

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

Preliminary Preparations

Navigate to the InstaWP site and select the usage mode. To get access for eight hours, press the “Try For Free” button, complete the Email field, select the necessary Configuration, and press the “Launch Site Instantly” button.

To get a 7-day access covering three WordPress sites, follow these steps: 

• Sign up on the InstaWP site.

• Press the “Create Site” button on the site configuration page.

• Navigate to the Forms tab, select JetFormBuilder, and press the “Create Site” button.

• Press the “Magic Login” button on the created sites page.

After a few seconds, the JetFormBuilder plugin will be installed automatically on the created site.

Creating JetFormBuilder Forms

Navigate to the JetFormBuilder > Forms tab and press the “Add New” button.

The WordPress block editor will open a default form with Hidden and Text field blocks and a “Submit” button. Type the form’s name instead of the Add title default text.

Block Fields and Patterns

The current tutorial explains creating a booking form, which collects data on the user’s name, email, booking date, meal plan information, and number of guests and calculates the total cost of the event.

Adding field blocks

Press the plus icon and click the Column field block to set the necessary custom columns layout for the form.

Add the required form field blocks to each column. Here, the Text, Date, and Media field blocks were used.

Use the Radio field block with manual data input to allow choosing among several options.

To apply unique settings for a field, press the Form Settings tab and set the necessary options. For the current tutorial, we set the minimal and maximal length for the Text (E-Mail) field block.

To provide further calculations, use the Number field block to get data on the number of guests.

The Calculated field block allows macro usage and calculates data from other fields.

Adding pre-made patterns

JetFormBuilder allows adding pre-made form patterns (i.e., Contact Us, Registration Form, etc.).

Form Settings

Navigate to the Form Settings tab and unroll the sections where you want to make changes:

• Form Settings;
• Validation;
• Captcha Settings;
• Post Submit Actions; 
• Form Schedule;
• Limit Form Responses;
• General Message Settings, etc.

Read the tutorial to learn about Form Settings in more detail.

Press the “Publish” button to publish the form.

Adding the Form to Pages/Posts

Open a page or post, find the JetForm widget (in Elementor), and find your form in the Choose Form field.

In the WordPress Block editor, open a page or post, find the JetForm block, and choose your form in the Choose Form field.

Press the “Publish” button to publish the page/post.

Users can embed the JetFormBuilder form using a shortcode, so this plugin is compatible with almost any builder that supports shortcode output.

Collaboration With JetPlugins

That’s all about the usage of the JetFormBuilder’s forms on a free WordPress sandbox site by InstaWP and combining JetFormBuilder’s functionality with other JetPlugins.

The Repeater Field from JetFormBuilder allows users to add as many repeated entries as needed using the predefined JetFormBuilder fields (i.e., to add information on required additional services, guests, team members, photos, files, etc.).

• Adding the Repeater Field to the Form
• The Repeater Field Settings
• Adding Nested Fields
• Adding Calculated Fields
• Using Meta-Fields for Calculations
• Adding Forms to a Single Page

Adding the Repeater Field to the Form

Open the form, find the Repeater Field block, and drag-n-drop it into the form.

The Repeater Field Settings

The Repeater Field has the following groups of settings: General, Field, and Advanced.

The General settings are: 

• Field Label field to type the field label shown on the form; upper and lower cases, spaces, commas, etc. are available;
• Form Field Name field to type the field name for further use this name in calculations; this field should contain only lowercase Latin letters, numbers, ‘-’ or ‘_’ chars, and no spaces;
• Field Description field to type a text to explain something to users;
• Default Value field to type a default value or to select it from a source as Post, User, URL Query Variable, or Option Page.

The Field settings are:

• Manage Repeater Items Count drop-down menu allows selecting the items count way: Manually or Dynamically (get count from form field). 
  • If set, the default Manually option will enable users to add as many entries as they need; this option turns on the Add New Item Label bar to click the button for adding a new entry. 
  • If selected, the Dynamically (get count from form field) option turns on the Field Items Count drop-down menu to choose the form field to get the count.Calculate Repeater Row Value drop-down menu has two options: Default (returns rows count) and Custom (calculate a custom value for each row). The Custom option sets a math formula to calculate field value if selected.

The Advanced settings are:

• Add Prev Page Button toggle, if enabled, turns on the Prev Page Button Label field to type the appropriate text;
• Field Visibility drop-down menu allows choosing the visibility mode from the For all, Only for logged users, and Only for NOT-logged users options;
• CSS Class Name field to type the CSS class name to customize the Repeater field appearance.

Adding Nested Fields

To add fields inside the Repeater, press the plus icon and drag-n-drop the necessary fields.

Adding Calculated Fields

Users can add the Calculated fields into the Repeater field or outside the Repeater for calculations. Find the Calculated Field and drag-n-drop it where you need.

NOTE

Use the JetFormBuilder macros (i.e., booking macros) for price settings such as seasonal prices, rates, and outlet prices. This macro takes all this into account and gives the correct costs.

Navigate to the Repeater field settings to calculate the formulation inside the Repeater field.

Select the Custom (calculate custom value for each row) option from the  Manage repeater items count drop-down menu. This option turns on the Calculation Formula for the Repeater Field on the top of the Repeater Field to add the formula for calculations. For example, the form below calculates the additional service costs for each guest using the Calculated Fields.

To use the data calculated by the Repeater field to the Calculated Field, add the Calculated Field and type the needed formulation. Add the Repeater Field name into the formula to use the repeater data.

Using Meta-Fields for Calculations

To calculate the total costs for the CPT, use its meta fields. The formulation with meta fields will look as follows:

%FIELD::check_in_out_dates%*%META::booking_price%+%FIELD::repeater%

(here, the booking_price is a CPT meta field).

Adding Forms to a Single Page

Create a Single Page you need, navigate to the settings block, and specify the CPT you need.

Find the JetForm widget and select the form you need.

The added form on the front end looks as follows.

That’s all about adding and using the Dynamic Repeater Field in forms.

This tutorial dives into creating a custom query for the JetFormBuilder Records source using the Query Builder module of the JetEngine plugin. You will learn how to show values from different field types using dynamic widgets and shortcodes.

• Add JetFormBuilder Form
• Build JetFormBuilder Records Query
• Create Listing for JetFormBuilder Records Query
  • Output field types in the listing template
  • Use shortcode generator

Add JetFormBuilder Form

Let us start with creating a form in the JetFormBuilder directory. To do so, proceed to WordPress Dashboard > JetFormBuilder > Add New. 

For instance, we have added the following fields to the form: Text Field, Checkbox Field, Media Field, Select Field, and Date Field.

In the Post Submit Actions tab, you need to add the “Save Form Record” action to make sure the submitted values are saved in the Form Records.

Once the form is created, press the “Publish” button. Then the form should be added to the page and submitted to create a Form Record, which will be displayed on the front end later.

Build JetFormBuilder Records Query

Now proceed to WordPress Dashboard > JetEngine > Query Builder to create a custom query for JetFormBuilder Form Records.

Hit the “Add New” button to build a query. 

In the General Settings section, complete the Name field and choose the “JetFormBuilder Records” option as Query Type.

In the JetFormBuilder Records Query, you need to select a Form to query its records. Feel free to add any other settings to the query if needed.

The query is completed. Now it can be saved by hitting the “Add Query” button.

Create Listing for JetFormBuilder Records Query

At this point, we can create a Listing template for the custom query in WordPress Dashboard > JetEngine > Listings. Select “Query Builder” as a Listing source, and pick the custom “Query for Form Records” that has just been created.

In the listing template, you can display the values from fields using dynamic widgets like Dynamic Field, Dynamic Image, etc. In the case of Form Records, some values from the fields can be shown using just dynamic widgets, but some can not, which is why we will explore how shortcodes can help in this situation.

To understand better why dynamic widgets like Dynamic Field do not cover this request completely, let us turn to Query Builder again.

If you enable the Preview results toggle in the custom query, you can see that the fields of the form are saved in the ‘jfb_fields’ property as an array. It means a “Get child element from object/array” Callback is needed to get to the values of these fields.

In the case of the ‘checkbox_field’ field, a second additional callback needs to be applied to output the options from its array as well.

The Dynamic Field widget does not have the opportunity to add multiple callbacks, but the shortcodes can handle them.

Output field types in the listing template

Let’s get back to the listing template.

The first field to show is ‘text_field.’ This field has a string value, which is why the “Get child element from object/array” Callback is enough to show its value using the Dynamic Field widget.

Proceed with the ‘checkbox_field’ field. As was stated earlier, it has an array as its value, so another callback is needed to show values from the array.

This is when the Shortcode Generator of the JetEngine needs to be used.

Use shortcode generator

In the WordPress Dashboard > JetEngine directory, you can see a Shortcode Generator tab, where the shortcodes can be created.

Firstly, select a “Meta Data” Source, and insert the name of the field from which the values need to be pulled in the Custom Object Field / Meta field / Repeater key field; it is ‘jfb_fields.’

Now switch on the Filter Field Output toggle, and add the first “Get child element from object/array” Callback. This callback lets us get to the values of the Checkbox Field.

But the values of the Checkbox Field are in the format of the array. This is why another callback is required to show the values in a more presentable format. 

Therefore, we need to add another “Checked values list” Callback. In this callback, we selected a glossary because the options in the Checkbox Field in the form were added by the glossary source.

The shortcode is ready now, so you can copy it from the bottom of the page by clicking the corresponding icon.

In the Listing template, the shortcode can be displayed using the Shortcode widget or Shortcode block if a listing is created in the Gutenberg editor.

Lastly, display an image from the ‘media_field’ field.

This media field has a URL as a value and, therefore, requires a “Get child element from object/array” Callback.

Also, the Customize field output toggle should be activated with the <img src=’%s’> Field format completed that can show an image by its link.

After copying the shortcode, you can insert it into the Shortcode widget or block.

By the way, these settings can also be created in the Dynamic Field widget.

The listing template is completed. Press the “Publish/Update” button. 

You can now display it using the Listing Grid widget on the needed page. 

Check the result; now Listing Grid shows the record from the JetFormBuilder Form Records.

Now you know how to create a custom Form Records Query and display JetFormBuilder Form Records in the JetEngine Listing template.