Category: Form Fields

Custom templates are a feature to customize forms view. Use JetEngine to build a custom item template and set it for any Form you fancy. In this way, make the Radio and Checkbox fields more appealing on the front end.

• Creating a Custom Item Template in Elementor
  • Create a new listing
  • Build the listing in Elementor
  • Configure the dynamic fields
• Add Template to the Form
  • Choose and edit the form
  • Configure the field settings
  • Add form to the front-end

Creating a Custom Item Template in Elementor

Radio and Checkbox form fields provide a possibility to apply a template to their options. If the source of the field is “Posts” or “Terms”, you can create a Listing Template in JetEngine with the same source and make the Radio or Checkbox field inherit the layout from the template.

Also, it is possible to use a template if the source of the field is a JetEngine custom query.

In our case, we will customize a Checkbox field that lists posts from a custom post type named “Services”.

Since the custom item templates are not pre-made, you’ll have to build them manually.

Create a new listing

Go to WordPress Dashboard > JetEngine > Listings.

Click the “Add New” button to open a Setup Listing Item window.

Make sure to pick the “Posts” as a Listing source, then select the post type to pull the options from; in our case, it’s the CPT named “Services”, and our future Checkbox field in the form will list SPA services as options. 

After that, enter the Listing item name and choose the Listing view. You can work either in Elementor or Gutenberg. Lastly, click the “Create Listing Item” button.

Right afterward, you’ll be redirected to the chosen webpage builder.

Build the listing in Elementor

First of all, select the desired layout for your new section. To do so, press the cross icon, then pick the desired structure:

Now, search for the Check Mark widget. Drag and drop it to the first column of the newly-created structure and choose the icon from the library or upload an SVG file.

Then proceed to the left-side toolbar, press Style, and customize the icons’ appearance if needed.

You can adjust the Box Size, Icon Size, and Border Radius, set Background Color for the Default icon, and play around with the Border Type, Width, Color, and Box Shadow of the Checked icon.

Configure the dynamic fields

Let’s configure the second column. We’ll use the Dynamic Field widgets to pull meta data from posts and build the listing layout.

Search for the Dynamic Field widget and drag and drop it to the second column.

We will display the post title and some meta field values with the help of this widget.

Once you are satisfied with your custom item template, click “Publish.”

Add Template to the Form

Now, it’s time to set the template you’ve created for the form.

Choose and edit the form

Go to WordPress Dashboard > JetFormBuilder > Forms.

Find the form you would like to customize and click the “Edit” button.

Configure the field settings

In the newly-opened window, there will be form fields settings. Click on the Checkbox field to edit it.

Scroll down the settings until you see a Use custom template switcher. Tick it, and the new drop-down field will appear. Make sure to pick here the template you’ve created beforehand.

Press the “Apply changes” button and then “Update” the form.

Add form to the front end

After configuring fields settings and updating the form, check out how it looks on the front end.

That’s all; now you know how to build a WordPress custom template for Radio and Checkbox form fields options.

The Map field block displays maps (Google, Leaflet, and Mapbox) with set zoom parameters (zooming to a specific country). The field block allows:

• inputting coordinates by pinning the needed location on the map;
• storing the data location in three different ways: as a string with location Lat and Lng separated by a comma, as an array, and as a physical address;
• saving its values conveniently into the Map meta field of the JetEngine plugin.

NOTE

To use the Map field block, install and activate the JetEngine (v3.0.3 or higher) plugin, enable its Map Listing Module, and set the Maps Settings options (i.e., select the “Google Maps” option from the Map Provider drop-down menu and paste an API Key).

This field block has the following groups of settings: General, Value, Map Settings, and Advanced.

The General settings include the FIELD LABEL, FORM FIELD NAME, and FIELD DESCRIPTION fields. The FIELD LABEL and FIELD DESCRIPTION fields allow the usage of shortcodes.

The Value settings allow specifying the location center using coordinates and setting the map zoom. Use the VALUE FORMAT field is intended to choose how to store the location by clicking the appropriate button (“String,” “Array,” or “Address”) and enter the latitude and longitude coordinates in the DEFAULT VALUE field:

• String – the coordinates will be stored as a string with location latitude and longitude separated by a comma. For example: 46.969686110698525,31.991035188696703;
• Array – the location will be stored as an array of latitude and longitude. Example: {“lat”:46.969686110698525,”lng”:31.991035188696703};
• Address – the coordinates will have the format of a physical address, like this: 6 Walnut Road, Manchester SW1A 1AA, UK.

NOTE

While the location can be stored in three different formats, manual input in the DEFAULT VALUE field is available only in the String format, i.e., 50.45,30.53. This format works regardless of the options set in the VALUE FORMAT field.

The DEFAULT VALUE field allows usage of the dynamical data by pressing the Dynamic Tag sign. It opens the Edit Preset pop-up for selecting a data source from options like “Post,” “User,” “URL Query Variable,” and “Option Page.” The preset can be a Map field type created with JetEngine or a text field (the Text, Select, or Radio fields) with coordinates in the String format (46.96,31.99).

The ZOOM field of the Value settings has three buttons to set the Default, Small, and Custom zoom. Clicking the “Custom” button enables a field to type a zoom value ranging from 1 to 18.

The Map field block on the front end looks as follows:

The Map Settings has the HEIGHT slider to set the map dimensions. The map height can be adjusted between 50 and 1000 pixels. Pressing the “Reset” button sets a 300-pixel height.

Setting a small map height doesn’t impact the map width on the front end.

Use the JetStyleManager plugin to customize the Alignment, Border, Color, Margin, Padding, Typography, and more map options.

That’s all about the Map field block settings.

The Repeater Field can be an advantageous option for your form when content needs to be repeated. One can’t deny that the ability to add as many fields as you need dynamically is really handy when it comes to similar data. Let’s look at how to add new fields to book additional places on tour just with one button click. 

Let’s begin by proceeding to JetFormBuilder > Add New to create a form from scratch. For example, we will build a booking form with the repeater field that lets users register as many travelers as needed.

Initially, we delete the default Hidden Field, Text Field, and Action Button to avoid getting confused.

Next, we give a title to the form and add general fields to create a canvas. Among them are Hidden, Heading, Date, Text, and Radio fields.

Then add the essential part of the form, the Repeater Field. Adjust the settings according to your demands.

Hit the plus-shaped button to add the first block to the Repeater.

We begin with the Heading Field to name the proceeding section.

Then we add a couple of Text Fields specifying the information about the traveler.

And the final fields we create in the Repeater are the Radio Field and one more Text Field.

Besides, don’t forget to change the button’s label located under the fields placed in the Repeater.

Once done, we’ll add an Action Button and two more Hidden Fields to complete the form. One represents the current post title.

And the other one’s Field Type is selected as “Current Post Meta.” Here the Meta Field to Get Value From is also specified. 

Though don’t forget to adjust the JetForm settings. Especially, pay attention to the Post Submit Actions. Set the needed amount of actions taken once the form is submitted.

For instance, we add three post-submit actions, Insert/Update Post, Send Email, and Redirect to Page.

Finishing with all the settings, mind pressing the “Publish” button to make the form live.

Head to the page on which you want to place the form. For instance, we will add the form to a single page. To do so, we open WordPress Dashboard > Crocoblock > Theme Templates and hit the “Edit” button that appears next to the needed template once we hover on it.

Mind that you can use both Gutenberg and Elementor for editing.

Moreover, you can add a new template by pressing the samely-named button.

Find the JetForm block/widget, place it on the page, and work on the settings.

Press the “Update” button once the changes have been applied.

Or, look at the template made with Block Editor. The settings here are pretty much the same.

Check the form on the front end. You can also observe the fields we have added to the Repeater.

And after them, there is a button that duplicates the fields once the button has been pressed.

That’s it; the fields can be repeated as many times as needed. Now you know in which cases and, most importantly, how to add the Repeater Field to the JetFormBuilder form.

Field validation is an automated process of determining that all fields contain correct values before the WordPress form is accepted.

First of all, you need to create a form. Here’s an example of a simple form with a Number field, a Select field, and a Checkbox and Calculated fields combo.

There is no “Submit” button, and if there are any conditions set to the fields, e.g., Min and Max value, it’s impossible to determine whether the user enters a correct value.

The second step is to either copy the post ID from the form’s URL or head back to the JetFormBuilder > Forms folder. Find the necessary form and get its ID from the Shortcode column.

Now, to implement the fields validation without clicking the “Submit” button, you need to go to WordPress Dashboard > Appearance > Theme File Editor.

Then click on the functions.php file in the right sidebar.

Scroll down the file and add the filter where your-form-id will be the ID you previously copied:

add_action( 'wp_footer', function () { ?>
<script>
  jQuery( '.jet-form-builder[data-form-id="your-form-id"] input, .jet-form-builder[data-form-id="your-form-id"] select' ).on( 'blur', function() {
      this.reportValidity();
    } );
</script>
<?php } );

Don’t forget to click the “Update File” button. On the front end, a user will see a certain tooltip if the entered value is incorrect without clicking the “Submit” button.

Now you know the easiest way of implementing field validation without submitting the form.

Render in HTML allows you to make a Hidden field invisible in the HTML markup. With this feature, any Hidden field in the form becomes more secure, which is paramount when using Payment Gateways (PayPal/Stripe). 

Secure field is a field that cannot be modified, read or seen on the front-end even with the help of JavaScript.

Render in HTML is turned on by default. This way, the Hidden field type will be seen in the page’s source code.

If you disable the Render in HTML toggle, the Hidden field will disappear in the HTML markup and be secured. 

The Render in HTML feature works with all Field value types of the Hidden Field although there are two exceptions. The Hidden Field won’t be secure if it is set to URL Query Variable or when using a preset with URL Query Variable set as a source.

If Referer URL is chosen, the Render in HTML toggle won’t be available meaning that this feature is turned on by default.

Make work with JetFormBuilder easier by using the Blocks Transformation feature. Make changes to the WordPress form you create with the JetFormBuilder without effort. 

The feature is already built in the JetFormBuilder’s main functionality, so you don’t need to activate any additional elements.

Just proceed to the JetFormBuilder > Forms and click on the “Edit” button of the form you want to change. 

Or build a new form by pushing the “Add New” button to test the WordPress Blocks Transformation there.

As Gutenberg has been opened, let’s check the Text Field. It is the most telling example, as this field type supports transformation to any other JetFormBuilder fields.

Click on the block and its icon on the appeared panel. Now the transformation list is available.

For instance, we transform this field into the Checkbox Field. As you can see, the Field Label and Form field name are preserved as in the Text Field.

So, the main feature is the transformation of the already adjusted coinciding settings into the new block.

Other JetFormBuilder blocks also transform into different form blocks effortlessly.

All the JetFormBuilder blocks can transform into Conditional Block. When transformed, the selected block or group of blocks are placed inside the conditional block.

Besides, you can place several blocks into the Conditional Block. To do so, initially click on the upper block.

Push the “Shift” button on your keyboard if you are a Windows user or the “Command” button if you are a macOS user, and, without releasing it, click on the lower block.

Then press the block icon above the blocks and transform them into the Conditional Block.

Moreover, not only the JetFormBuilder blocks can be transformed, but also some core Gutenberg blocks.

So, the Buttons can be transformed into the Form Break Field, Action Button, and Conditional Block.

Separator is compatible with Group Break Field and Conditional Block.

And last but not least Paragraph transforms into Heading Field, Text Field, and Conditional Block.

Now you know how to transform form field blocks in Gutenberg with the help of the JetFormBuilder plugin.