Description
This filter can be used to add custom options for each choice.
Usage
gform.addFilter('gform_append_field_choice_option', function (str, field, i) {
// define the markup for your custom option
return str;
});
Parameters
| Parameter | Type | Description |
|---|---|---|
| str | string | An initially empty string provided by the filter. This is intended to be replaced with your custom HTML markup that will be rendered within each choice option. For example, you might use this to insert an additional input field, a tooltip, or a data attribute for tracking purposes. |
| field | array | The complete field object as currently configured in the form editor. This object contains all settings and properties for the field, including its label, input type, validation rules, and existing choices. You can use this to determine field type and selectively append markup only to specific field types (e.g., only for checkboxes). |
| i | integer | The numerical index of the current choice being processed within the list of choices. This index is useful for targeting specific DOM elements or saving data tied to a particular option. For instance, if you want to give each custom input a unique ID or class name, the index ensures that each remains distinct. |
Examples
This example adds a new option to the choice setting called custom.
It uses the gform_editor_js action to load the code snippet on the form editor page.
add_action( 'gform_editor_js', 'custom_option_editor_script' );
function custom_option_editor_script() {
?>
<script type="text/javascript">
jQuery('.choices_setting')
.on('input propertychange', '.field-choice-custom', function () {
var $this = jQuery(this);
var i = $this.closest('li.field-choice-row').data('index');
field = GetSelectedField();
field.choices[i].custom = $this.val();
});
gform.addFilter('gform_append_field_choice_option', function (str, field, i) {
var inputType = GetInputType(field);
var custom = field.choices[i].custom ? field.choices[i].custom : '';
return "<input type='text' id='" + inputType + "_choice_custom_" + i + "' value='" + custom + "' class='field-choice-input field-choice-custom' />";
});
</script>
<?php
}
Placement
Reference the article Adding JavaScript Code to the Admin Side of Your Site.
Source Code
This filter is located in js.php