Stand with Ukraine. Fight for freedom and democracy


How to Use Allow Custom Feature for Checkbox and Radio Fields

Radio and Checkbox Fields are multi-optional form fields that allow users to pick one or more options. You can manually add options to these fields or use pre-made lists. Also, you can allow users to add their custom options from the front end by applying the custom feature to the needed fields of the JetFormBuilder form.

As an example, we added the Radio Field and Checkbox Field blocks with the enabled custom feature to the job application form. 

Keep in mind that all the following steps are an illustration of how the feature works and you can create an entirely different form with other fields and submit actions that suit your needs.


Form Creation

Adding form fields

To create the form, we proceeded to the JetFormBuilder > Add New tab and got to the form editing page.

We entered the form name and added four Text Fields (for the first and last names, email, and phone number) and the Action Button as the “Submit” button.

adding text fields and an action button to the form

Then, we added a Radio Field, set the FIELD LABEL and FORM FIELD NAME values, selected the “Glossary” from the FILL OPTIONS FROM drop-down menu, and picked the “Language” glossary. Such settings will let users choose their working language.

Glossaries is the JetEngine feature that allows you to create a list of the options and use it for different custom meta fields and form fields. Instead of “Glossary,” you can choose the “Manual Input” option and set the desired options manually.

radio field settings

We hit the “three dots” and click the “Enable custom option.”

enable the custom option for the radio field

Next, we added the Checkbox Field, set the FIELD LABEL and FORM FIELD NAME values, selected the “Glossary” from the FILL OPTIONS FROM drop-down menu, and picked the “User Skills” glossary so that users can set their working skills. Options for this field can also be set via the “Manual Input” option.

checkbox field settings

We pressed the “Enable custom option” for this field, too.

enable the custom option for the checkbox field

After enabling this option, the BUTTON LABEL can be set in the Value tab of the Checkbox Field

button label for the custom option

Setting a post-submit action

Next, we proceeded to the JetForm > Post Submit Actions tab, kept the “Send Email” action, and hit the “pencil” icon.

send email post-submit action

You can learn more about the “Send Email” action and its options from this tutorial.

In the Edit Action pop-up, the CONTENT field specifies the body of the message that will be sent by email. Insert the text or HTML code into this text area. Also, you can put values from the fields of the submitted form by clicking the “wrench” icon and selecting macros. We set such a text with inserted macros:

Hi admin!

There is a new application from %first-name% %last-name%.

Phone: %phone-number%
Work language: %working_language%
Work skills: %skills%

We configured the needed settings and hit the “Update” button.

email content with macros

Also, we clicked the “+ New Action” button in the JetForm > Post Submit Actions tab and selected the “Save Form Record” option that stores the form entries in the database.

After that, we hit the “Publish/Update” button to save form settings.

Placing the Form on the Page

Then, we navigated to the Pages > Add New Page tab, added the JetForm block to the page, selected the recently created job application form from the CHOOSE FORM drop-down menu, and pushed the  “Publish” button.

placing the form on the page

Checking the Results

We opened the page with the form on the front end.

For the radio buttons section of the form, the input field appeared as one of the options. When we checked it, the input field was activated, and we entered the custom option (“German”).

For the checkboxes section, the “+ Add New” button appeared (the text label may be different if you changed it in the Checkbox Field settings). By clicking it, we were able to add several input fields and enter the custom options (“Creativity,” “Decision-making,” and “Learning”). If we wanted to delete the unwanted input fields, we would have unchecked their boxes.

Also, we filled in other fields to complete the form and pushed the “Submit” button.

custom options on the front end

According to the Post Submit Actions settings, we could observe the submitted form in an email and the Form Records list.

As we can see, the custom options are displayed in the email message:

Hi admin!

There is a new application from John Smith.

Phone: +80(000)000-00-00
Work language: German
Work skills: Administrative skills, Creativity, Decision-making, Learning

To check the form record, we went to the JetFormBuilder > Form Records tab and clicked the needed record.

jetformbuilder form records

The record shows the saved values from the fields of the submitted form, including the custom options.

custom options in the form record

That’s all. Now you know how to allow users to add custom options to the Checkbox and Radio fields of the JetFormBuilder form on the front end.