AI Verified

Name

Custom Class for Elementor Form Widget Items

About

Add custom classess to form elements using elementor; Note: if you want to add to other field types like select, then just add this to the allowed fields array: $allowed_fields just add the type, like 'select';

Language

PHP

Rating

Voted: 0 by 0 user(s)

How to Setup Snippet

Paste the snippet and activate - viola, you can now add classes to elementor form widget items

Codevault

lightbulbman

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.4

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

Website/ Profile URL:

https://www.ecommercehints.com

History

Last modified:

31/01/2024

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

Learn More

AI Bot Comments:

Found 0 vulnerabilities

Custom Class for Elementor Form Widget Items

 
                    
 1class Elementor_Forms_Input_Classes {
 2 
 3    public $allowed_fields = [
 4        'text',
 5        'email',
 6        'url',
 7        'password',
 8    ];
 9 
10    public function __construct() {
11        // Add class attribute to form field render
12        add_filter( 'elementor_pro/forms/render/item', [ $this, 'maybe_add_css_class' ], 10, 3 );
13 
14        add_action( 'elementor/element/form/section_form_fields/before_section_end', [ $this, 'add_css_class_field_control' ], 100, 2 );
15    }
16 
17    /**
18     * add_css_class_field_control
19     * @param $element
20     * @param $args
21     */
22    public function add_css_class_field_control( $element, $args ) {
23        $elementor = \Elementor\Plugin::instance();
24        $control_data = $elementor->controls_manager->get_control_from_stack( $element->get_name(), 'form_fields' );
25 
26        if ( is_wp_error( $control_data ) ) {
27            return;
28        }
29        // create a new css class control as a repeater field
30        $tmp = new Elementor\Repeater();
31        $tmp->add_control(
32            'field_css_class',
33            [
34                'label' => 'CSS class',
35                'inner_tab' => 'form_fields_advanced_tab',
36                'tab' => 'content',
37                'tabs_wrapper' => 'form_fields_tabs',
38                'type' => 'text',
39                'conditions' => [
40                    'terms' => [
41                        [
42                            'name' => 'field_type',
43                            'operator' => 'in',
44                            'value' => $this->allowed_fields,
45                        ],
46                    ],
47                ],
48            ]
49        );
50 
51        $pattern_field = $tmp->get_controls();
52        $pattern_field = $pattern_field['field_css_class'];
53 
54        // insert new class field in advanced tab before field ID control
55        $new_order = [];
56        foreach ( $control_data['fields'] as $field_key => $field ) {
57            if ( 'custom_id' === $field['name'] ) {
58                $new_order['field_css_class'] = $pattern_field;
59            }
60            $new_order[ $field_key ] = $field;
61        }
62        $control_data['fields'] = $new_order;
63 
64        $element->update_control( 'form_fields', $control_data );
65    }
66 
67    public function maybe_add_css_class( $field, $field_index, $form_widget ) {
68        if ( ! empty( $field['field_css_class'] ) && in_array( $field['field_type'], $this->allowed_fields ) ) {
69 
70            $form_widget->add_render_attribute( 'input' . $field_index, 'class', $field['field_css_class'] );
71        }
72        return $field;
73    }
74}
75new Elementor_Forms_Input_Classes();

0

Related Snippets

Please see some snippets below related to this snippet..

Elementor

AI Verified

1

PHP to Elementor

Added: 1 year ago

Last Updated: 1 year ago

How to add PHP Code to Elementor.

View

Elementor

AI Verified

0

Remove Google Fonts Elementor

Added: 1 year ago

Last Updated: 1 year ago

View

Elementor

AI Verified

0

Elementor Repeater with Multiple Fields No Bullets

Added: 4 months ago

Last Updated: 4 months ago

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WordPress Admin

AI Verified

1

Disable Wordpress Admin Bar Test

Added: 1 year ago

Last Updated: 3 months ago

There must be many of these - this is just my test I also want to see if line breaks are preserved in the description   should be free

View

Elementor

AI Verified

0

Custom Class for Elementor Form Widget Items

Added: 5 months ago

Last Updated: 5 months ago

Add custom classess to form elements using elementor; Note: if you want to add to other field types like select, then just add this to the allowed fields array: $allowed_fields just add the type, lik...

View

General

Unverified

0

Elementor Gradients Headings

Added: 1 year ago

Last Updated: 8 months ago

CSS Code for background gradients on headings in Elementor

View