field_form{:name|:type}

Filter Hook Custom Fields Since 3.10.0

Allows modifying custom field input properties before these are converted into HTML form elements.

There are three variations for this filter, universal for all fields, and field-name-specific, and field-type specific:

field_form
field_form:jr_status
field_form:select

The filters run in the same order listed above.

Parameters

$input

(array) input properties

$field

(array) custom field settings

You need to have a working knowledge of Hooks before you get started.

Boilerplate Code

Use the boilerplate code to start using the filter, and add your own logic to modify the first argument and return it.

Clickfwd\Hook\Filter::add('field_form{:name|:type}', function($input, $field) 
{
  // Uncomment line below to view available data passed into hook
  // For JReviews 3.x and earlier use dd instead of fwd_dd
  // fwd_dd($input, $field);
  
  return $input;
});

Development & Support

Customizations are not included with support. We provide this information to make it easier for developers to extend the functionality. From time to time we may have some availability for custom work. Get in touch to see if there's an opportunity to work together.

Examples

Limit text length using `maxlength` attribute

Limit text length using `maxlength` attribute

The ability to add attributes to custom field inputs can be quite useful. For example, say you have a listing custom field named jr_description where you want to limit the number of characters to 50. The following filter does the job:

Clickfwd\Hook\Filter::add('field_form:jr_description', function($input, $field) 
{
  $input['maxlength'] = 50;

  return $input;
});

This only adds client-side validation in the browser. To also add sever validation you can update the field's regex setting with the following value:

^.{1,50}$

If you also want to add a character counter to the input, you can do that with the following code:

Clickfwd\Hook\Action::add('form:data.field.listing.jr_description:before', function($options) {
    echo '<div class="fwd-mb-3"
        x-data="{
            maxChars: 50,
            currentChars: 0,
            updateUsedChars() {
                this.currentChars = event.target.value.length;
            }
        }"
        x-on:input="(event) => updateUsedChars(event)"
    >';
});

Clickfwd\Hook\Action::add('form:data.field.listing.jr_description:after', function($options) {
    echo '<p 
        x-text="`${currentChars}/${maxChars} characters`" 
        x-bind:class="currentChars > maxChars && \'fwd-text-red-600\'"
        style="margin-top: -0.75rem;"
    ></p>';
    echo '</div>';
});

Source

/views/helpers/custom_fields.php