Author: Oksana Shapirenko

Tutorial requirements:

• JetFormBuilder plugin installed and activated;
• User Login Action addon installed and activated.

The free version of JetFormBuilder allows building a Register Form, and the User Login Action addon enables the creation of a front-end login form. While they can exist as two separate forms, it is possible to combine the functionalities of registration and login in one form using the Render States.

This tutorial will explain how to use the Render States feature to combine the two forms and switch between them with a button.

Contents:

• Create a New Form
• Build the Login Form
• Render State for Login Form
• Build the Registration Form
• Render State for Registration Form
• Add the Change Render State Buttons
• Post Submit Actions
  • User Login
  • Register User
  • Redirect to Page
  • Send Email
• Set Up Events for Actions
• Add the Form to a Page
• Test the Flow

Create a New Form

Follow to WordPress Dashboard > JetFormBuilder > Forms > Add New to create a new form. To start building a new form from scratch, press the “Start from scratch” button in the Welcome block.

Give the form a title and remove all the field blocks from the canvas. To remove a block, click on it, find the “Options” button in the toolbar, and select “Delete.” 

After removing all the blocks, toggle the Block Inserter by clicking the blue “plus” icon in the top toolbar and search for the Conditional Block. Add two Conditional Blocks to the canvas. Alternatively, use the shortcut slash command “Conditional Block” to add the blocks quickly.

The first Conditional Block will display the login form, and the second block will show the registration form. Using the Change Render State buttons, we will switch between the Conditional Blocks, and as a result, the user will see only one form at a time.

Build the Login Form

Let’s build the login form in the first Conditional Block. The form will consist of a Text Field for login, a Text Field for password, and a “Remember Me” Checkbox Field. We will also add an Action Button to submit the form and a Change Render State button to switch to the registration form.

Select the first Conditional Block and click the black “plus” icon on the right side to toggle the Block Inserter. Search for the Text Field and add it. 

Open the Block settings. Give this field a FIELD LABEL — “Login,” and a FORM FIELD NAME — “login.” In this field, users will insert their login.

Next, add a new Text Field for the user password. Set the FIELD LABEL to “Password” and the FORM FIELD NAME to “password.” Then, scroll the Block settings down and find the FIELD TYPE drop-down menu. Select the “Password” option. 

After that, add a Checkbox Field below the Text Fields, but still inside the Conditional Block. Leave the FIELD LABEL empty and enter the FORM FIELD NAME — for example, type “remember-me-by-login.”

The “Remember Me” field helps to keep the user authenticated for a longer period of time — after checking the “Remember Me” checkbox, the user will remain logged in for fourteen days; if not, only for two days.

Press the “Manage Items” button to add checkbox options. In the opened pop-up, click “+ Add new Option.” Insert “Remember Me” as the LABEL of the option and “1” as its VALUE.

Save the changes by clicking the “Update” button. 

Finally, add an Action Button to let users submit the login form. Enter “Log In” as the FIELD LABEL. 

For now, the layout of the login form is completed. The Change Render State button will be added later. 

Let’s proceed to setting up the current Conditional Block.

Render State for Login Form

Select the first Conditional Block and click the button in the toolbar to assign a new condition. 

Inside the Conditional Logic pop-up, select which function to execute — “Show if…”. Then, press the “+ Add Condition” button and start setting up the condition. In the OPERATOR drop-down list, select the “Is render state” option. Pick the “DEFAULT.STATE” option from the RENDER STATE list. Click “Update” to save the changes.  

The “DEFAULT.STATE” is a form default render state. When a page with a JetFormBuilder form is opened in a browser, the form is rendered in its default state. Therefore, all the content inside this Conditional Block will be displayed simultaneously. To see the content of other Conditional Blocks designed for different form states, you should switch the form state to the one needed. 

Now, let’s proceed to building the Registration Form part. 

Build the Registration Form

Find the second Conditional Block. Inside this block, we will place a Registration Form. 

Instead of building this part from scratch, we will use a ready Pattern. Toggle the Block Inserter (the blue “plus” button) in the top toolbar and switch to the Patterns tab. Proceed to the JetForms tab and select the “Register Form” Pattern. Place it inside the second Conditional Block. 

Next, remove any extra columns and blocks. Rename the FORM FIELD NAME of the “Password” Text Field. We will give it a unique name — “register-new-password.” 

Lastly, copy the “Remember Me” field from the login form and insert it into the registration form part right above the Action Button. Give it a new FORM FIELD NAME. 

With that, the registration part is completed. 

Render State for Registration Form

Let’s configure the render state of the second Conditional Block. As previously, select the block and open the Conditional Logic pop-up. Set the function to “Show if…” and the Operator to “Is render state.” 

Then, press the “New render state” plus-shaped button to add a new custom state. 

Set the name of your choice. We will call the new state “REGISTER.” Once the new state is added, it is assigned automatically to the Conditional Block. 

Lastly, save the changes by hitting the “Update” button.

Add the Change Render State Buttons

To switch between states, the Change Render State block should be utilized. We will place this block inside both Conditional Blocks. The Change Render State blocks will enable us to switch between the form for login and the form for registration. 

Locate the first Conditional Block. Under the Action Button, place the Change Render State block. 

This button will allow users to switch from the login form, the default state, to the registration form. Therefore, give this block an appropriate label and set the “REGISTER” state into the SWITCH STATE multi-select. 

Next, add a new Change Render State block into the second Conditional Block. This button will enable users to switch from the registration to the login form. In the SWITCH STATE field, pick the “DEFAULT.STATE” option.

Post Submit Actions

The form layout is complete. The next part of the work is to add Post Submit Actions that should be executed after form submission. 

User Login

Let’s start by adding the “User Login” action, which will log users in if they submit the first part of the form. 

Switch to the JetForm settings tab in the right sidebar and unfold the Post Submit Actions tab. Instead of the default “Save Form Record” action, pick the “User Login” action. 

Click the pencil-shaped button under the action name to edit it. 

Map the USER LOGIN FIELD with the “Login” form field, the USER PASSWORD FIELD with the “Password” field, and the REMEMBER FIELD with the “remember-me-by-login” Checkbox Field from the first Conditional Block. 

Click the “Update” button to save the changes and proceed to the next step.

Register User

Click the “+ New Action” button to add a new action — “Register User.” This action will be executed if the user completes the second part of the form.

Press the “pencil” button to edit the action. Then, link the User Login, Email, Password, and Confirm Password fields with their corresponding form fields from the second Conditional Block. 

Scroll the settings down to select the USER ROLE, which will be assigned to the newly registered user. If you previously created custom meta fields for users, you can link the form fields with them. To link a form field with a custom field of a user, type in the name of the corresponding meta field in front of the form field’s name in the USER META section.

Scroll past the USER META section to activate the Log In User after Register toggle. Connect the “REMEMBER ME” FIELD with the “remember-me-by-registration” Checkbox Field from the registration form. This setting allows users to log in automatically after the registration is completed.

Follow the article about the “Register User” action to learn about each further setting in detail.

Once done, click “Update” to save the changes.

Redirect to Page

After users log in or register, it might be convenient to redirect them to different pages. For this purpose, add two “Redirect to Page” actions — one below the “User Login” action and another below the “Register User” action.

Edit the first action. In our case, we will use it to redirect users to their “Account” page after they log in. 

Select the “Static Page” option from the REDIRECT TO drop-down and select the needed page — we will select the “Account” page.

Repeat the same procedure for the second “Redirect to Page” action.

To learn how to craft the Account page, proceed to the Creating User Account Page With Different Dashboard Structures tutorial.

To make the Account page for the e-commerce website, go to the How to Create My Account Page With Endpoint Templates tutorial.

Send Email

Add the last post submit action to the form—the “Send Email” action—at the end of the actions list. This action will send an email to the user after a successful registration. Then, click the “pencil” icon to edit the action.

Proceed with the configuration according to our guide on the “Send Email” action. Set the MAIL TO setting to “Email from submitted form field” and select the “E-mail” field in the dropdown below. Next, define the subject of the email. Use the macro [%CT::SiteName%] to insert the website’s name dynamically into the email subject or content. Then, fill in the required fields FROM NAME, FROM EMAIL ADDRESS, and CONTENT. 

Once the setup is complete, click the “Update” button to save the changes.

Set Up Events for Actions

The last step in the form configuration process is to assign Post Submit Actions with Events. Events define when a specific action is executed.

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

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

Click “Update” to save the changes. Assign the same “ON.DEFAULT.STATE” EVENT to the first “Redirect to Page” action. Then, assign the “ON.REGISTER” EVENT to the rest of the actions.

Now, click “Publish/Update” to create the form. The configuration part is complete.

Add the Form to a Page

Open the page or template where the form should be located and place it using the JetForm widget (in Elementor), JetForm block (in Block Editor), or JetForm element (in Bricks). From the CHOOSE FORM drop-down list, select the built form. Learn about other settings from the JetForm Overview.

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

Test the Flow

Open the page where the form is located on the front end. Only the first part—the login form—should be visible. To switch to the registration form, click the “I don’t have an account.” — the Change Render State button.

Now, the registration form is displayed.

That’s all about using the Render States to combine the functionalities of several forms in one with the JetFormBuilder plugin on your WordPress website.

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
• Registration Form Generated with AI
• Opt-in Form Generated with AI
• Quiz Form Generated with AI
• Job Application Form Generated with AI

General Settings

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

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.

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

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.

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.

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

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

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

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

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

If you generate a form from the JetFormBuilder > Forms tab, the written prompt will be inserted into 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.

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

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

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.

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.

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

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.

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

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

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.

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

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

Let’s check the form field settings. 

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

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.

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

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.

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.

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
  • Fill in the repeater field in a post
  • Configure a form
  • Add the CSS code
  • Add PHP snippet to enable preset for guest users
  • Check results on the frontend
• Creating a Form with the Calculation of Cat Age into Human Age and Vice Versa
  • Setting up the first block of columns
  • Setting up the second block of columns
  • Check the result on the front end

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

Tutorial requirements:

• Elementor (Free version) or WordPress Block editor (Gutenberg)
• JetFormBuilder plugin installed and activated
• JetFormBuilder – additional attributes addon is installed and activated

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.

Therefore, we manually added those options to 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.

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.

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.

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.

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

The next field in the second column is the Number Field for inputting 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.

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.

The first is the Select Field named “selectdva.”

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.

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. 

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.

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

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

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.

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

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. 

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.

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.

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

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

Next, to the Number Field in the second column, we also added 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.

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.

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.

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 )

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

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.

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.

These are the options of 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.

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.

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.

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.

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.

Next, we need to add the Dynamic Value to the “selectodin-result” 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.

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.

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

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.

And this is how we created a field for a year in the column that shows the year 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.

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

The result of duplicating and dragging the fields is that the results now have the 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.

On the front end, we can see the form. 

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.

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.