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.

• 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

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.

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 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:

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

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

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