Stand with Ukraine. Fight for freedom and democracy

Donate

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

Tutorial requirements:

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

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.

ReCaptcha is a Captcha system by Google that enables web hosts to distinguish between human and automated website access. The original version asked users to decipher hard-to-read text or match images.

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

jetformbuilder captcha settings

In the Score Threshold field, the default value is “0.5”. You can set the value between 0 to 1, where the “0.1” value, for example, makes the system more likely to identify a user who tries to submit a form as a bot, and the “0.9” value lets the user pass easier.

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

Proceed to the Google reCAPTCHA website and hit the “Switch to create a classic key” button.

switch to create a classic key

On the new page, there will be such settings:

  • Label – type the name of your website into this bar;
  • reCAPTCHA type – JetFormBuilder is compatible with “reCAPTCHA v3,” so choose this option;
  • Domains – this is a bar for your website domain. You can add several domains if you wish;
  • Owners – the email of the Google account you are currently logged in will automatically appear here. However, you can add more owners;
  • Accept the reCAPTCHA Terms of Service – read the Terms of Service and tick the checkbox if you have no objections;
  • Send alerts to owners – if you tick this box, Google will send alert messages to the emails you added in the Owners section whenever a user fails to pass the verification.

After filling out this form, press the “Submit” button.

google recaptcha settings

You will be redirected to the page with the Site Key and Secret Key.

copy site key and secret key

Copy and paste them to the corresponding fields of the reCAPTCHA v3 section and push the “Save” button.

recaptcha site key and secret key in the jetformbuilder settings

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

captcha form settings

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

site key and secret key added with the global settings

Then, hit the “Update” button.

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

As you can see, the reCAPTCHA badge appears in the bottom right corner of the page.

form with recaptcha anti-spam on the front end

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

hCaptcha is an anti-bot service that protects user privacy and rewards websites. It provides image recognition challenges to distinguish bots from humans.

To start the hCaptcha configuration, proceed to the JetFormBuilder > Settings > Captcha Settings tab and unfold the hCaptcha section.

jetformbuilder hCaptcha

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

Proceed to the hCaptcha website and sign in or sign up.

Go to the Sites tab and click on the Site Key to copy it.

hCaptcha site key

From the Settings page, you can obtain the Secret Key.

hCaptcha secret key

Paste keys to the corresponding fields of the hCaptcha section and push the “Save” button.

hCaptcha site key and secret key

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

hCaptcha provider for form

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

hCaptcha 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 hCaptcha block” button, you’ll add the block to the form that can be moved.

hCaptcha 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 hCaptcha verification appeared before the submit button. The verification will start when you check the I am human checkbox.

form with hCaptcha on the front end

Users will have to select the appropriate pictures to prove they are not bots.

verification via a picture

And that’s what the successful hCaptcha verification looks like.

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

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

Requirements:

Uncanny Automator is a plugin that allows you to connect plugins and apps to automize the WordPress website activity without coding. With this plugin, you can connect JetFormBuilder forms to such apps as Airtable, Google Sheets, Google Calendar, Instagram, Facebook, etc. A complete list of available integrations can be found on the Automator WordPress Plugin Integrations page.

Use cases include sending form data to Airtable and Google Sheets, registering users, setting CRM tags, and setting up notifications and email campaigns.

Uncanny Automator has such triggers for JetFormBuilder:

  • Triggers for logged-in users:
    • a user submits a form;
    • a user submits a form with a specific value in a specific field (Uncanny Automator Pro).
  • Triggers for everyone:
    • a form is submitted;
    • a form is submitted with a specific value in a specific field (Uncanny Automator Pro).

I will show how to connect the JetFormBuilder form to any app with the Uncanny Automator (free version) on the example of Google Sheets.

I created the “Send Letter to Seller” form by submitting which users can leave feedback about my website. To learn how to create a similar form, proceed to the Contact Form tutorial.

send letter to seller form

To store all messages in one place and be able to proceed through all of them to get users’ insight into my service, I want to connect the form to Google Sheets.

I created a new Google Sheet and added three rows that will be filled with the information from the form: user name, email, and message.

google spreadsheet

I proceeded to the WordPress website and moved to the Automator > Add new tab. 

At the beginning of the recipe creation, you can select two types: 

  • Logged-in users. The recipe will be triggered by logged-in WordPress users;
  • Everyone. The recipe will be triggered by logged-in WordPress users or logged-out visitors.
Automator recipe type

I selected the “Everyone” option, so any user will be able to leave feedback.

I named the recipe and selected the “JetFormBuilder” integration as the Trigger.

select an integration

Then, I selected the needed form and clicked the “Save” button. After that, the toggle in this section changed from “Draft” to “Live.”

select a form

In the Action section, I pushed the “Add action” button and selected the “Google Sheets” integration. Be aware that you may need to connect the Google Sheets accounts if you haven’t done it before.

select an integration as the action

There are two options here:

  • Create a row in a Google Sheet. Select this option if you want the action to save a form field value in a new row;
  • Update a row in a Google Sheet. Select this option if you want the action to update a form field value in the row. This option is useful for the “Update post” or “Update user” forms.
create or update a row in a google sheet

I picked the “Create a row in a Google Sheet” option to save the values of every newly submitted form in the new row.

Then, I selected the needed Drive, Spreadsheet, and Worksheet and hit the “Get columns” button.

create a row in a google sheet

After that, all columns created in the spreadsheet appeared.

search tokens

I pressed the asterisk icon in the Value field and selected the corresponding form field, the value from which will be saved in the row.

values from the form fields

Having done this with all columns, I pushed the “Save” button. After that, the toggle in this section changed from “Draft” to “Live.”

In the Recipe section, I enabled the toggle and changed its status from “Draft” to “Live” to make the form active.

live toggle on for the recipe

I navigated to the page where the “Send Letter to Seller” form was placed and submitted it several times. 

form successfully submitted

I went to Google Sheets. As you can see, all form values have been saved in the appropriate columns.

saved form values in the google sheet

That’s all. Now you know how to connect the JetFormBuilderform to any app with the Uncanny Automator(free version) on the example of Google Sheets.