Elementor 开发者文档

title: "简单示例" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Form Fields - Src - Repos


简单示例

为了展示扩展表单小部件的简易性,我们将创建一个插件,用于移除旧的 tel 字段并添加一个 local-tel 字段。

文件夹结构

该插件将包含两个文件。一个用于新字段类型,另一个主文件用于注册字段并处理所有其他事项。

elementor-form-local-tel-field/
|
├─ form-fields/
|  └─ local-tel.php
|
└─ elementor-form-local-tel-field.php

Plugin Files

elementor-form-local-tel-field.php

<?php
/**
 * Plugin Name: Elementor Forms Local Tel Field
 * Description: Custom addon that adds a "local-tel" field to Elementor Forms Widget.
 * Plugin URI:  https://elementor.com/
 * Version:     1.0.0
 * Author:      Elementor Developer
 * Author URI:  https://developers.elementor.com/
 * Text Domain: elementor-form-local-tel-field
 *
 * Requires Plugins: elementor
 * Elementor tested up to: 3.25.0
 * Elementor Pro tested up to: 3.25.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

/**
 * Remove `tel` field from Elementor form widget.
 *
 * @since 1.0.0
 * @param array $fields Elementor form fields.
 * @return array Updated fields list.
 */
function remove_existing_form_field( $fields ) {

    unset( $fields['tel'] );

    return $fields;

}
add_filter( 'elementor_pro/forms/field_types', 'remove_existing_form_field' );

/**
 * Add new `local-tel` field to Elementor form widget.
 *
 * @since 1.0.0
 * @param \ElementorPro\Modules\Forms\Registrars\Form_Fields_Registrar $form_fields_registrar
 * @return void
 */
function add_new_form_field( $form_fields_registrar ) {

    require_once( __DIR__ . '/form-fields/local-tel.php' );

    $form_fields_registrar->register( new \Elementor_Local_Tel_Field() );

}
add_action( 'elementor_pro/forms/fields/register', 'add_new_form_field' );

form-fields/local-tel.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

/**
 * Elementor Form Field - Local Tel
 *
 * Add a new "Local Tel" field to Elementor form widget.
 *
 * @since 1.0.0
 */
class Elementor_Local_Tel_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

    /**
     * Get field type.
     *
     * Retrieve local-tel field unique ID.
     *
     * @since 1.0.0
     * @access public
     * @return string Field type.
     */
    public function get_type(): string {
        return 'local-tel';
    }

    /**
     * Get field name.
     *
     * Retrieve local-tel field label.
     *
     * @since 1.0.0
     * @access public
     * @return string Field name.
     */
    public function get_name(): string {
        return esc_html__( 'Local Tel', 'elementor-form-local-tel-field' );
    }

    /**
     * Render field output on the frontend.
     *
     * Written in PHP and used to generate the final HTML.
     *
     * @since 1.0.0
     * @access public
     * @param mixed $item
     * @param mixed $item_index
     * @param mixed $form
     * @return void
     */
    public function render( $item, $item_index, $form ): void {
        $form->add_render_attribute(
            'input' . $item_index,
            [
                'size' => '1',
                'class' => 'elementor-field-textual',
                'pattern' => '[0-9]{3}-[0-9]{3}-[0-9]{4}',
                'title' => esc_html__( 'Format: 123-456-7890', 'elementor-form-local-tel-field' ),
            ]
        );

        echo '<input ' . $form->get_render_attribute_string( 'input' . $item_index ) . '>';
    }

/**
     * Field validation.
     *
     * Validate local-tel field value to ensure it complies to certain rules.
     *
     * @since 1.0.0
     * @access public
     * @param \ElementorPro\Modules\Forms\Classes\Field_Base   $field
     * @param \ElementorPro\Modules\Forms\Classes\Form_Record  $record
     * @param \ElementorPro\Modules\Forms\Classes\Ajax_Handler $ajax_handler
     * @return void
     */
    public function validation( $field, $record, $ajax_handler ): void {
        if ( empty( $field['value'] ) ) {
            return;
        }

        if ( preg_match( '/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $field['value'] ) !== 1 ) {
            $ajax_handler->add_error(
                $field['id'],
                esc_html__( 'Phone number must be in "123-456-7890" format.', 'elementor-form-local-tel-field' )
            );
        }
    }

    /**
     * Field constructor.
     *
     * Used to add a script to the Elementor editor preview.
     *
     * @since 1.0.0
     * @access public
     * @return void
     */
    public function __construct() {
        parent::__construct();
        add_action( 'elementor/preview/init', [ $this, 'editor_preview_footer' ] );
    }

    /**
     * Elementor editor preview.
     *
     * Add a script to the footer of the editor preview screen.
     *
     * @since 1.0.0
     * @access public
     * @return void
     */
    public function editor_preview_footer(): void {
        add_action( 'wp_footer', [ $this, 'content_template_script' ] );
    }

    /**
     * Content template script.
     *
     * Add content template alternative, to display the field in Elementor editor.
     *
     * @since 1.0.0
     * @access public
     * @return void
     */
    public function content_template_script(): void {
        ?>
        <script>
        jQuery( document ).ready( () => {

            elementor.hooks.addFilter(
                'elementor_pro/forms/content_template/field/<?php echo $this->get_type(); ?>',
                function ( inputField, item, i ) {
                    const fieldId    = `form_field_${i}`;
                    const fieldClass = `elementor-field-textual elementor-field ${item.css_classes}`;
                    const size       = '1';
                    const pattern    = '[0-9]{3}-[0-9]{3}-[0-9]{4}';
                    const title      = "<?php echo esc_html__( 'Format: 123-456-7890', 'elementor-forms-local-tel-field' ); ?>";

                    return `<input id="${fieldId}" class="${fieldClass}" size="${size}" pattern="${pattern}" title="${title}">`;
                }, 10, 3
            );

        });
        </script>
        <?php
    }

}

The Result

The new "Local Tel" field inside the Elementor form widget:

Elementor Form - Local Tel Field