vashugup003

Thanks Amimul for the response.

Please see the details below:

I have registered a new field called NewCustomField and extended it using BaseFieldManager.
In the getComponent method, I’ve added component settings including element, attributes, index, settings, and editor_options. An example structure:

return array(
    'index'      => 1,
    'element'    => 'element_key',
    'attributes' => array(
        'name'  => 'element_key',
        'value' => '',
        'type'  => 'file',
    ),
    'settings'   => array(
        'label'              => 'title',
        'help_message'       => '',
        'validation_rules'   => array(
            'required' => array(
                'value'          => false,
                'global'         => true,
                'message'        => Helper::getGlobalDefaultMessage('required'),
                'global_message' => Helper::getGlobalDefaultMessage('required'),
            ),
            'allowed_file_types' => array(
                'value'          => array('avi|divx|flv|mov|ogv|mkv|mp4|m4v|divx|mpg|mpeg|mpe|video/quicktime|qt|webm'),
                'global'         => false,
                'message'        => Helper::getGlobalDefaultMessage('allowed_file_types'),
                'global_message' => Helper::getGlobalDefaultMessage('allowed_file_types'),
            ),
        ),
        'conditional_logics' => array(),
    ),
    'editor_options' => array(
        'title'      => 'Editor Label',
        'icon_class' => 'ff-edit-files',
        'template'   => 'inputText',
    ),
);

From my understanding, the editor_options currently uses the inputText template, which may be where I need to adjust to customize the editor view for this field.

After this, I have kept getGeneralEditorElement and getAdvancedEditorElement as-is without overriding them.

I then used the render method to add my custom frontend markup, which includes a hidden file input and a button tied to a JS file that triggers functionality and sets a video file URL into the DOM. This URL is submitted with the form, and I want to use this URL inside the entry detail view to display an embedded video.

What I need help with:
I would like to customize:

• The editor markup (in the form builder) to better represent my custom field visually.
• The entry detail markup so I can display an embedded video (iframe or <video> tag) using the submitted video URL.

Please let me know:

• How I can replace or customize the editor view for this custom field type.
• The correct way to hook into or override the entry display markup for this field to display the embedded video using the stored URL.

Thank you for your guidance on extending Fluent Forms for this use case.

Hey Nithin,

Thank you so much for your input and the sample you provided.

I’ve managed to render the custom field on the frontend and also in the shortcode preview within the backend earlier as well. However, the issue I’m facing is specifically with the form builder. I’m unable to figure out how to add components or scripts similar to what’s implemented for other fields in the builder.

I’ve attached a screenshot of the Email field for reference. Could you please help me understand if it’s possible to add a similar modal, settings panel, and field options for a custom field?

While I’ve noticed the structure of React components inside the built form-script.js file, I couldn’t determine whether it’s dynamically driven from PHP or hardcoded in JS. If it’s hardcoded, is there any supported way to inject or register a custom field along with its settings UI?

Appreciate your guidance on this!

Screenshot 1

Screenshot 2

Screenshot 3