Category: Advanced Features

Global Form Macros is a JetFormBuilder feature that allows you to use the value of some field in the layout of another block.

You can add the <!--JFB_FIELD::field_name--> macro inside the HTML tag or add it to one of these attributes:

• href;
• src;
• alt;
• title.

Contents:

• How to Add the Form Macros to the Buttons Block
• How to Add the Form Macros to the Label of the JetForm Fields

How to Add the Form Macros to the Buttons Block

For instance, if you want to add the form macros to the Buttons block, it’s better to do it via the “Edit as HTML” button.

Paste the <!--JFB_FIELD::field_name--> macro into HTML before closing </a> tag. Change the field_name to the actual name of the field from where you want to get the value.

For example, we have entered the name of the checkbox field “kind,” where the user can check the kind of trip.

Proceeding to the front end, we can see the button in the form with the “Read more about” text.

If you check an option from the checkbox, it will be shown in the button. If you choose several options, they will be separated by commas. You can add the page link to the button with the information about all trips so that the users can find out about the needed trip.

How to Add the Form Macros to the Label of the JetForm Fields

If you need to place form macros into the label or description of some JetForm fields, we do not recommend you add it via inline editing because the symbols will be transformed, and you’ll get the invalid macro on the front end.

So, it’s better to enter the form macro in the Field Label. Feel free to enter as many form macros with the field names as you need. You can also mix form macros with the plain text like that: price per night: <!--JFB_FIELD::price--> $. It will look on the front end like that: price per night: 170 $.

With these settings, users can see the values at the end of the form they have chosen. Such settings can also be applied to the multi-step form so that users can see all their choices at the last step before submitting the form.

Such a way also works with the Action Button block since it cannot be edited as HTML. We have added the macro of the Text Field in the Field Label of the Action Button.

When users enter the text into the Text Field, the same text is shown in the Action Button on the front end.

That’s it. You know now how to add value from the JetForm field by using the global form macros.

• Upgrade the Form
• Multi-Step WordPress Form
• Multi-Step WordPress Form with Conditional Logic

Filling out a comprehensive form can be a tiresome process for users. 

Optimize the process by creating a multi-step WordPress form with a step indicator using the JetFormBuilder plugin. This free WordPress plugin allows customizing a form and making it more user-friendly.

Let’s learn some tips for making the form more convenient to fill out.

Upgrade the Form

• Group fields logically — divide the form fields into coherent sections with the help of the Form Page Break block. Name these steps accordingly;
• Use the progress bar — show a step indicator to notify users about the number of steps left until completing the form;
• Set visibility conditions — enable certain fields to display under the specified conditions;
• Optimize the “Next/Submit” buttons — enable the controls to make the form more user-friendly.

As an example, we created two forms that differ in the form break logic. One was made with just form breaks, while the other implies conditional visibility.

Multi-Step WordPress Form

Our first form allows site visitors to leave a website review. It contains a header and three pages. The first page is the “Start Page,” where users can fill out contact information. The second page is called the “Second Page,” where users will rate the website using the Radio Field. The third step is named the “Last Step,” where users can extend their feedback. At the top of each page is a required field for inputting the email address.

To add a multi-step WordPress form, proceed to JetFormBuilder > Add New.

Give a title to the form. For instance, we created a Website Feedback form with the corresponding name.

In the JetForm tab of the right sidebar, scroll down to the Form Settings section and toggle on the Enable form pages progress switcher. With the help of this switcher, a progress bar will be displayed on top of each step in the form.

There are three types of fields shown by default: Hidden Field, Text Field, and Action Button. Feel free to delete them if they are unnecessary in your case.

We deleted the Hidden Field and kept the Text Field. In this field, the user is expected to enter the email address, so we named the field “Email” and selected the “Email” FIELD TYPE. Above the Text Field, we added a Paragraph block and entered a message encouraging users to leave their email addresses. This part of the form serves as a header and is visible on every page of the form. You can put these two blocks inside the Columns or Flexible Container blocks to have more control over the layout of this section.

Next, we added the Form Page Start block, which indicates the start of the first form page. Everything above this block is regarded as a header. 

Don’t forget to enable the Is Required option near desired fields to make them mandatory.

After that, we started building the first page of the form. We added a Columns block under the Form Page Start block. In each column, we added a Text Field where the user can enter the name and surname.

It is the first logical part of the form, and thus, we divided it with the help of the Form Page Break. 

In the Form Page Break block settings, the Enable “Next” Button toggle can be enabled, and the NEXT BUTTON LABEL can be set to change the default name of the “Next” button. In this first Form Back Break block, we didn’t use the “Back” button, so we kept the Add Prev Page Button switcher disabled. The LABEL OF PROGRESS option can be filled in if you want to show the step labels below the progress bar.

Also, you can write the VALIDATION MESSAGE, which will be displayed if users don’t fill out the fields properly.

The first segment of the form is ready. The Form Page Break indicates that the part is complete, and the next section will be displayed after completing the first one. 

The second part of the form consists of the Radio Field and one more Form Page Break block. Instead of the Radio Field, you can use the Advanced Choices Field block to make its layout more appealing.

This time, we enabled both the “Next” and “Prev Page” buttons to lead users to the previous or next part of the form when clicked.

After all the customizations, we added one more part, which is the final, before submitting the form. This time, we put a Checkbox Field and Textarea Field blocks. Then, we placed a Columns block with two columns, and each column contains an Action Button. The first Action Button allows users to go to the previous step in the form, while the second one allows them to submit the form.

Below, we placed the last Form Page Break block.

In the Form Page Break settings, we turned off both the “Next” and “Prev Page” buttons and set only the “Last Page” LABEL OF PROGRESS.

Note that you can customize the fields in the WordPress block editor with the help of the free JetStyleManager plugin. Also, if you display the form using the JetForm widget of Elementor, you can customize the fields in the JetForm widget Style settings.

Additionally, you can use the Advanced Form Validation instead of the default validation to add custom rules and error messages for each form field so users can fill in fields only in the suitable format.

Once you are done with all the customizations, click the “Publish/Update” button. 

Before placing the form on the page, navigate to the WordPress Dashboard > JetFormBuilder > Settings tab and adjust the settings available for multi-optional forms in the Form Accessibility section.

Let’s add our form to the page and check how it looks.

Go to Pages > Add New or open one of the existing pages or templates. Now, we need to use a JetForm block. If you add the form in Elementor, use a JetForm widget. In other page builders, you can use a shortcode to display the form.

Choose a form that you have just created and customize its settings:

• FIELDS LAYOUT — choose how the label will be positioned relative to the input field. Select either the “Column” or “Row” option;
• REQUIRED MARK — type a symbol that will be displayed near the required fields. By default, it is an asterisk;
• FIELDS LABEL HTML TAG – here, you can select the HTML tag that will represent the field’s label. The available options are “DIV” and “Label”;
• SUBMIT TYPE — pick from the “Post Reload” and “AJAX” options. The second option will not reload the page after submitting a form, while the first one will;
• Enable form pages progress — toggle to add a step indicator to the form. Keep this option disabled if the step indicator is already enabled in form settings;
• ADDITIONAL CSS CLASS(ES) — put the supplemental CSS classes if needed.

When you are done editing, click the “Publish/Update” button. Now, you can check the form on the front end.

Note that when going to the next page, the email field stays on top of the page.

The WordPress multi-step form is ready. To make the form logic more complex, check the next chapter about creating a multi-step form with conditional logic.

Multi-Step WordPress Form with Conditional Logic

To build a multi-step form with conditional logic, head to the JetFormBuilder > Add New tab. 

We provide an example, while you can create any other form suitable for your needs.

We named the form and deleted the default Hidden, Text, and Action Button Fields since we don’t need them. 

The goal was to create a form to gather user feedback about the website. The form consists of three sections: the first to enter the contact information, the second section to enter the positive feedback, and the third multi-step section to enter the negative feedback. The second and third sections will appear conditionally – if the user decides to share the positive feedback, the second section will be displayed; if the feedback is negative, the third section will appear. To let users choose which feedback they want to share, the first section will contain a Radio Field.

Let’s build the first section. We added three Text Fields for user email, name, and surname, and one Radio Field. The fields can be separated into columns with a Columns block if needed. 

In this case, the Radio Field options were filled in manually. Feel free to use other sources from the Fill Options From drop-down menu.

We hit the “Manage Items” button and set the values as “yes” and “no,” as we need them to implement the conditional logic.

This part of the form is the main one. Depending on the answer given in the Radio Field, the following fields will be changed. Let’s build this logic with the help of a Conditional Block.

We added a Conditional Block to the page. Inside, we built the content of the second section that should appear if users select the “yes” answer in the Radio Field above. This section is divided into two steps.

Firstly, we added three blocks inside the Conditional Block: a Progress Bar, a Checkbox Field, and a Form Page Break block. These blocks constitute the first step in the form, where users need to fill the Checkbox Field. 

The Progress Bar block doesn’t require any configuration. In the Checkbox Field block, you can enter the options of your choice. 

Let’s take a closer look at the Form Page Break block settings. We filled in the LABEL OF PROGRESS in the Form Page Break settings to change the default Progress Bar label for the first step, hit the Enabled “Next” button toggle, and set a label to this button.

After we finished building the first step of the form, we proceeded to the second step. Below the Form Page Break but still inside the Conditional Block, we added a Progress Bar, a Textarea Field, and a Columns block with two columns. In each column, we inserted an Action Button block.

The left Action Button will lead users to the previous page, and the right Action Button will submit the form.

Now, we can move on to configuring the Conditional Block itself.

Firstly, we set the label for the last step of this multi-step section in the LAST PAGE NAME input field.

Then, we hit the “Conditional Logic” icon to set conditions for the Conditional Block.

We defined conditions for the “yes” option: we selected the Radio Field label from the FIELD drop-down menu, chose the “Equal” OPERATOR, and set the “yes” VALUE TO COMPARE.

After adjusting all the Conditional Block settings, we pushed the “Update” button.

Let’s add one more Conditional Block for the “no” value. If users decide to leave negative feedback, the form will present the content of this Conditional Block.

To complete the first part of this multi-step section, we added a Progress Bar, Textarea Field, and Form Page Break blocks.

We duplicated the Form Page Break block settings from the previous setup.

To build the second page in this section, we added a Progress Bar, a Paragraph, and two columns with Action Buttons, the same as previously.

We clicked the Conditional Block to set the LAST PAGE NAME and conditions.

We hit the “Conditional Logic” icon to open the corresponding pop-up.

We defined conditions for the “no” option: we selected the Radio Field label from the FIELD drop-down menu, chose the “Equal” OPERATOR, and set the “no” VALUE TO COMPARE.

We updated the Conditional Logic by hitting the “Update” button.

Note that you can customize the fields in the WordPress block editor with the help of the JetStyleManager plugin. Also, if you display the form using the JetForm widget of Elementor, you can customize the fields in the JetForm widget Style settings.

Additionally, you can use the Advanced Form Validation instead of the default validation to add custom rules and error messages for each form field so users can fill in fields only in the suitable format.

Once you are done with all the customizations, click the “Publish/Update” button. 

Before placing the form on a page, navigate to the WordPress Dashboard > JetFormBuilder > Settings tab and adjust the settings available for multi-optional forms in the Form Accessibility section.

We created a default WordPress page by going to the Pages > Add New tab.

Next, we placed a JetForm block onto the page. We chose a newly created form in the similarly named drop-down menu and adjusted all the following fields:

• FIELDS LAYOUT — choose how the label will be positioned relative to the input field using the “Column” or “Row” options;
• REQUIRED MARK — type a symbol that will be displayed near the required fields. By default, it is an asterisk;
• FIELDS LABEL HTML TAG – here, you can select the HTML tag that will represent the field’s label. The available options are “DIV” and “Label”;
• SUBMIT TYPE — pick from the “Post Reload” and “AJAX.” The second option will not reload the page after submitting a form, while the first one will;
• Enable form pages progress — toggle to add a step indicator to the form. Keep this option disabled if the step indicator is already enabled in form settings;
• ADDITIONAL CSS CLASS(ES) — put the supplemental CSS classes if needed.

When everything is ready, we hit the “Publish/Update” button and checked out the result.

Once the “yes” value is picked in the radio field, the form displays one set of fields.

If the “no” value is chosen, other fields are displayed.

Well done. Now you know how to build various WordPress multi-step forms using the JetFormBuilder plugin.

• Setting the JetFormBuilder Pro Addon
• Creating a HubSpot Developer Account
• Linking HubSpot Account with JetFormBuilder
• Setting the HubSpot as Post Submit Action in Forms

Setting the JetFormBuilder Pro Addon

Install and activate the JetFormBuilder Pro Addon. Navigate to the JetFormBuilder > Addons tab, select the HubSpot addon, and activate its license.

Navigate to the JetFormBuilder > Settings > HubSpot API tab and move the Enable OAuth 2.0 toggle.

Creating a HubSpot Developer Account

Go to the HubSpot website and press the “Create a developer account” button.

Select the “Create App Developer account” button.

Create a free developer account using your email: enter your email, the verification code sent, your password, name, and job role, and give your developer account a unique name.

After you’ve set these data up and signed in, you’ll start on the developer account homepage, where you can create your first app or a test account.

Specify the account type or skip this step.

Create the account you need – an app or a test account – by selecting the appropriate tab.

Here, the app was created. Manage the app settings or skip this step (here, this step is skipped).

Then, you will be redirected to your HubSpot account.

Linking HubSpot Account with JetFormBuilder

Return to your website dashboard and copy the Your Redirect URL link from the JetFormBuilder > Settings > HubSpot API tab of your site (here, https://findero.local/wp-admin/admin.php?action=jet_fb_hubspot_oauth).

Go back to your HubSpot account. Press the “Create app” tab.

Navigate to the Auth tab of your HubSpot account.

Paste the copied link to the Redirect URLs field of the Auth tab (here, https://findero.local/wp-admin/admin.php?action=jet_fb_hubspot_oauth).

Scroll the Auth tab of the HubSpot API site and locate the Find a scope field. Unroll the tabs (CMS, CRM, Settings, and Standard) to pick the settings you need. Press the “Save changes” button.

Scroll down the Auth tab of the HubSpot API site and copy the code/link in the Client secret and Install URL (OAuth) fields on the HubSpot site.

NOTE

The Install URL (OAuth) field link is available after selecting at least one required scope from the CMS, CRM, Settings, and Standard tabs.

Then paste these values to your site’s Client Secret and Install URL (OAuth) fields on the JetFormBuilder > Settings > HubSpot API tab.

Then click the “Authorize” button to log in via OAuth 2.0. Afterward, you’ll be redirected to the MyHubSpotApp page with the proposition to set the two-factor authentication.

Skip the proposition or set the authentication for further account usage.

If you have two or more HubSpot accounts, specify the necessary one from the list.

If the authorization is successful, WordPress will show the following text:

JetFormBuilder HubSpot Action: Your application is successfully authorized via OAuth 2.0

Setting the HubSpot as Post Submit Action in Forms

Open the required form, click the Post Submit Action section on the right panel, choose “HubSpot,” and click the pencil icon to edit the action.

Enable the “Global Settings” option. After that, choose the “API Key” or “OAuth 2.0” authorization type.

Press the “Sent Request” button. After you’ve chosen the type and clicked the “Send Request” button, you will see the complete list of the “HubSpot” action settings. Filling in most fields here is unnecessary for the proper work. The only required field is Email.

After setting the HubSpot action, press the “Update” button. When the user submits the form, the new subscriber will appear in the Contacts list of your HubSpot account.

That’s all about adding the HubSpot OAuth 2.0 functionality via Post Submit Actions of the JetFormBuilder forms.

There is the possibility to create a number range for Checkbox, Select, and Radio fields dynamically.

Once you add one of these types of fields into your form, you are able to choose Generate Dynamically option in the Fill Options Form field. Click on the Number range by manual input in the Generator Function field and give needed values to the fields below.

It is clear from the names of these fields that the minimum value of the range should be set in the Start of range field; the End of range is for the maximum value. The interval of the range can be set in the Step field.

Thus, this feature may save your time creating all options automatically instead of adding them one-by-one manually. 

Conditional Visibility is a functionality that allows you to make parts of the form invisible to the users until some conditions are met. Conditions and fields to be hidden are set with the help of the Conditional Block.

• How Does It Work?
• Settings
• Operators
• Date/Time/Datetime Fields

How Does It Work?

When you add the Conditional Block to the form, it looks like that:

Inside the block, you can see a big button with a plus-shaped icon. You can add any field to the conditional block by clicking on it. Let’s name it a connected field. When the defined conditions are met, the connected field will be shown (or hidden, depending on the settings). You can add several connected fields but be aware that they will be shown and hidden in one pack.

Afterward, you choose another field of the form – let’s name it a target field – and the operator in the settings window. The operator defines the condition that the target field value should meet. For example, you can choose that the value of the target field has to be equal to some value.

The conditional block compares the value of the target field with the value set in the settings window. If it meets the operator’s requirement, the connected field will be shown (or hidden).

To open the Conditional Block settings window, press the button with the crossed arrows icon, which is placed on the top tool panel to the left of the “Options” button. Also, you can press the pencil-shaped button in the Block section on the right.

The Conditional Logic pop-up window contains all the conditional visibility settings. Click the “+Add Condition” button to observe all settings.

Settings

• Which Function Need Execute? Here you can set the visibility of the connected field by default. If you choose the “Hide if” option, the connected field will be visible until the conditions are met. The “Show if” option will make the field invisible by default, and it will only appear if the conditions are met;
• Remove hidden elements from page HTML. This option is available after you select the “Hide if” or “Show if” function. If this block is removed from the HTML, then when sending the form, the values from the inner fields will be empty. For example, in the Send Email action in the email content, the field value can be empty if it is hidden (in DOM) at the form sending time. Also, this feature provides security: a usual user won’t be able to easily find the fields and make them visible. As well, now it is possible to make the fields required inside the block;
• “Close” button. When you click on it, it folds/unfolds the condition;
• “Arrow” buttons. If you have several conditions, those buttons move the condition up or down in the list. It doesn’t affect its efficiency. The position in the conditions list may be important for the navigation;
• “Duplicate” button. It creates a duplicate of the condition;
• “Delete” button. This button deletes the condition;
• Field. Here you can choose the target field. The value of this field will be compared with the value from the Value to Compare bar. You choose one of the fields that are already added to the form, so all of them will be listed in this drop-down menu, named by their labels;
• Operator. The option you choose here will define how the value of the target field will be compared to the data you put into the Value to Compare text area. All options from this drop-down will be described further in the Conditions chapter;
• Value to Compare. The value you set here will be compared to the value of the target Field. It can be text, symbols, and numbers. If you push the wrench-shaped button, you can use macros with the form field names and the Extra macros for the Date/Time Field. Besides that, you can fill this field dynamically with the value from some posts or user’s meta fields. To do it, click on the button with a coin-stack-shaped icon. You will be offered to choose the Source:
  • Post. Specify where to take the data from (Get post ID from), and choose the meta field to take the information from (Post property);
  • User. Specify where to take the data from (Get user ID from), and choose the meta field to take the information from (User field);
  • URL Query Variable. This is a small piece of data located in the URL. For example, the “post=123” in the post’s URL is a query variable that shows the post’s ID. The query variable is a parameter you can choose by yourself. As an example, you can set the query variable “items” and type it into the appeared Query variable name bar. Afterward, you can manually add that variable to the Post permalink or Dynamic Link of the JetEngine plugin. Then the form will check if the URL of the page it is placed on has that variable and autofill the data in the form only if it does;
  • Option Page. This option is available with the JetEngine plugin. It lets you display value from the Option Page field. To learn more, proceed to the Options Page Overview.

• “+Add Condition” button. You can add as many conditions as you need for your form by clicking on this button;
• “Add OR Operator” button. By default, all conditions are connected with the Operator AND, and the connected field will be only shown if all conditions are met. If you add Operator OR between conditions, the connected field will be displayed if one of the conditions is met.

Operators

Equal

The condition will be met if the value in the target field equals the value from the Value to Compare bar.

Example:

The connected field (“Number of rooms”) appears only if the value of the target field (“Number of visitors”) is equal to “3”.

Not equal

In this case, the connected field will stay visible/invisible if the value of the target field is not equal to the value from the Value to Compare bar.

Empty

The field will be shown/hidden if the connected field contains no value. This condition is useful for fields that take values in particular formats (JSON, date period, address), e.g., Check-in/check-out dates, Media Field.

Not empty

The field will be shown/hidden if the connected field contains some value.

Greater than

The connected field will be shown/hidden if the value of the target field is greater than the one you put in the Value to Compare field.

Lesser than

If the value of the target field is lesser than the number you put to the Value to Compare text area, the connected field will be shown or hidden.

Between

This operator allows you to insert a range into the Value to Compare text area. The first and last numbers have to be typed in ascending order (from lesser to greater) and separated by a comma. The first and last numbers also count in the range. If the value of the target field is equal to one of the numbers in the range, the connected field will be shown/hidden.

Example:

Let’s assume you’ve put the range “2,5” to the Value to Compare text area. The connected field will be shown or hidden if the value of the target field is equal to “2”, “3”, “4”, or “5.”

Not between

This operator works similarly to the “Between” operator, but it shows/hides the connected field if the target field value is not equal to one of the numbers in the range or if the field is empty.

Example:

If you set the “Show if” the Value to Compare is“4,6” condition, the connected field will be shown until you enter 4, 5, or 6 into the target field.

In the list

This operator works with all form fields except Media, Wysiwyg, and Repeater. It is similar to Equal, but you can write several values separated with commas to the Value to Compare bar. Every option of the multi-choice fields has a value. The conditional block takes the value of the option that was chosen by the user and compares it with the several values you put in the Value to Compare bar. If there is a match – the connected field will be shown. The value can be either numeric or alphabetical.

Example:

The connected field (“Parking place”) will be only shown if the value of the target field (“What transport will you use”) is equal to “3”, which is the value of the “car” option.

Not in the list

Works similarly to the “In the list” operator but shows/hides the connected field if the value of the target field is not equal to the value you set in the Value to Compare bar.

Contain text

This operator works with the Text and Textarea form fields. It makes the conditional block seek the value you place in the Value to Compare bar in the text that the user inserts into the target field. If it finds a match, the connected field will be shown or hidden. The value can be either numerical or alphabetical.

Example:

The target field (“Would you like to take a look at our grill menu?”) will be only shown if the word “meat” appears in the target field (“Any food preferences”).

Not contain text

It shows/hides the connected field if the target field text doesn’t contain the value you set in the Value to Compare bar.

Is render state

It allows you to create several different states inside one form. Fields will be shown according to the triggered state.

Example:

With this operator, you can set one state for the login form and another state for the reset password or sign-up form, and users will be able to switch between these forms by clicking a button. You can learn more from the How to Create User Login Form with the Reset Password Feature video tutorial.

Date/Time/Datetime Fields

You can use the value from these fields in the Conditional Block.

If you want to enter a date into the Value to Compare bar, it should be in the YYYY-MM-DD format.

Time should be in the HH:MM:SS format.

If you want to enter the date and time, it should be in the YYYY-MM-THH:MM:SS format, so the date and time should be separated by “T” without spaces.

Also, you can compare values with the dynamic date using macros.

After you set the conditions, they will appear in the Block section on the right.

If you hover over the conditional block, you will see the “Edit” and “Delete” buttons.

That’s all. Now you know how to apply conditional visibility for JetFormBuilder form fields via Conditional Block.