Stand with Ukraine. Fight for freedom and democracy

Donate

Creating Custom Template for Checkbox and Radio Form Fields

Custom templates are another cool feature to customize forms view. Use JetEngine to build a custom item template and set it for any Form you fancy. In this way, the Form will be customized on the front end.

Before starting, make sure you have the following plugins installed and activated:

  • JetFormBuilder — build a form, edit the post submit actions, and add a captcha if needed;
  • JetEngine — create a CPT, add custom meta fields and taxonomies; 
  • Elementor — add the created form into the editor to finalize the customization, style up the page, and publish it. Or use the Gutenberg block editor, which is fully compatible with the JetFormBuilder plugin; it’s up to you.

Creating a Custom Item Template in Elementor

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.

jetengine listing items

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

custom post type listing pop-up

Make sure to pick the “Posts” as a Listing source, then select the post type to pull the metadata from; in our case, it’s the CPT post type. 

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:

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

default check mark settings
NOTE

Make sure to select icons for both unchecked and checked modes.

checked check mark settings

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 widget since we need to pull the metadata about the Posts.

Search for the Dynamic Field widget and drag and drop it to the second column. To display the checkbox content, choose “Meta Data” as the Source and the needed field as the Meta Field.

dynamic field meta data source

Next, toggle on the Filter field output and use the “Checkbox field values” Callback.

checkbox field values
NOTE

You can also change the typography and font size to make your custom template pop.

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.

edit button next to the form

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 field settings. Click on the field to add or edit it.

use custom template toggle
NOTE

The custom item templates can only be applied to the Radio or Checkboxes field types. You cannot set a custom item template for the rest of the field types.

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.

NOTE

This function will not work with the manual input, meta field, or glossary source.

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.

form on the front end
NOTE

If you need to use the Radio field, you can make the same steps; just change the field type in the form.

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