With the Open AI integration, you can generate complex forms with various field types with a few clicks instead of adding every field manually. After that, you just need to tweak the field settings and configure other form options, such as post-submit actions, style settings, etc.

Contents:

General Settings

To generate a new form with AI, proceed to the WordPress Dashboard > JetFormBuilder > Forms tab and hit the “Generate with AI” button.

generate forms with Open AI

Or you can proceed to the WordPress Dashboard > JetFormBuilder > Add New tab. Here, you can push “Generate Form with AI” from the header toolbar or the “Generate via AI” button from the Welcome block.

generate via AI

These buttons trigger a pop-up with the AI generator:

generate form with AI pop-up

Currently, you can make 10 (ten) requests per month.

In the text area, you can describe what form you want to create (e.g., “Simple contact form”). 

Also, you can find tips for successful prompt writing (start with the main purpose, describe the specific fields, and use the English language for prompts) and prompt examples.

After you enter a prompt into the text area, the “Generate” button will appear.

generate a simple contact form with AI

After clicking the “Generate” button, the pop-up will show the form fields preview. 

For the “Simple contact form” request, Open AI generated three simple fields for the name, email, and message, and the “Submit” button.

If you are satisfied with the result, you can press the “Use this form/Create form with this template” button. If you are not, you can tap the “Change generation prompt” button and rewrite the request.

fields preview of the form created with the Open AI generator

We hit the “Change generation prompt” button and expanded the prompt. In the request, the form fields and the Action Button can be described, so we typed this prompt: “Contact form with name, email, subject, message, phone number, company name, website, and address fields with the “Send Email” action button.”

NOTE

It’s advisable to mention all required fields in the prompt to avoid overlooking some in the final result.

NOTE

Be aware that AI can only generate the form fields and action buttons. You cannot set the post-submit actions, advanced form validation, and other settings here.

prompt for the contact form

In the new preview, Open AI generated all the mentioned fields and the Action Button with the “Send Email” label.

form fields preview with the expanded AI prompt

After hitting the “Use this form” button, you’ll obtain two options: “replace” or “append” form settings and blocks. Pick the preferable one.

replace or append form settings and blocks

We chose the “replace” option, so the form fields and the Action Button replaced the Welcome block.

new blocks and actions have been added

Be aware that certain fields have the “Required” option activated. You can modify this and other settings individually for each form field block.

required form field

If you generate a form from the JetFormBuilder > Forms tab, the written prompt will be inserted into the form title.

AI prompt in the form title

Registration Form Generated with AI

To generate a simple “Registration” form, we opened the Generate Form with AI pop-up, clicked the “Registration form with minimum inputs” prompt example, and hit the “Generate” button.

registration form with minimum inputs

The Open AI generated three basic fields for the name, email, and password, and the “Submit” button.

registration form fields generated with open AI

After clicking the “Use this form” button, the fields and the action button were inserted into the form editing page.

registration form fields

Opt-in Form Generated with AI

To generate an “Opt-in” form with the specific Radio Field, we opened the Generate Form with AI pop-up, clicked the “Opt-in form with gender selector like radio” prompt example, and hit the “Generate” button.

opt-in form with gender selector like radio

The Open AI generated the “Name” and “Email” Text Fields, the “Gender” Radio Field with the “Male,” “Female,” and “Other” options, and the “Submit” button.

opt-in form fields generated with open AI

After clicking the “Use this form” button, the fields and the action button were inserted into the form editing page.

opt-in form fields

Quiz Form Generated with AI

To generate a Quiz form, we opened the Generate Form with AI pop-up, clicked the “Quiz form with 5 questions with choices about math” prompt example, and hit the “Generate” button.

quiz form with 5 questions with choices about math

The Open AI generated five Radio Fields with math questions, four options for each of them, and the “Submit” button.

quiz form fields generated with open AI

After clicking the “Use this form” button, the fields and the action button were inserted into the form editing page.

quiz form fields

Job Application Form Generated with AI

We proceeded to the WordPress Dashboard > JetFormBuilder > Forms tab, hit the “Generate with AI” button, and opened the Generate Form with AI pop-up.

We typed the “complex form for a job application” prompt into the text area and hit the “Generate” button.

complex form for a job application

We got the name, email, phone number, resume, cover letter, position, years of experience, highest education, and references fields generated.

job application form fields generated with open AI

We hit the “Create form with this template/Use this form” button and inserted the fields into the form editing page.

job application form fields

Let’s check the form field settings. 

The “Name,” “Email,” and “Phone” Text Field blocks have different FIELD TYPES: “Text,” “Email,” and “Tel,” accordingly.

email field type

The “Resume” is the Media Field block. In the ALLOW MIME TYPES field, the AI generator pulled the “application/pdf,” “application/msword,” and “application/vnd.openxmlformats-officedocument.wordprocessingml.document” options that are MIME types for the PDF, DOC, and DOCX formats, which are usually used for resumes. The MIME types can be modified according to the preferences.

media field to download resume

The “Position” is the Select Field with the “Manual Input” option set in the FILL OPTIONS FROM drop-down menu.

job position select field

If we hit the “Manage Items” button, we will see three options: “Developer,” “Designer,” and “Manager.” Learn how to add new options from different sources from the Multi-Optional Field Source Settings tutorial or write a more precise prompt with specified options or purpose for such a field.

manual options in the select field

The “Cover Letter” and “References” are the Textarea Fields, and the “Years of Experience” is the Number Field, and they don’t have any specific settings.

Any blocks can be added and modified according to the form’s purposes.

To complete the form, other settings should be set, like the post-submit actions, and the form can be published and placed on the page.

That’s all. Now you know how to generate forms with Open AI and the JetFormBuilder WordPress plugin.

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

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.

adding text fields and an action button to the form

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.

radio field settings

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

enable the custom option for the radio field

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.

checkbox field settings

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

enable the custom option for the checkbox field

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

button label for the custom option

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.

send email post-submit action

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.

email content with macros

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.

placing the form on the page

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.

custom options on the front end

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.

jetformbuilder form records

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

custom options in the form record

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

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.

application form pattern

Adding country list via the bulk-add feature

country text field

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.”

changing 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.

manage items button

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

show bulk options button

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.

countries list for the select field

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.

countries list where values correspond to labels

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.

save the country list

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.

send email post-submit action

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.

send email post-submit action

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%
email content

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.

placing the form on the page

Checking Results on the Front End

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

submitting the form on the front end

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.

This tutorial covers the creation of two forms that use calculations to instantly change the numbers according to the selected options in the JetFormBuilder form.

Contents

Creating a Form with the Calculation of Ingredients for a Recipe

Create a CCT and the Repeater custom field

Let us clarify first which setup is needed. We have the “Recipes” post type, in which we created the Repeater meta field. The Repeater meta field has two text fields: one for the ingredient name and the other for its size.

To learn how to create a Custom Post Type, proceed to this tutorial.

To discover more about the Repeater custom meta field, proceed to this article.

repeater custom field with two text fields

Fill in the Repeater field in posts

Next, we filled in this Repeater field in posts of the “Recipes” post type with the ingredient names and sizes.

fill in Repeater fields

Configure a form

Go to the JetFormBuilder tab and click the “Add New” button or press to edit the existing form.

In the form, we added the Select Field to create the selection of portions.

select field in the form

To add options, select the “Manual Input” option in the Fill options from field and click the “Manage Items” button. We added five portions as options. You may add as many options as needed.

manual input in the select field

Next, we added the Repeater Field to the form. Make sure to insert the exact name of the Repeater Field in the form as named the Repeater meta field in the post type. When the names are the same, the preset will successfully pull the current post’s Repeater data.

repeater field in the form

The Default Value of the Repeater Field should be pulled from the current post so the options are displayed in the form dynamically on each post.

default value for the repeater field

Next, we added the fields into the Repeater Field. We added one Text Field for the size and another for the ingredient title. Make sure to name these fields precisely as they are named in the post-type Repeater meta field. These fields are needed only to pull the values used in the Calculated Field. Eventually, these two fields can be hidden since all data will be inserted into the Calculated Field.

fields for the repeater field


To hide these Text Fields, we added custom classes to both of them. The “size-hidden-field” class is added to the “size” Text Field of the Repeater Field, and the “ingredient-title-hidden” custom class is added to the second Text Field.

custom class to hide the text field

Let us proceed with the Calculated Field in the Repeater Field. We switched the Value Type to “as String” so the text values from the Repeater meta field can be processed, as well as the calculations with the “size” Text Field and “portion” Select Field.

The formula is: 

%ingredient-title%-' + ' ' +'%portions%'*'%size%'

The macros are wrapped in single quotation marks per the requirements of the Calculated Field and string values in it. And ‘%portions%’*’%size%’ multiplies the number chosen in the Select Field by the size of the ingredient saved in the post-type Repeater meta field.

as string value type

This is all with the form setup. To save the changes, hit the “Publish/Update” button.

The last detail is to remove unneeded buttons from the form’s Repeater Field since the user should not add any data but only see it, and the repeater’s Text Fields since their values are displayed in the Calculated Field. To remove them, some CSS code needs to be used.

Add the CSS code

NOTE

Before proceeding with the tutorial′s steps, create a backup or replicate the actions on the staging site. The backup ensures the website restoration if an error occurs. To learn more, proceed to the How to Backup and Restore a WordPress Website with a Plugin article.

In the Appearance > Customize > Additional CSS tab, there is an area in which CSS snippets can be added.

Therefore, we added the following code. If you added other custom classes to the Text Fields in the form that aren’t mentioned in this tutorial, ensure to write those classes into the CSS code accordingly.

.size-hidden-field, .ingredient-title-hidden, .jet-form-builder-repeater__remove, .jet-form-builder-repeater__new{
	display:none;
}

.recipe-repeater .wp-block-columns {
	margin-bottom: 5px;
}

After adding the CSS, we hit the “Publish” button to save the changes.

Add the PHP snippet to enable preset for guest users

By default, the preset values in the form fields are visible only for the logged-in users, which means the ingredients in the form on the front end will not be displayed for the guest users. If you want to show the form with the ingredients on the front end for all users, the following snippet needs to be added to the Code Snippets plugin or the functions.php file of your current theme. Ensure to use the child theme to keep the custom code after the theme update.

add_filter(
    'jet-form-builder/preset-sanitize',
    function ( $sanitize, \Jet_Form_Builder\Presets\Sources\Base_Source $source ) {
        if ( is_a( $source, \Jet_Form_Builder\Presets\Sources\Preset_Source_Post::class ) ) {
            return true;
        }

        return $sanitize;
    }, 10, 2
);

After saving the snippet, the form will have the preset values available for all users.

Check the results on the front end

To output the form on the front end, we added the JetForm widget to the Single Post template of the Recipe post type, selected the recently created form from the Choose Form drop-down, and clicked the “Update” button to save the changes.

For more details, go to the How to Create a WordPress Single Post Page Template tutorial.

form on the single recipe page

Here is the result on the front end. The default “1” portion is selected, and the ingredients are displayed according to it.

calculated form for recipes on the front end

When we change the portion, the ingredients’ quantity is also changed. The desired result is achieved.

ingredients' quantity is changed

Creating a Form with the Calculation of Cat Age into Human Age and Vice Versa

Tutorial requirements:

The next example of the form is more complex since it has dynamic values, conditional blocks, and ternary operators in the Calculated Fields to create a Cat-Human and Human-Cat age calculator.

At the end of the tutorial, you can download this form and check it on your website. For now, let’s go through the creation process.

Firstly, we added the Select Field, which will determine the direction of how the age is calculated from cat to human age or from human to cat age.

add the Select Field to the form

Therefore, we manually added those options to the Select Field.

options in the Select Field

Set up the first block of columns

Next, we added three columns to the form. Let us see what each column represents.

To the first column, we added the Calculated Field with the “as String” Value type. The Calculated Field has such a ternary operator:

'%direction%' === 'cat-human' ? 'Cat years' : 'Human years'

It conditionally shows the label based on the option selected in the first Select Field named %direction%.

Find out more about the ternary operator in the How to Use Conditional Formulas in the Calculated Field tutorial.

ternary operator in the calculated field

In the second column, we have the Conditional Block, which consists of several fields and depends on the options of the fields in the third column.

The idea is that the field input for the year value needs to appear in the second column if the respective “Year and Month” option is selected in the Select Field in the third column. In this way, we can create one field for entering a year in the second column and another field for entering a month value in the third column.

For a better understanding, here is the result on the front end of this part of the form. If the “Year and Month” option is selected in the third column, the input field will appear in the second column for entering the year value. The Select Field with “Year,” “Month,” and “Year and Month” is also added to the second column.

To create such a scenario, we added the following rule to the Conditional Block by clicking the icon highlighted in the screenshot below.

conditional block

The “Show if” Function is based on the “Format to input the number,” which is the Select Field from the third column in which the user can select which value he wants to enter: the age as a month, as a year, or both year and month. The value for the “Year and Month” option is “both,” so we entered it into the Value to compare field.

conditional logic

The first field in the Conditional Block is the Select Field named “selectodin.” This Select Field lets users pick year, month, or year and month options like in the Select Field in the third column. This second column will be hidden once the user selects “Year” or “Month” since each option requires only one input field, which will be provided in the third column.

first field in the conditional block

These are the options added to the Select Field in the second column.

Select Field options

The next field in the second column is the Number Field for inputting the year value.

number field for the year value

And the Calculated Field in which the “Year” text is inserted to identify that the year value should be entered into the Number Field on the left side.

Calculated Field

These are not all settings for these two fields. The other settings depend on the fields from the third column that have not been created yet.

So, these are the fields in the third column. Let us also check the settings of each of them.

fields in the third column

The first is the Select Field named “selectdva.”

Select Field

The field has the “Year,” “Month,” and “Year and Month” options, which let users select the input format of the age, whether it is in years, months, or years and months.

Select field options

This Select Field also applies the following dynamic value based on the Select Field from the second column. To set it, click the “+ Add Dynamic Value” button.

In the Edit Dynamic Value pop-up, we set such settings.

In the Value to set field, we entered the Select Field name from the second column wrapped in single quotation marks and percentage signs (‘%selectodin%’). This is to get the value from the field dynamically.

The Apply type is set to “Always.”

In the Field drop-down, we picked the label of the same Select Field from the second column, which was entered in the Value to set field.

The Operator is “Not Equal,” and the Value to compare is “both.”

This dynamic value means that the “selectdva” Select Field in the third column will automatically get a value selected in the “selectodin” field in the second column. 

edit dynamic value

Let us see the result of this dynamic value on the front end to understand better the settings explained previously.

When we pick the “Year and Month” option in the right select field, the same select field automatically appears on the left side, and the input number field for the year value is displayed.

the result of the dynamic value

We selected the “Year” option in the left select field.

the year option

And the selected value is automatically transferred to the selected field on the right, and the second column with its fields is hidden.

the selected value is transferred

Let us proceed with further settings in the form. The next field added to the third column is the Number Field to accept a year or month value. We also added a “1” Min value to the field to accept only positive numbers starting from one.

minimum value is 1 to accept only positive numbers

The field on the right from the Number Field is the Calculated Field, which shows the unit that is entered into the Number Field. This Calculated Field is based on the Select Field in which “Year,” “Month,” or “Year and Month” can be selected to display a relevant option. 

Its formula is:

'%selectdva%' === 'year' ? 'Year' : 'Months' 

It means showing the “Year” text if the “Year” option is selected in the “selectdva” Select Field; otherwise, it displays the “Months” text.

The value type is set to “as String.”

Calculated Field formula to display a relevant option

The last field of this third column is the “converted-years” Calculated Field. It has the following formula:

 '%selectdva(rawCalc)%' === 'year' ? %namba-dva% : (%namba-odyn% + %namba-dva%/12) 

It is used solely for calculating the years if the “Year” option is selected in the “selectdva” Select Field from the third column. 

NOTE

Note the “rawCalc” attribute works only if the JetFormBuilder – additional attributes addon is installed and activated.

As this field is only needed for calculating in year format, this Calculated Field is set to be Hidden. However, its value will be used in other calculations later in the form.

Hidden Calculated Field

As the setup of fields in the third column is completed, we can return to the fields in the second column and apply the needed dynamic values.

We added the dynamic value to the Select Field in the second column by clicking the “+Add dynamic value” button.

add dynamic value button

Here are the settings for the Dynamic Value in detail. This dynamic value inserts the value from the “selectdva” Select Field in the third column into this Select Field in the second column.

So, we entered the Select Field name wrapped in single quotation marks and percentage signs (‘%selectdwa%’) into the Value to set field, and the Apply type is set to “Always.”

In the Field drop-down, we picked the label of the same Select Field, which was entered into the Value to set field. The Operator is “Equal,” and the Value to compare is “both.” 

dynamic value for the Select Field

On the front end, it results in the same value in both select fields.

select fields show the same value

Next, to the Number Field in the second column, we also added the Dynamic Value.

the Number Field with the dynamic value

The Edit Dynamic Value pop-up has these settings.

The Value to set is “0”, and the Apply type is “Always.”

The Field has the Select Field label from the third column. It has the same label as the field in the second column, but you can use a unique label to identify the needed field easier.

The Operator is “Equal,” and the Value to compare is “both,” which is the value of the “Year and Month” option.

The idea is that this Number Field must have “0” as a value if the Select Field in the third column has “Year” or “Month” selected.

zero value of the Number Field

Setting up the second block of columns

Now, we can get to the second set of columns and fields in them. These three columns are used for calculating and displaying the results: the cat or human age.

the second set of columns

In this set of columns, the first one has these fields.

The “label-dva” Calculated Field is used to show the selected direction’s label. The formula is:

'%direction%' !== 'cat-human' ? 'Cat years' : 'Human years'  

It is based on the very first Select Field in the form in which users select how the age needs to be calculated: from cat to human or from human to cat.

Calculated Field for showing the label of the selected direction

The second Calculated Field in this column calculates the resulting age in years.

We used a formula for calculating the cat-to-human and human-to-cat years found on the Internet and only added our meta field names:

'%direction(rawCalc)%' === 'cat-human' ? ( %converted-years% >= 6 ? ( ( %converted-years% - 6 ) * 4 +40 ) :  ( 19 * %converted-years%/3 + 1) ) : ( %converted-years% >= 40 ? ( ( %converted-years% - 40 ) /4 +6 ) : 3* (%converted-years%-1 ) /19 )
formula for calculating the cat-to-human and human-to-cat years

We also switched on the Hidden toggle since this field is only needed for calculating, and its results will be displayed via other fields.

hidden toggle for the Calculated Field

Moving on to the next column, we have the Conditional Block that will show the age in years. The idea is that this block will be displayed if the “Year and Month” option is selected in the field in the third column, so the field in the second column shows the years, and the field in the third column shows the months. By clicking on the randomize icon, you can add the needed condition. But we will add it later since the field on which the condition is based will be created in the next column.

randomize icon to add a condition to the form

This Conditional Block has the following fields inside.

The first one is the “selectodin-result” Select Field with the Dynamic Value, which also will be added later. 

The options of this field can be configured by clicking on the “Manage Items” button.

manage items for the Select Field

These are the options of the Select Field.

options for the Select Field

And the next field in this column is the Calculated Field with this formula:

Math.trunc(%result-years%)

The “Math.trunc” returns the integer part of a number so that an integer can display the year value. We also set the Value Type to “as Number” and kept the Hidden switcher disabled to make the calculated value visible on the front end.

Let us move on to the fields in the next column.

In the last column of the form, we have the “selectdva-result” Select Field with the Dynamic Value.

Select Field with the Dynamic Value

The Dynamic Value is based on the “selectodin-result” Select Field from the previous column. This is needed to automatically add a value from the “selectodin-result” which was picked into the current ‘selectdva-result’ Select Field.

This is why we added ‘%selectdva-result%’ into the Value To Set field to pull its value dynamically.

The Apply type is “Always.”

As the Field, we also picked the “selectodin-result” Select Field from the previous column. Again, you can write a clearer label of the field to identify it more easily.

The Operator is “Not Equal.”

Into the Value to Compare, we entered the “both” value from the “selectodin-result” field options.

Dynamic Value settings for the Select Field

And the following field is the Calculated Field with the formula:

Math.max( 0, '%selectdva-result(rawCalc)%' === 'year' ? %calc-years-odyn% : ( '%selectdva-result(rawCalc)%' === 'month' ? %result-years%*12 : ( %result-years% - %calc-years-odyn%) * 12 ) )

The “Math.max” will return the largest value between 0 and the number calculated in the formula.

We set the Value type to “as Number,” and kept the Hidden switcher disabled to show the result of this Calculated Field on the front end.

calculated formula

As the fields in this column are completed, we can return to the fields in the previous column to set up the needed conditions and dynamic values.

Click on the Conditional Block randomize icon to add the condition.

Conditional Block randomize icon

The condition is “Show if,” where the Field is the “selectdva-result” from the third column, which has the “Format to output the number” label.

The Operator is “Equal,” and the Value to compare is “both.”

In this way, this column will appear if the “Year and Month” option is selected in the “selectdva-result” Select Field.

show the field if the option is selected in the Select Field

Next, we need to add the Dynamic Value to the “selectodin-result” Select Field.

Dynamic Value for the Select Field

The Dynamic Value is set up the following way.

In the Value to set field, we entered the Select Field name wrapped in single quotation marks and percentage signs (‘%selectdva-result%’). This is to get the value from the field dynamically.

The Apply type is “Always.”

We inserted the same “selectdva-result” field in the Field with the “Format to output the number” label. The Operator is “Equal,” and the Value to Compare is “both” since it is a value of the “Year and Month” option.

the Edit Dynamic Value pop-up settings

Lastly, we can add the label identifiers of which value is displayed in the results.

We added two columns to the Conditional Block in the second column.

columns in the Conditional Block

In these columns, we transferred the Calculated Field by dragging it via the dots icon.

transfer the Calculated Field

And in the second column, we dragged the duplicated Calculated Field with the ‘label-one-input’ label, which displays the label of the field input for a year.

duplicated calculated field

And this is how we created a field for a year in the column that shows the year result.

field for the calculating result

In the same way, we added two columns to the third column, which displays the result. Then, duplicate the Calculated Field and insert it into the third column.

duplicate the field

Do not forget to change the field name (“selectdva-result,” in our case) so the formula will show the labels based on that field.

change the field name

The result of duplicating and dragging the fields is that the results now have the labels for the calculated results.

labels for the calculated results

This concerns the form setup for calculating the age of Cat to Human and Human to Cat.

Let us check the result on the front end

Now we can add the form to the needed page using the JetForm widget or Form block and save the page by hitting the “Update” button. More details can be found in the Adding the Form Block tutorial.

add JetForm widget or Form block to the page

On the front end, we can see the form. 

the form on the front end

Here, you can download the form and check it on your WordPress website.

For that, proceed to the JetFormBuilder > Forms tab and press the “Import Form” button. Then, push the “Choose Files” button, upload the form, hit the “Start Import” button, and you’ll move to the form editing page.

import form

That’s all. In the first half of the tutorial, we described how to create a form for the recipe ingredients calculation, and in the second half – how to set a form for the Cat into Human age calculation and vice verse. It’s possible with the JetFormBuilder WordPress plugin.

Tutorial requirements:

  • Elementor (Free version) or WordPress Block editor (Gutenberg);
  • JetFormBuilder plugin installed and activated;
  • JetEngine plugin installed and activated.

The JetEngine Data Store module allows users to save featured items. The Data Store Actions add-on adds a Post Submit Action to the JetFormBuilder forms to remove saved items with one click.

Install and Activate the Data Store Actions Add-on

The first step is the installation and activation of the add-on. 

For this, navigate to the Crocoblock Free DevTools Kit page, find the Data Store Actions add-on, and click the “Download” button.

Crocoblock Free DevTools Kit

Move to the WordPress Dashboard > Plugins > Add New tab, install and activate the add-on.

upload plugin

Create a Data Store

Create a full-set data store on the website.

For example, I created a data store for the favorite jobs in the JetEngine > JetEngine > Data Stores tab with the help of the Data Stores Overview and How to Create Favorites Page Using Data Stores Module.

Besides that, you can learn How to Create “Recently Viewed” Section Using Data Stores Module, and How to Add Terms to Data Store.

data store example

I proceeded to the page with the Listing Grid with jobs and saved several job positions.

job listing grid

Also, I went to the page with the Listing Grid with the query that shows items added to the data store. Open the page in the Elementor or WordPress (Block) editors, and click to edit the Listing Grid widget or block. 

Open the Advanced settings tab and enter the CSS ID. Later, you can enter the Listing Grid CSS ID into the form to clear the data store if the “AJAX” Submit Type for the form is set.

The Elementor view:

CSS ID for widget in the Elementor editor

The Gutenberg view:

CSS ID for block in the WordPress block editor

Create a Form

Go to the JetFormBuilder > Add New tab. Enter a title, delete the Text Field, and change the Action Button label according to your needs. 

submit button label

Navigate to the JetForm tab and unfold the Post Submit Actions tab. Pick the “Clear Data Store” option and hit the pencil icon.

clear data store post submit action

In the Edit Action pop-up, enter the Data store slug (you can find it in the JetEngine > JetEngine > Data Stores tab) and the Listing Grid CSS ID into the Listing to update field. If you want to clear data stores of several Listing Grids, separate the CSS IDs with commas. The Listing to update option helps to update Listing Grids if you select the “AJAX” form Submit Type when you set the form placed on the page.

Then, push the “Update” button.

data store slug and listing to update

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

Place the Form

Open the page where the data store items are in Elementor or Gutenberg editor and place the JetForm widget or Form block.

Choose Form from the drop-down menu and set other settings. You can learn more from the Adding the Form Block tutorial.

jetform widget

Settings in the WordPress editor are the same:

form block

Also, you can hide the form after removing the data store items using the JetEngine Dynamic Visibility Feature.

NOTE

The Dynamic Visibility feature works only with the “Page Reload” Submit Type.

In the Elementor editor, go to the Advanced settings tab and open the Dynamic Visibility tab. Enable the toggle, pick the “Show element if condition met” Visibility condition type, and “Query Has Items” Condition. From the Query to check drop-down, select the needed custom query that shows data store items in the Listing Grid on the page.

visibility condition for the form

In the WordPress (block) editor, click the eye icon.

dynamic visibility icon in the Gutenberg editor

Enable the toggle, pick the “Show element if condition met” Visibility condition type, click the “Add new item” link, and select the “Query Has Items” Condition. From the Query to check drop-down, select the needed custom query.

dynamic visibility in the Gutenberg editor

Finally, click the “Update” button to save the form.

Check the Results

Open the page on the front end.

clear data store action on the front end

Hit the “Submit” button to check how the action works.

After that, all data store items are successfully removed from the page, and the form is hidden according to the visibility condition.

data store items are removed with the action

That’s all. Now you know how to clear the data store with the JetFormBuilder plugin.

Friendly Captcha is a proof-of-work based anti-bot solution that generates a unique crypto puzzle for each visitor. As soon as the user fills out a form, it gets solved automatically. The process usually takes a few seconds.

Proceed to the JetFormBuilder > Settings > Captcha Settings tab and unfold the Friendly Captcha section.

friendly captcha settings

The Site Key and Secret Key can be registered on the Friendly Captcha website. If you enter the keys in the corresponding fields, you will be able to apply them further to any form with one click.

Go to the Friendly Captcha website and create an account or sign in.

create an account or sign in to friendly captcha

Navigate to the Applications tab and press “Create new application.

friendly captcha applications

There are such settings:

  • Name. Enter a name of a new app; for example, it can be the name of the website or service;
  • Domain. This is a bar for your website domain;
  • Puzzle Endpoint. Select the geographical area in which the application will be hosted;
  • Smart Difficulty Scaling. It allows you to determine the resolution time of the Captcha according to the user’s terminal and the difficulty level you set.
create a new app on the friendly captcha

If you unfold the Show advanced options section, you’ll see the Difficulty bar. Here, you can set the difficulty rules to be applied to the Captcha attached to the Application.

friendly captcha application advanced options

When you finish, hit the “Save Changes” button.

After the app is created, you can copy the Site Key from the listing item.

friendly captcha site key

Also, you can hit the “Manage” button and see the Sitekey from the editing app page.

friendly captcha manage app page

To get a Secret Key, move to the API Keys tab, enter the website or service name into the Name bar, and press the “Create API Key” button.

create API key

Copy the appeared API Key.

friendly captcha API key

Enter the Site Key into the corresponding bar and the API Key into the Secret Key bar. Push the “Save” button.

friendly captcha site key and secret key for jetformbuilder

Note that you can find more information about adding Friendly Captcha to your website in this documentation.

Create a new JetFormBuilder form or proceed to the created one, unfold the Captcha Settings menu section, and select the “Friendly Captcha” Captcha provider.

friendly captcha provider

You can add the Site Key and Secret Key separately to this form or enable the Use Global Settings toggle.

friendly captcha site key and secret key added by global settings

By default, the captcha is added before the submit button. However, if you hit the “Add Friendly Captcha block” button, you’ll add the block to the form that can be moved.

friendly captcha block in the form

When you finish, hit the “Update” button.

Place the form on the page and open the page on the front end.

The Friendly Captcha anti-robot verification appeared before the submit button. The verification will run if you hit the “Click to start verification” button or when you start filling out the form fields.

form with friendly captcha on the front end

That’s what the successful friendly captcha verification looks like.

successful friendly captcha verification

That’s all. Now you know how to add the Friendly Captcha anti-bot protection to a JetFormBuilder form to protect the WordPress website from abusive activities.