Elementor 开发者文档

title: "Field Structure" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Form Fields - Src - Repos

Field Structure

When creating new form fields we needs to have a few basic settings like a unique name and a label that will be used in the editor. Next is the render function that outputs the field markup. The field can also have a validation check. This last piece is an optional set of controls, where a user can configure their custom data.

Form Field Class

First, we need to create a class that extends the \ElementorPro\Modules\Forms\Fields\Field_Base class:

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
}

Form Field Structure

As mentioned above, Elementor form fields extend the \ElementorPro\Modules\Forms\Fields\Field_Base class and inherit its methods. A simple field skeleton will look as follows:

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

    public function get_type(): string {}

    public function get_name(): string {}

    public function get_script_depends(): array {}

    public function get_style_depends(): array {}

    public function render( $item, $item_index, $form ): void {}

    public function validation( $field, $record, $ajax_handler ): void {}

    public function update_controls( $widget ): void {}

}

Let’s break it down: