fluent-forms.php — ElementsKit Elementor Addons – Advanced Widgets & Templates Addons for Elementor 4.0.1

elementskit-lite / widgets / fluent-forms / fluent-forms.php

elementskit-lite / widgets / fluent-forms Last commit date

fluent-forms-handler.php 3 years ago fluent-forms.php 3 weeks ago

fluent-forms.php

2695 lines

1	<?php
2	namespace Elementor;
3	use \Elementor\ElementsKit_Widget_Fluent_Forms_Handler as Handler;
4	use \ElementsKit_Lite\Modules\Controls\Controls_Manager as ElementsKit_Controls_Manager;
5
6	if (! defined( 'ABSPATH' ) ) exit;
7
8	class ElementsKit_Widget_Fluent_Forms extends Widget_Base {
9	use \ElementsKit_Lite\Widgets\Widget_Notice;
10
11	public $base;
12
13	public function __construct( $data = [], $args = null ) {
14	parent::__construct( $data, $args );
15	}
16
17	public function get_name() {
18	return Handler::get_name();
19	}
20
21	public function get_title() {
22	return Handler::get_title();
23	}
24
25	public function get_icon() {
26	return Handler::get_icon();
27	}
28
29	public function get_categories() {
30	return Handler::get_categories();
31	}
32
33	public function get_keywords() {
34	return Handler::get_keywords();
35	}
36
37	public function get_help_url() {
38	return 'https://wpmet.com/doc/fluent-forms/';
39	}
40
41	public function get_style_depends() {
42	return ['ekit-fluent-forms'];
43	}
44
45	protected function is_dynamic_content(): bool {
46	return false;
47	}
48
49	public function has_widget_inner_wrapper(): bool {
50	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
51	}
52
53	public static function getForms()
54	{
55	if(!function_exists('wpFluent')){ return [esc_html__("Please install the 'Fluent Forms' plugin.", 'elementskit-lite')]; }
56	$ff_list = wpFluent()->table('fluentform_forms')
57	->select(['id', 'title'])
58	->orderBy('id', 'DESC')
59	->get();
60
61
62	$forms = array();
63
64	if ($ff_list) {
65	$forms[0] = esc_html__('Select a Fluent Form', 'elementskit-lite');
66	foreach ($ff_list as $form) {
67	$forms[$form->id] = $form->title .' ('.$form->id.')';
68	}
69	} else {
70	$forms[0] = esc_html__('Create a Form First', 'elementskit-lite');
71	}
72
73	return $forms;
74	}
75
76	protected function register_controls() {
77
78	// General Controls
79	$this->start_controls_section(
80	'section_fluent_form',
81	[
82	'label' => __('Fluent Form', 'elementskit-lite'),
83	]
84	);
85
86
87	$this->add_control(
88	'form_list',
89	[
90	'label' => esc_html__('Fluent Form', 'elementskit-lite'),
91	'type' => Controls_Manager::SELECT,
92	'label_block' => true,
93	'options' => self::getForms(),
94	'default' => '0',
95	]
96	);
97
98	$this->add_control(
99	'custom_title_description',
100	[
101	'label' => __('Custom Title & Description', 'elementskit-lite'),
102	'type' => Controls_Manager::SWITCHER,
103	'label_on' => __('Yes', 'elementskit-lite'),
104	'label_off' => __('No', 'elementskit-lite'),
105	'return_value' => 'yes',
106	]
107	);
108
109	$this->add_control(
110	'form_title_custom',
111	[
112	'label' => esc_html__('Title', 'elementskit-lite'),
113	'type' => Controls_Manager::TEXT,
114	'dynamic' => [
115	'active' => true,
116	],
117	'label_block' => true,
118	'default' => '',
119	'condition' => [
120	'custom_title_description' => 'yes',
121	],
122	]
123	);
124
125	$this->add_control(
126	'form_description_custom',
127	[
128	'label' => esc_html__('Description', 'elementskit-lite'),
129	'type' => Controls_Manager::TEXTAREA,
130	'dynamic' => [
131	'active' => true,
132	],
133	'default' => '',
134	'condition' => [
135	'custom_title_description' => 'yes',
136	],
137	]
138	);
139
140	$this->add_control(
141	'labels_switch',
142	[
143	'label' => __('Labels', 'elementskit-lite'),
144	'type' => Controls_Manager::SWITCHER,
145	'default' => 'yes',
146	'label_on' => __('Show', 'elementskit-lite'),
147	'label_off' => __('Hide', 'elementskit-lite'),
148	'return_value' => 'yes'
149	]
150	);
151
152	$this->add_control(
153	'placeholder_switch',
154	[
155	'label' => __('Placeholder', 'elementskit-lite'),
156	'type' => Controls_Manager::SWITCHER,
157	'default' => 'yes',
158	'label_on' => __('Show', 'elementskit-lite'),
159	'label_off' => __('Hide', 'elementskit-lite'),
160	'return_value' => 'yes',
161	]
162	);
163
164	$this->end_controls_section();
165
166	// Error Controls
167	$this->start_controls_section(
168	'section_errors',
169	[
170	'label' => __('Errors', 'elementskit-lite'),
171	]
172	);
173
174	$this->add_control(
175	'error_messages',
176	[
177	'label' => __('Error Messages', 'elementskit-lite'),
178	'type' => Controls_Manager::SWITCHER,
179	'default' => 'yes',
180	'label_on' => __('Show', 'elementskit-lite'),
181	'label_off' => __('Hide', 'elementskit-lite'),
182	'return_value' => 'yes',
183	]
184	);
185
186	$this->end_controls_section();
187
188	// Title & Description style
189	$this->start_controls_section(
190	'section_form_title_style',
191	[
192	'label' => __('Title & Description', 'elementskit-lite'),
193	'tab' => Controls_Manager::TAB_STYLE,
194	'condition' => [
195	'custom_title_description' => 'yes',
196	],
197	]
198	);
199
200	$this->add_responsive_control(
201	'heading_alignment',
202	[
203	'label' => __('Alignment', 'elementskit-lite'),
204	'type' => Controls_Manager::CHOOSE,
205	'options' => [
206	'left' => [
207	'title' => __('Left', 'elementskit-lite'),
208	'icon' => 'eicon-text-align-left',
209	],
210	'center' => [
211	'title' => __('Center', 'elementskit-lite'),
212	'icon' => 'eicon-text-align-center',
213	],
214	'right' => [
215	'title' => __('Right', 'elementskit-lite'),
216	'icon' => 'eicon-text-align-right',
217	],
218	],
219	'default' => '',
220	'selectors' => [
221	'{{WRAPPER}} .ekit-fluentform-widget-title' => 'text-align: {{VALUE}};',
222	'{{WRAPPER}} .ekit-fluentform-widget-description' => 'text-align: {{VALUE}};',
223	],
224	'condition' => [
225	'custom_title_description' => 'yes',
226	],
227	]
228	);
229
230	$this->add_control(
231	'heading_title',
232	[
233	'label' => __('Title', 'elementskit-lite'),
234	'type' => Controls_Manager::HEADING,
235	'separator' => 'before',
236	'condition' => [
237	'custom_title_description' => 'yes',
238	],
239	]
240	);
241
242	$this->add_control(
243	'form_title_text_color',
244	[
245	'label' => __('Color', 'elementskit-lite'),
246	'type' => Controls_Manager::COLOR,
247	'default' => '',
248	'selectors' => [
249	'{{WRAPPER}} .ekit-fluentform-widget-title' => 'color: {{VALUE}}',
250	],
251	'condition' => [
252	'custom_title_description' => 'yes',
253	],
254	]
255	);
256
257	$this->add_group_control(
258	Group_Control_Typography::get_type(),
259	[
260	'name' => 'form_title_typography',
261	'label' => __('Typography', 'elementskit-lite'),
262	'selector' => '{{WRAPPER}} .ekit-fluentform-widget-title',
263	'condition' => [
264	'custom_title_description' => 'yes',
265	],
266	]
267	);
268
269	$this->add_responsive_control(
270	'form_title_margin',
271	[
272	'label' => __('Margin', 'elementskit-lite'),
273	'type' => Controls_Manager::DIMENSIONS,
274	'size_units' => ['px', 'em', '%'],
275	'allowed_dimensions' => 'vertical',
276	'placeholder' => [
277	'top' => '',
278	'right' => 'auto',
279	'bottom' => '',
280	'left' => 'auto',
281	],
282	'selectors' => [
283	'{{WRAPPER}} .ekit-fluentform-widget-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
284	],
285	'condition' => [
286	'custom_title_description' => 'yes',
287	],
288	]
289	);
290
291	$this->add_responsive_control(
292	'form_title_padding',
293	[
294	'label' => esc_html__('Padding', 'elementskit-lite'),
295	'type' => Controls_Manager::DIMENSIONS,
296	'size_units' => ['px', 'em', '%'],
297	'selectors' => [
298	'{{WRAPPER}} .ekit-fluentform-widget-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
299	],
300	]
301	);
302
303
304	$this->add_control(
305	'heading_description',
306	[
307	'label' => __('Description', 'elementskit-lite'),
308	'type' => Controls_Manager::HEADING,
309	'separator' => 'before',
310	'condition' => [
311	'custom_title_description' => 'yes',
312	],
313	]
314	);
315
316	$this->add_control(
317	'heading_description_text_color',
318	[
319	'label' => __('Color', 'elementskit-lite'),
320	'type' => Controls_Manager::COLOR,
321	'default' => '',
322	'selectors' => [
323	'{{WRAPPER}} .ekit-fluentform-widget-description' => 'color: {{VALUE}}',
324	],
325	'condition' => [
326	'custom_title_description' => 'yes',
327	],
328	]
329	);
330
331	$this->add_group_control(
332	Group_Control_Typography::get_type(),
333	[
334	'name' => 'heading_description_typography',
335	'label' => __('Typography', 'elementskit-lite'),
336	'selector' => '{{WRAPPER}} .ekit-fluentform-widget-description',
337	'condition' => [
338	'custom_title_description' => 'yes',
339	],
340	]
341	);
342
343
344	$this->add_responsive_control(
345	'heading_description_margin',
346	[
347	'label' => __('Margin', 'elementskit-lite'),
348	'type' => Controls_Manager::DIMENSIONS,
349	'size_units' => ['px', 'em', '%'],
350	'allowed_dimensions' => 'vertical',
351	'placeholder' => [
352	'top' => '',
353	'right' => 'auto',
354	'bottom' => '',
355	'left' => 'auto',
356	],
357	'selectors' => [
358	'{{WRAPPER}} .ekit-fluentform-widget-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
359	],
360	'condition' => [
361	'custom_title_description' => 'yes',
362	],
363	]
364	);
365
366	$this->add_responsive_control(
367	'heading_description_padding',
368	[
369	'label' => esc_html__('Padding', 'elementskit-lite'),
370	'type' => Controls_Manager::DIMENSIONS,
371	'size_units' => ['px', 'em', '%'],
372	'selectors' => [
373	'{{WRAPPER}} .ekit-fluentform-widget-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
374	],
375	]
376	);
377
378	$this->end_controls_section();
379
380	// Form Container style
381	$this->start_controls_section(
382	'section_form_container_style',
383	[
384	'label' => __('Form Container', 'elementskit-lite'),
385	'tab' => Controls_Manager::TAB_STYLE,
386	]
387	);
388
389
390	$this->add_group_control(
391	Group_Control_Background::get_type(),
392	[
393	'name' => 'form_container_background',
394	'label' => __( 'Background', 'elementskit-lite' ),
395	'types' => [ 'classic', 'gradient' ],
396	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper',
397	]
398	);
399
400
401	$this->add_control(
402	'form_container_link_color',
403	[
404	'label' => __('Link Color', 'elementskit-lite'),
405	'type' => Controls_Manager::COLOR,
406	'default' => '',
407	'selectors' => [
408	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group a' => 'color: {{VALUE}};',
409	],
410	]
411	);
412
413	$this->add_responsive_control(
414	'form_container_max_width',
415	[
416	'label' => esc_html__('Max Width', 'elementskit-lite'),
417	'type' => Controls_Manager::SLIDER,
418	'size_units' => ['px', 'em', '%'],
419	'range' => [
420	'px' => [
421	'min' => 10,
422	'max' => 1500,
423	],
424	'em' => [
425	'min' => 1,
426	'max' => 80,
427	],
428	],
429	'selectors' => [
430	'{{WRAPPER}} .fluentform-widget-wrapper' => 'width: {{SIZE}}{{UNIT}};'
431	],
432	]
433	);
434
435	$this->add_responsive_control(
436	'form_container_alignment',
437	[
438	'label' => esc_html__('Alignment', 'elementskit-lite'),
439	'type' => Controls_Manager::CHOOSE,
440	'label_block' => true,
441	'options' => [
442	'default' => [
443	'title' => __('Default', 'elementskit-lite'),
444	'icon' => 'fa fa-ban',
445	],
446	'left' => [
447	'title' => esc_html__('Left', 'elementskit-lite'),
448	'icon' => 'eicon-h-align-left',
449	],
450	'center' => [
451	'title' => esc_html__('Center', 'elementskit-lite'),
452	'icon' => 'eicon-h-align-center',
453	],
454	'right' => [
455	'title' => esc_html__('Right', 'elementskit-lite'),
456	'icon' => 'eicon-h-align-right',
457	],
458	],
459	'default' => 'default',
460	]
461	);
462
463	$this->add_responsive_control(
464	'form_container_margin',
465	[
466	'label' => esc_html__('Margin', 'elementskit-lite'),
467	'type' => Controls_Manager::DIMENSIONS,
468	'size_units' => ['px', 'em', '%'],
469	'selectors' => [
470	'{{WRAPPER}} .fluentform-widget-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
471	],
472	]
473	);
474
475	$this->add_responsive_control(
476	'form_container_padding',
477	[
478	'label' => esc_html__('Padding', 'elementskit-lite'),
479	'type' => Controls_Manager::DIMENSIONS,
480	'size_units' => ['px', 'em', '%'],
481	'selectors' => [
482	'{{WRAPPER}} .fluentform-widget-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
483	],
484	]
485	);
486
487
488	$this->add_group_control(
489	Group_Control_Border::get_type(),
490	[
491	'name' => 'form_container_border',
492	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper',
493	]
494	);
495
496	$this->add_control(
497	'form_container_border_radius',
498	[
499	'label' => esc_html__('Border Radius', 'elementskit-lite'),
500	'type' => Controls_Manager::DIMENSIONS,
501	'separator' => 'before',
502	'size_units' => ['px'],
503	'selectors' => [
504	'{{WRAPPER}} .fluentform-widget-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
505	],
506	]
507	);
508
509	$this->add_group_control(
510	Group_Control_Box_Shadow::get_type(),
511	[
512	'name' => 'form_container_box_shadow',
513	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper',
514	]
515	);
516
517	$this->end_controls_section();
518
519	// Label Style
520	$this->start_controls_section(
521	'section_form_label_style',
522	[
523	'label' => __('Labels', 'elementskit-lite'),
524	'tab' => Controls_Manager::TAB_STYLE,
525	]
526	);
527
528	$this->add_control(
529	'form_label_text_color',
530	[
531	'label' => __('Text Color', 'elementskit-lite'),
532	'type' => Controls_Manager::COLOR,
533	'selectors' => [
534	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-input--label label' => 'color: {{VALUE}}',
535	],
536	]
537	);
538
539	$this->add_group_control(
540	Group_Control_Typography::get_type(),
541	[
542	'name' => 'form_label_typography',
543	'label' => __('Typography', 'elementskit-lite'),
544	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-el-input--label label',
545	]
546	);
547
548	$this->end_controls_section();
549
550	// Input Textarea style
551	$this->start_controls_section(
552	'section_form_fields_style',
553	[
554	'label' => __('Input & Textarea', 'elementskit-lite'),
555	'tab' => Controls_Manager::TAB_STYLE,
556	]
557	);
558
559	$this->add_responsive_control(
560	'input_alignment',
561	[
562	'label' => __('Alignment', 'elementskit-lite'),
563	'type' => Controls_Manager::CHOOSE,
564	'options' => [
565	'left' => [
566	'title' => __('Left', 'elementskit-lite'),
567	'icon' => 'eicon-text-align-left',
568	],
569	'center' => [
570	'title' => __('Center', 'elementskit-lite'),
571	'icon' => 'eicon-text-align-center',
572	],
573	'right' => [
574	'title' => __('Right', 'elementskit-lite'),
575	'icon' => 'eicon-text-align-right',
576	],
577	],
578	'default' => '',
579	'selectors' => [
580	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select' => 'text-align: {{VALUE}};',
581	],
582	]
583	);
584
585	$this->start_controls_tabs('tabs_form_fields_style');
586
587	$this->start_controls_tab(
588	'tab_form_fields_normal',
589	[
590	'label' => __('Normal', 'elementskit-lite'),
591	]
592	);
593
594	$this->add_control(
595	'form_field_bg_color',
596	[
597	'label' => __('Background Color', 'elementskit-lite'),
598	'type' => Controls_Manager::COLOR,
599	'default' => '',
600	'selectors' => [
601	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.select2-search__field), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .select2-container--default .select2-selection--multiple' => 'background-color: {{VALUE}}',
602	],
603	]
604	);
605
606	$this->add_control(
607	'form_field_text_color',
608	[
609	'label' => __('Text Color', 'elementskit-lite'),
610	'type' => Controls_Manager::COLOR,
611	'default' => '',
612	'selectors' => [
613	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select' => 'color: {{VALUE}}',
614	],
615	]
616	);
617
618	$this->add_group_control(
619	Group_Control_Border::get_type(),
620	[
621	'name' => 'form_field_border',
622	'label' => __('Border', 'elementskit-lite'),
623	'placeholder' => '1px',
624	'default' => '1px',
625	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not(.select2-search__field), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .select2-container--default .select2-selection--multiple',
626	'separator' => 'before',
627	]
628	);
629
630	$this->add_control(
631	'form_field_radius',
632	[
633	'label' => __('Border Radius', 'elementskit-lite'),
634	'type' => Controls_Manager::DIMENSIONS,
635	'size_units' => ['px', 'em', '%'],
636	'selectors' => [
637	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .select2-container--default .select2-selection--multiple' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
638	],
639	]
640	);
641
642	$this->add_responsive_control(
643	'form_field_text_indent',
644	[
645	'label' => __('Text Indent', 'elementskit-lite'),
646	'type' => Controls_Manager::SLIDER,
647	'range' => [
648	'px' => [
649	'min' => 0,
650	'max' => 60,
651	'step' => 1,
652	],
653	'%' => [
654	'min' => 0,
655	'max' => 30,
656	'step' => 1,
657	],
658	],
659	'size_units' => ['px', 'em', '%'],
660	'selectors' => [
661	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select' => 'text-indent: {{SIZE}}{{UNIT}}',
662	],
663	'separator' => 'before',
664	]
665	);
666
667	$this->add_responsive_control(
668	'form_input_width',
669	[
670	'label' => __('Input Width', 'elementskit-lite'),
671	'type' => Controls_Manager::SLIDER,
672	'range' => [
673	'px' => [
674	'min' => 0,
675	'max' => 1200,
676	'step' => 1,
677	],
678	],
679	'size_units' => ['px', 'em', '%'],
680	'selectors' => [
681	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select, {{WRAPPER}} .frm-fluent-form .choices' => 'width: {{SIZE}}{{UNIT}}',
682	],
683	]
684	);
685
686	$this->add_responsive_control(
687	'form_input_height',
688	[
689	'label' => __('Input Height', 'elementskit-lite'),
690	'type' => Controls_Manager::SLIDER,
691	'range' => [
692	'px' => [
693	'min' => 0,
694	'max' => 80,
695	'step' => 1,
696	],
697	],
698	'size_units' => ['px', 'em', '%'],
699	'selectors' => [
700	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select' => 'height: {{SIZE}}{{UNIT}}',
701	],
702	]
703	);
704
705	$this->add_responsive_control(
706	'form_textarea_width',
707	[
708	'label' => __('Textarea Width', 'elementskit-lite'),
709	'type' => Controls_Manager::SLIDER,
710	'range' => [
711	'px' => [
712	'min' => 0,
713	'max' => 1200,
714	'step' => 1,
715	],
716	],
717	'size_units' => ['px', 'em', '%'],
718	'selectors' => [
719	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea' => 'width: {{SIZE}}{{UNIT}}',
720	],
721	]
722	);
723
724	$this->add_responsive_control(
725	'form_textarea_height',
726	[
727	'label' => __('Textarea Height', 'elementskit-lite'),
728	'type' => Controls_Manager::SLIDER,
729	'range' => [
730	'px' => [
731	'min' => 0,
732	'max' => 400,
733	'step' => 1,
734	],
735	],
736	'size_units' => ['px', 'em', '%'],
737	'selectors' => [
738	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea' => 'height: {{SIZE}}{{UNIT}}',
739	],
740	]
741	);
742
743	$this->add_responsive_control(
744	'form_field_padding',
745	[
746	'label' => __('Padding', 'elementskit-lite'),
747	'type' => Controls_Manager::DIMENSIONS,
748	'size_units' => ['px', 'em', '%'],
749	'selectors' => [
750	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
751	],
752	]
753	);
754
755	$this->add_responsive_control(
756	'form_field_spacing',
757	[
758	'label' => __('Spacing', 'elementskit-lite'),
759	'type' => Controls_Manager::SLIDER,
760	'range' => [
761	'px' => [
762	'min' => 0,
763	'max' => 100,
764	'step' => 1,
765	],
766	],
767	'size_units' => ['px', 'em', '%'],
768	'selectors' => [
769	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group' => 'margin-bottom: {{SIZE}}{{UNIT}}',
770	],
771	]
772	);
773
774	$this->add_group_control(
775	Group_Control_Typography::get_type(),
776	[
777	'name' => 'form_field_typography',
778	'label' => __('Typography', 'elementskit-lite'),
779	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select',
780	'separator' => 'before',
781	]
782	);
783
784	$this->add_group_control(
785	Group_Control_Box_Shadow::get_type(),
786	[
787	'name' => 'form_field_box_shadow',
788	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group select',
789	'separator' => 'before',
790	]
791	);
792
793	$this->end_controls_tab();
794
795	$this->start_controls_tab(
796	'tab_form_fields_focus',
797	[
798	'label' => __('Focus', 'elementskit-lite'),
799	]
800	);
801
802	$this->add_control(
803	'form_field_bg_color_focus',
804	[
805	'label' => __('Background Color', 'elementskit-lite'),
806	'type' => Controls_Manager::COLOR,
807	'default' => '',
808	'selectors' => [
809	'{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea:focus' => 'background-color: {{VALUE}}',
810	],
811	]
812	);
813
814	$this->add_group_control(
815	Group_Control_Border::get_type(),
816	[
817	'name' => 'form_input_focus_border',
818	'label' => __('Border', 'elementskit-lite'),
819	'placeholder' => '1px',
820	'default' => '1px',
821	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea:focus',
822	]
823	);
824
825	$this->add_group_control(
826	Group_Control_Box_Shadow::get_type(),
827	[
828	'name' => 'form_input_focus_box_shadow',
829	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):focus, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea:focus',
830	'separator' => 'before',
831	]
832	);
833
834	$this->end_controls_tab();
835
836	$this->end_controls_tabs();
837
838	$this->end_controls_section();
839
840	// Placeholder Style
841	$this->start_controls_section(
842	'section_placeholder_style',
843	[
844	'label' => __('Placeholder', 'elementskit-lite'),
845	'tab' => Controls_Manager::TAB_STYLE,
846	'condition' => [
847	'placeholder_switch' => 'yes',
848	],
849	]
850	);
851
852	$this->add_control(
853	'form_placeholder_text_color',
854	[
855	'label' => __('Text Color', 'elementskit-lite'),
856	'type' => Controls_Manager::COLOR,
857	'selectors' => [
858	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group input::-webkit-input-placeholder, {{WRAPPER}} .fluentform-widget-wrapper .ff-el-group textarea::-webkit-input-placeholder' => 'color: {{VALUE}}',
859	],
860	'condition' => [
861	'placeholder_switch' => 'yes',
862	],
863	]
864	);
865
866	$this->end_controls_section();
867
868
869	// Radio & Checkbox Styles
870	$this->start_controls_section(
871	'section_form_radio_checkbox_style',
872	[
873	'label' => __('Radio & Checkbox', 'elementskit-lite'),
874	'tab' => Controls_Manager::TAB_STYLE,
875	]
876	);
877
878	$this->add_control(
879	'radio_checkbox_label_color',
880	[
881	'label' => __('Label Color', 'elementskit-lite'),
882	'type' => Controls_Manager::COLOR,
883	'default' => '',
884	'selectors' => [
885	'{{WRAPPER}} .ff-el-form-check-label' => 'color: {{VALUE}}',
886	],
887	]
888	);
889
890	$this->add_group_control(
891	Group_Control_Typography::get_type(),
892	[
893	'name' => 'radio_checkbox_label_typo',
894	'label' => __('Label Typography', 'elementskit-lite'),
895	'selector' => '{{WRAPPER}} .ff-el-form-check-label',
896	'separator' => 'after',
897	'fields_options' => [
898	'typography' => [
899	'label' => __('Label Typography', 'elementskit-lite'),
900	],
901	]
902	]
903	);
904
905	$this->add_responsive_control(
906	'form_radio_checkbox_text_indent',
907	[
908	'label' => __('Text Indent', 'elementskit-lite'),
909	'type' => Controls_Manager::SLIDER,
910	'range' => [
911	'px' => [
912	'min' => 0,
913	'max' => 60,
914	'step' => 1,
915	],
916	'%' => [
917	'min' => 0,
918	'max' => 30,
919	'step' => 1,
920	],
921	],
922	'default' => [
923	'unit' => 'px',
924	'size' => 3
925	],
926	'size_units' => ['px', 'em', '%'],
927	'selectors' => [
928	'{{WRAPPER}} .ff-el-input--content input[type="checkbox"], {{WRAPPER}} .ff-el-input--content input[type="radio"]' => 'margin-right: {{SIZE}}{{UNIT}}',
929	]
930	]
931	);
932
933	$this->add_control(
934	'form_custom_radio_checkbox',
935	[
936	'label' => __('Custom Styles', 'elementskit-lite'),
937	'type' => Controls_Manager::SWITCHER,
938	'label_on' => __('Yes', 'elementskit-lite'),
939	'label_off' => __('No', 'elementskit-lite'),
940	'return_value' => 'yes'
941	]
942	);
943
944	$this->add_responsive_control(
945	'form_radio_checkbox_size',
946	[
947	'label' => __('Size', 'elementskit-lite'),
948	'type' => Controls_Manager::SLIDER,
949	'default' => [
950	'size' => '15',
951	'unit' => 'px',
952	],
953	'range' => [
954	'px' => [
955	'min' => 0,
956	'max' => 80,
957	'step' => 1,
958	],
959	],
960	'size_units' => ['px', 'em', '%'],
961	'selectors' => [
962	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"], {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
963	],
964	'condition' => [
965	'form_custom_radio_checkbox' => 'yes',
966	],
967	]
968	);
969
970	$this->start_controls_tabs('tabs_radio_checkbox_style');
971
972	$this->start_controls_tab(
973	'form_radio_checkbox_normal',
974	[
975	'label' => __('Normal', 'elementskit-lite'),
976	'condition' => [
977	'form_custom_radio_checkbox' => 'yes',
978	],
979	]
980	);
981
982	$this->add_control(
983	'form_radio_checkbox_bg_color',
984	[
985	'label' => __('Background Color', 'elementskit-lite'),
986	'type' => Controls_Manager::COLOR,
987	'default' => '',
988	'selectors' => [
989	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"]:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:after' => 'background-color: {{VALUE}}',
990	],
991	'condition' => [
992	'form_custom_radio_checkbox' => 'yes',
993	],
994	]
995	);
996
997	$this->add_responsive_control(
998	'form_checkbox_border_width',
999	[
1000	'label' => __('Border Width', 'elementskit-lite'),
1001	'type' => Controls_Manager::SLIDER,
1002	'range' => [
1003	'px' => [
1004	'min' => 0,
1005	'max' => 15,
1006	'step' => 1,
1007	],
1008	],
1009	'size_units' => ['px'],
1010	'selectors' => [
1011	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"]:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:after' => 'border-width: {{SIZE}}{{UNIT}}',
1012	],
1013	'condition' => [
1014	'form_custom_radio_checkbox' => 'yes',
1015	],
1016	]
1017	);
1018
1019	$this->add_control(
1020	'form_checkbox_border_color',
1021	[
1022	'label' => __('Border Color', 'elementskit-lite'),
1023	'type' => Controls_Manager::COLOR,
1024	'default' => '',
1025	'selectors' => [
1026	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"]:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:after' => 'border-color: {{VALUE}}',
1027	],
1028	'condition' => [
1029	'form_custom_radio_checkbox' => 'yes',
1030	],
1031	]
1032	);
1033
1034	$this->add_control(
1035	'form_checkbox_heading',
1036	[
1037	'label' => __('Checkbox', 'elementskit-lite'),
1038	'type' => Controls_Manager::HEADING,
1039	'condition' => [
1040	'form_custom_radio_checkbox' => 'yes',
1041	],
1042	]
1043	);
1044
1045	$this->add_control(
1046	'form_checkbox_border_radius',
1047	[
1048	'label' => __('Border Radius', 'elementskit-lite'),
1049	'type' => Controls_Manager::DIMENSIONS,
1050	'size_units' => ['px', 'em', '%'],
1051	'selectors' => [
1052	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"]:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1053	],
1054	'condition' => [
1055	'form_custom_radio_checkbox' => 'yes',
1056	],
1057	]
1058	);
1059
1060	$this->add_control(
1061	'form_radio_heading',
1062	[
1063	'label' => __('Radio Buttons', 'elementskit-lite'),
1064	'type' => Controls_Manager::HEADING,
1065	'condition' => [
1066	'form_custom_radio_checkbox' => 'yes',
1067	],
1068	]
1069	);
1070
1071	$this->add_control(
1072	'form_radio_border_radius',
1073	[
1074	'label' => __('Border Radius', 'elementskit-lite'),
1075	'type' => Controls_Manager::DIMENSIONS,
1076	'size_units' => ['px', 'em', '%'],
1077	'selectors' => [
1078	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:after' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1079	],
1080	'condition' => [
1081	'form_custom_radio_checkbox' => 'yes',
1082	],
1083	]
1084	);
1085
1086	$this->end_controls_tab();
1087
1088	$this->start_controls_tab(
1089	'form_radio_checkbox_checked',
1090	[
1091	'label' => __('Checked', 'elementskit-lite'),
1092	'condition' => [
1093	'form_custom_radio_checkbox' => 'yes',
1094	],
1095	]
1096	);
1097
1098	$this->add_control(
1099	'form_radio_checkbox_bg_color_checked',
1100	[
1101	'label' => __('Background Color', 'elementskit-lite'),
1102	'type' => Controls_Manager::COLOR,
1103	'default' => '',
1104	'selectors' => [
1105	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"]:checked:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:checked:after' => 'background-color: {{VALUE}}',
1106	],
1107	'condition' => [
1108	'form_custom_radio_checkbox' => 'yes',
1109	],
1110	]
1111	);
1112
1113	$this->add_control(
1114	'form_radio_checkbox_border_checked',
1115	[
1116	'label' => __('Border Color', 'elementskit-lite'),
1117	'type' => Controls_Manager::COLOR,
1118	'default' => '',
1119	'selectors' => [
1120	'{{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="checkbox"]:checked:after, {{WRAPPER}} .fluentform-widget-custom-radio-checkbox input[type="radio"]:checked:after' => 'border-color: {{VALUE}}',
1121	],
1122	'condition' => [
1123	'form_custom_radio_checkbox' => 'yes',
1124	],
1125	]
1126	);
1127
1128	$this->end_controls_tab();
1129
1130	$this->end_controls_tabs();
1131
1132	$this->end_controls_section();
1133
1134	// Section Break Style
1135	$this->start_controls_section(
1136	'form_section_break_style',
1137	[
1138	'label' => __('Section Break', 'elementskit-lite'),
1139	'tab' => Controls_Manager::TAB_STYLE,
1140	]
1141	);
1142
1143	$this->add_control(
1144	'form_section_break_label',
1145	[
1146	'label' => __('Label', 'elementskit-lite'),
1147	'type' => Controls_Manager::HEADING
1148	]
1149	);
1150
1151	$this->add_control(
1152	'form_section_break_label_color',
1153	[
1154	'label' => __('Color', 'elementskit-lite'),
1155	'type' => Controls_Manager::COLOR,
1156	'default' => '',
1157	'selectors' => [
1158	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break .ff-el-section-title' => 'color: {{VALUE}};',
1159	],
1160	]
1161	);
1162
1163	$this->add_group_control(
1164	Group_Control_Typography::get_type(),
1165	[
1166	'name' => 'form_section_break_label_typography',
1167	'label' => __('Typography', 'elementskit-lite'),
1168	'selector' => '.fluentform-widget-wrapper .ff-el-section-break .ff-el-section-title',
1169	'separator' => 'before',
1170	]
1171	);
1172
1173	$this->add_responsive_control(
1174	'form_section_break_label_padding',
1175	[
1176	'label' => __('Padding', 'elementskit-lite'),
1177	'type' => Controls_Manager::DIMENSIONS,
1178	'size_units' => ['px', 'em', '%'],
1179	'selectors' => [
1180	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break .ff-el-section-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1181	],
1182	]
1183	);
1184
1185	$this->add_responsive_control(
1186	'form_section_break_label_margin',
1187	[
1188	'label' => __('Margin', 'elementskit-lite'),
1189	'type' => Controls_Manager::DIMENSIONS,
1190	'size_units' => ['px', 'em', '%'],
1191	'selectors' => [
1192	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break .ff-el-section-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1193	],
1194	]
1195	);
1196
1197	$this->add_control(
1198	'form_section_break_description',
1199	[
1200	'label' => __('Description', 'elementskit-lite'),
1201	'type' => Controls_Manager::HEADING,
1202	'separator' => 'before'
1203	]
1204	);
1205
1206	$this->add_control(
1207	'form_section_break_description_color',
1208	[
1209	'label' => __('Color', 'elementskit-lite'),
1210	'type' => Controls_Manager::COLOR,
1211	'default' => '',
1212	'selectors' => [
1213	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break .ff-section_break_desk' => 'color: {{VALUE}};',
1214	],
1215	]
1216	);
1217
1218	$this->add_group_control(
1219	Group_Control_Typography::get_type(),
1220	[
1221	'name' => 'form_section_break_description_typography',
1222	'label' => __('Typography', 'elementskit-lite'),
1223	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break div',
1224	'separator' => 'before',
1225	]
1226	);
1227
1228	$this->add_responsive_control(
1229	'form_section_break_description_padding',
1230	[
1231	'label' => __('Padding', 'elementskit-lite'),
1232	'type' => Controls_Manager::DIMENSIONS,
1233	'size_units' => ['px', 'em', '%'],
1234	'selectors' => [
1235	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break .ff-section_break_desk' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1236	],
1237	]
1238	);
1239
1240	$this->add_responsive_control(
1241	'form_section_break_description_margin',
1242	[
1243	'label' => __('Margin', 'elementskit-lite'),
1244	'type' => Controls_Manager::DIMENSIONS,
1245	'size_units' => ['px', 'em', '%'],
1246	'selectors' => [
1247	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-section-break .ff-section_break_desk' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1248	],
1249	]
1250	);
1251
1252	$this->add_responsive_control(
1253	'form_section_break_alignment',
1254	[
1255	'label' => __('Alignment', 'elementskit-lite'),
1256	'type' => Controls_Manager::CHOOSE,
1257	'options' => [
1258	'left' => [
1259	'title' => __('Left', 'elementskit-lite'),
1260	'icon' => 'eicon-h-align-left',
1261	],
1262	'center' => [
1263	'title' => __('Center', 'elementskit-lite'),
1264	'icon' => 'eicon-h-align-center',
1265	],
1266	'right' => [
1267	'title' => __('Right', 'elementskit-lite'),
1268	'icon' => 'eicon-h-align-right',
1269	],
1270	],
1271	'prefix_class' => 'fluentform-widget-section-break-content-'
1272	]
1273	);
1274
1275	$this->add_control(
1276	'form_section_break_separator_color',
1277	[
1278	'label' => __('Separator Color', 'elementskit-lite'),
1279	'type' => Controls_Manager::COLOR,
1280	'selectors' => [
1281	'{{WRAPPER}} .ff-el-section-break hr' => 'border-color: {{VALUE}}',
1282	],
1283	]
1284	);
1285
1286	$this->end_controls_section();
1287
1288	// Checkbox Grid Style
1289	$this->start_controls_section(
1290	'section_form_checkbox_grid',
1291	[
1292	'label' => __('Checkbox Grid', 'elementskit-lite'),
1293	'tab' => Controls_Manager::TAB_STYLE,
1294	]
1295	);
1296
1297	$this->add_control(
1298	'section_form_checkbox_grid_head',
1299	[
1300	'label' => __('Grid Table Head', 'elementskit-lite'),
1301	'type' => Controls_Manager::HEADING,
1302	'separator' => 'before'
1303	]
1304	);
1305
1306	$this->add_control(
1307	'form_checkbox_grid_table_head_text_color',
1308	[
1309	'label' => __('Color', 'elementskit-lite'),
1310	'type' => Controls_Manager::COLOR,
1311	'default' => '',
1312	'selectors' => [
1313	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table thead th' => 'color: {{VALUE}};',
1314	],
1315	]
1316	);
1317
1318	$this->add_control(
1319	'form_checkbox_grid_table_head_color',
1320	[
1321	'label' => __('Background Color', 'elementskit-lite'),
1322	'type' => Controls_Manager::COLOR,
1323	'default' => '',
1324	'selectors' => [
1325	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table thead th' => 'background-color: {{VALUE}};',
1326	],
1327	]
1328	);
1329
1330	$this->add_group_control(
1331	Group_Control_Typography::get_type(),
1332	[
1333	'name' => 'form_checkbox_grid_table_head_typography',
1334	'label' => __('Typography', 'elementskit-lite'),
1335	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-table thead th',
1336	'separator' => 'before',
1337	]
1338	);
1339
1340	$this->add_responsive_control(
1341	'form_checkbox_grid_table_head_height',
1342	[
1343	'label' => __('Height', 'elementskit-lite'),
1344	'type' => Controls_Manager::SLIDER,
1345	'range' => [
1346	'px' => [
1347	'min' => 0,
1348	'max' => 1200,
1349	'step' => 1,
1350	],
1351	],
1352	'size_units' => ['px', '%'],
1353	'selectors' => [
1354	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table thead th' => 'height: {{SIZE}}{{UNIT}}',
1355	]
1356	]
1357	);
1358
1359	$this->add_group_control(
1360	Group_Control_Border::get_type(),
1361	[
1362	'name' => 'form_checkbox_grid_table_head_border',
1363	'label' => __('Border', 'elementskit-lite'),
1364	'default' => '',
1365	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-table thead tr',
1366	]
1367	);
1368
1369	$this->add_responsive_control(
1370	'form_checkbox_grid_table_head_padding',
1371	[
1372	'label' => __('Padding', 'elementskit-lite'),
1373	'type' => Controls_Manager::DIMENSIONS,
1374	'size_units' => ['px', 'em', '%'],
1375	'selectors' => [
1376	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table thead th' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1377	],
1378	]
1379	);
1380
1381	$this->add_control(
1382	'form_checkbox_grid_table_item',
1383	[
1384	'label' => __('Grid Table Item', 'elementskit-lite'),
1385	'type' => Controls_Manager::HEADING,
1386	'separator' => 'before'
1387	]
1388	);
1389
1390	$this->add_control(
1391	'form_checkbox_grid_table_item_color',
1392	[
1393	'label' => __('Color', 'elementskit-lite'),
1394	'type' => Controls_Manager::COLOR,
1395	'default' => '',
1396	'selectors' => [
1397	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table tbody tr td' => 'color: {{VALUE}} !important;',
1398	],
1399	]
1400	);
1401
1402	$this->add_control(
1403	'form_checkbox_grid_table_item_bg_color',
1404	[
1405	'label' => __('Background Color', 'elementskit-lite'),
1406	'type' => Controls_Manager::COLOR,
1407	'default' => '',
1408	'selectors' => [
1409	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table tbody tr td' => 'background-color: {{VALUE}};',
1410	],
1411	]
1412	);
1413
1414	$this->add_control(
1415	'form_checkbox_grid_table_item_odd_bg_color',
1416	[
1417	'label' => __('Odd Item Background Color', 'elementskit-lite'),
1418	'type' => Controls_Manager::COLOR,
1419	'default' => '',
1420	'selectors' => [
1421	'{{WRAPPER}} .fluentform-widget-wrapper tbody>tr:nth-child(2n)>td' => 'background-color: {{VALUE}} !important;',
1422	],
1423	]
1424	);
1425
1426	$this->add_group_control(
1427	Group_Control_Typography::get_type(),
1428	[
1429	'name' => 'form_checkbox_grid_table_item_typography',
1430	'label' => __('Typography', 'elementskit-lite'),
1431	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-table tbody tr td',
1432	]
1433	);
1434
1435	$this->add_responsive_control(
1436	'form_checkbox_grid_table_item_height',
1437	[
1438	'label' => __('Height', 'elementskit-lite'),
1439	'type' => Controls_Manager::SLIDER,
1440	'range' => [
1441	'px' => [
1442	'min' => 0,
1443	'max' => 1200,
1444	'step' => 1,
1445	],
1446	],
1447	'size_units' => ['px', '%'],
1448	'selectors' => [
1449	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table tbody tr td' => 'height: {{SIZE}}{{UNIT}}',
1450	]
1451	]
1452	);
1453
1454	$this->add_group_control(
1455	Group_Control_Border::get_type(),
1456	[
1457	'name' => 'form_checkbox_grid_table_item_border',
1458	'label' => __('Border', 'elementskit-lite'),
1459	'default' => '',
1460	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-table tbody tr',
1461	]
1462	);
1463
1464	$this->add_responsive_control(
1465	'form_checkbox_grid_table_item_padding',
1466	[
1467	'label' => __('Padding', 'elementskit-lite'),
1468	'type' => Controls_Manager::DIMENSIONS,
1469	'size_units' => ['px', 'em', '%'],
1470	'selectors' => [
1471	'{{WRAPPER}} .fluentform-widget-wrapper .ff-table tbody tr td' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1472	],
1473	]
1474	);
1475
1476	$this->end_controls_section();
1477
1478	// Address Line Styles
1479	$this->start_controls_section(
1480	'section_form_address_line_style',
1481	[
1482	'label' => __('Address Line', 'elementskit-lite'),
1483	'tab' => Controls_Manager::TAB_STYLE,
1484	]
1485	);
1486
1487	$this->add_control(
1488	'address_line_label_color',
1489	[
1490	'label' => __('Label Color', 'elementskit-lite'),
1491	'type' => Controls_Manager::COLOR,
1492	'default' => '',
1493	'selectors' => [
1494	'{{WRAPPER}} .fluentform-widget-wrapper .fluent-address label' => 'color: {{VALUE}};',
1495	],
1496	]
1497	);
1498
1499	$this->add_group_control(
1500	Group_Control_Typography::get_type(),
1501	[
1502	'name' => 'address_line_label_typography',
1503	'label' => __('Typography', 'elementskit-lite'),
1504	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .fluent-address label',
1505	]
1506	);
1507
1508	$this->end_controls_section();
1509
1510	// Image Upload Style
1511	$this->start_controls_section(
1512	'section_form_image_upload_style',
1513	[
1514	'label' => __('Image Upload', 'elementskit-lite'),
1515	'tab' => Controls_Manager::TAB_STYLE,
1516	]
1517	);
1518
1519	$this->start_controls_tabs('tabs_form_image_upload_button_style');
1520
1521	$this->start_controls_tab(
1522	'tab_form_image_upload_button_normal',
1523	[
1524	'label' => __('Normal', 'elementskit-lite'),
1525	]
1526	);
1527
1528	$this->add_control(
1529	'form_image_upload_bg_color',
1530	[
1531	'label' => __('Background Color', 'elementskit-lite'),
1532	'type' => Controls_Manager::COLOR,
1533	'default' => '',
1534	'selectors' => [
1535	'{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn' => 'background-color: {{VALUE}};',
1536	],
1537	]
1538	);
1539
1540	$this->add_group_control(
1541	Group_Control_Border::get_type(),
1542	[
1543	'name' => 'form_image_upload_button_border_normal',
1544	'label' => __('Border', 'elementskit-lite'),
1545	'default' => '',
1546	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn',
1547	]
1548	);
1549
1550	$this->add_control(
1551	'form_image_upload_button_border_radius',
1552	[
1553	'label' => __('Border Radius', 'elementskit-lite'),
1554	'type' => Controls_Manager::DIMENSIONS,
1555	'size_units' => ['px', 'em', '%'],
1556	'selectors' => [
1557	'{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1558	],
1559	]
1560	);
1561
1562	$this->add_responsive_control(
1563	'form_image_upload_button_padding',
1564	[
1565	'label' => __('Padding', 'elementskit-lite'),
1566	'type' => Controls_Manager::DIMENSIONS,
1567	'size_units' => ['px', 'em', '%'],
1568	'selectors' => [
1569	'{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1570	],
1571	]
1572	);
1573
1574	$this->add_group_control(
1575	Group_Control_Typography::get_type(),
1576	[
1577	'name' => 'form_image_upload_typography',
1578	'label' => __('Typography', 'elementskit-lite'),
1579	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn',
1580	]
1581	);
1582
1583	$this->add_group_control(
1584	Group_Control_Box_Shadow::get_type(),
1585	[
1586	'name' => 'form_image_upload_button_box_shadow',
1587	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn',
1588	]
1589	);
1590
1591	$this->end_controls_tab();
1592
1593	$this->start_controls_tab(
1594	'tab_form_image_upload_button_hover',
1595	[
1596	'label' => __('Hover', 'elementskit-lite'),
1597	]
1598	);
1599
1600	$this->add_control(
1601	'form_image_upload_button_bg_color_hover',
1602	[
1603	'label' => __('Background Color', 'elementskit-lite'),
1604	'type' => Controls_Manager::COLOR,
1605	'default' => '',
1606	'selectors' => [
1607	'{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn:hover' => 'background-color: {{VALUE}} !important;',
1608	],
1609	]
1610	);
1611
1612	$this->add_control(
1613	'form_image_upload_button_text_color_hover',
1614	[
1615	'label' => __('Text Color', 'elementskit-lite'),
1616	'type' => Controls_Manager::COLOR,
1617	'default' => '',
1618	'selectors' => [
1619	'{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn:hover' => 'color: {{VALUE}} !important;',
1620	],
1621	]
1622	);
1623
1624	$this->add_control(
1625	'form_image_upload_button_border_color_hover',
1626	[
1627	'label' => __('Border Color', 'elementskit-lite'),
1628	'type' => Controls_Manager::COLOR,
1629	'default' => '',
1630	'selectors' => [
1631	'{{WRAPPER}} .fluentform-widget-wrapper .ff_upload_btn.ff-btn:hover' => 'border-color: {{VALUE}}',
1632	],
1633	]
1634	);
1635
1636	$this->end_controls_tab();
1637
1638	$this->end_controls_tabs();
1639	$this->end_controls_section();
1640
1641
1642
1643	// Pagination Style
1644	if( defined("FLUENTFORMPRO") ) {
1645
1646	// Range Slider
1647	$this->start_controls_section(
1648	'range_slider_section',
1649	[
1650	'label' => __('Range Slider', 'elementskit-lite'),
1651	'tab' => Controls_Manager::TAB_STYLE,
1652	]
1653	);
1654
1655	$this->add_control(
1656	'range_slider_counter_color',
1657	[
1658	'label' => __('Counter Color', 'elementskit-lite'),
1659	'type' => Controls_Manager::COLOR,
1660	'selectors' => [
1661	'{{WRAPPER}} .ff_range_value' => 'color: {{VALUE}}',
1662	],
1663	]
1664	);
1665
1666	$this->add_group_control(
1667	Group_Control_Typography::get_type(),
1668	[
1669	'name' => 'range_slider_counter_typo',
1670	'label' => __('Typography', 'elementskit-lite'),
1671	'selector' => '{{WRAPPER}} .ff_range_value',
1672	'separator' => 'before',
1673	'fields_options' => [
1674	'typography' => [
1675	'label' => __( 'Counter Typography', 'elementskit-lite' )
1676	],
1677	]
1678	]
1679	);
1680
1681	$this->start_controls_tabs('range_slider_tabs');
1682
1683	$this->start_controls_tab(
1684	'range_slider_normal',
1685	[
1686	'label' => __('Normal', 'elementskit-lite'),
1687	]
1688	);
1689	$this->add_control(
1690	'range_slider_normal_color',
1691	[
1692	'label' => __('Color', 'elementskit-lite'),
1693	'type' => Controls_Manager::COLOR,
1694	'selectors' => [
1695	'{{WRAPPER}} .rangeslider' => 'background: {{VALUE}}',
1696	],
1697	]
1698	);
1699	$this->end_controls_tab();
1700
1701	$this->start_controls_tab(
1702	'range_slider_active',
1703	[
1704	'label' => __('Active', 'elementskit-lite'),
1705	]
1706	);
1707	$this->add_control(
1708	'range_slider_active_color',
1709	[
1710	'label' => __('Color', 'elementskit-lite'),
1711	'type' => Controls_Manager::COLOR,
1712	'selectors' => [
1713	'{{WRAPPER}} .rangeslider' => 'background: {{VALUE}}',
1714	],
1715	]
1716	);
1717	$this->end_controls_tab();
1718
1719	$this->end_controls_tabs();
1720
1721
1722	$this->end_controls_section();
1723	// End Range Slider
1724
1725	// Net Promoter Score
1726	$this->start_controls_section(
1727	'pro_score_section',
1728	[
1729	'label' => __('Net Promoter Score', 'elementskit-lite'),
1730	'tab' => Controls_Manager::TAB_STYLE,
1731	]
1732	);
1733
1734	$this->add_control(
1735	'pro_score_label',
1736	[
1737	'label' => esc_html__( 'Label:', 'elementskit-lite' ),
1738	'type' => Controls_Manager::HEADING,
1739	]
1740	);
1741
1742	$this->add_control(
1743	'pro_score_label_color',
1744	[
1745	'label' => __('Color', 'elementskit-lite'),
1746	'type' => Controls_Manager::COLOR,
1747	'default' => '',
1748	'selectors' => [
1749	'{{WRAPPER}} .ff_not-likely, {{WRAPPER}} .ff_extremely-likely' => 'color: {{VALUE}}',
1750	],
1751	]
1752	);
1753
1754	$this->add_group_control(
1755	Group_Control_Typography::get_type(),
1756	[
1757	'name' => 'pro_score_label_typo',
1758	'label' => __('Typography', 'elementskit-lite'),
1759	'selector' => '{{WRAPPER}} .ff_not-likely, {{WRAPPER}} .ff_extremely-likely',
1760	'separator' => 'after',
1761	]
1762	);
1763
1764	$this->add_control(
1765	'pro_score_input',
1766	[
1767	'label' => esc_html__( 'Input:', 'elementskit-lite' ),
1768	'type' => Controls_Manager::HEADING,
1769	'separator' => 'before',
1770	]
1771	);
1772
1773	$this->add_control(
1774	'pro_score_input_color',
1775	[
1776	'label' => __('Color', 'elementskit-lite'),
1777	'type' => Controls_Manager::COLOR,
1778	'default' => '',
1779	'selectors' => [
1780	'{{WRAPPER}} .ff_net_table tbody tr td label' => 'color: {{VALUE}}',
1781	],
1782	]
1783	);
1784
1785	$this->add_group_control(
1786	Group_Control_Typography::get_type(),
1787	[
1788	'name' => 'pro_score_input_typo',
1789	'label' => __('Typography', 'elementskit-lite'),
1790	'selector' => '{{WRAPPER}} .ff_net_table tbody tr td label',
1791	'separator' => 'after',
1792	]
1793	);
1794
1795	$this->add_group_control(
1796	Group_Control_Background::get_type(),
1797	[
1798	'name' => 'pro_score_input_bg',
1799	'label' => __( 'Background', 'elementskit-lite' ),
1800	'types' => [ 'classic', 'gradient' ],
1801	'selector' => '{{WRAPPER}} .ff_net_table tbody tr td label'
1802	]
1803	);
1804
1805	$this->add_control(
1806	'pro_score_input_border_color',
1807	[
1808	'label' => __('Border Color', 'elementskit-lite'),
1809	'type' => Controls_Manager::COLOR,
1810	'default' => '',
1811	'selectors' => [
1812	'{{WRAPPER}} .ff_net_table tbody tr td, {{WRAPPER}} .ff_net_table tbody tr td:first-of-type' => 'border-color: {{VALUE}}',
1813	],
1814	]
1815	);
1816
1817	$this->add_control(
1818	'pro_score_input_hover_border_color',
1819	[
1820	'label' => __('Hover Border Color', 'elementskit-lite'),
1821	'type' => Controls_Manager::COLOR,
1822	'default' => '',
1823	'selectors' => [
1824	'{{WRAPPER}} .ff_net_table tbody tr td label:hover:after' => 'border-color: {{VALUE}}',
1825	],
1826	]
1827	);
1828
1829
1830	$this->end_controls_section();
1831	// End Net Promoter Score
1832
1833	// Rating
1834	$this->start_controls_section(
1835	'rating_section',
1836	[
1837	'label' => __('Rating', 'elementskit-lite'),
1838	'tab' => Controls_Manager::TAB_STYLE,
1839	]
1840	);
1841
1842	$this->add_responsive_control(
1843	'rating_font_size',
1844	[
1845	'label' => esc_html__( 'Font Size', 'elementskit-lite' ),
1846	'type' => Controls_Manager::SLIDER,
1847	'size_units' => [ 'px' ],
1848	'range' => [
1849	'px' => [
1850	'min' => 0,
1851	'max' => 100,
1852	'step' => 1,
1853	],
1854	],
1855	'selectors' => [
1856	'{{WRAPPER}} .fluentform .ff-el-ratings svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
1857	],
1858	]
1859	);
1860
1861	$this->add_responsive_control(
1862	'rating_gap',
1863	[
1864	'label' => esc_html__( 'Gap', 'elementskit-lite' ),
1865	'type' => Controls_Manager::SLIDER,
1866	'size_units' => [ 'px' ],
1867	'range' => [
1868	'px' => [
1869	'min' => 0,
1870	'max' => 100,
1871	'step' => 1,
1872	],
1873	],
1874	'selectors' => [
1875	'{{WRAPPER}} .fluentform .ff-el-ratings svg' => 'margin: 0 {{SIZE}}{{UNIT}}',
1876	],
1877	]
1878	);
1879
1880	$this->start_controls_tabs('rating_tabs');
1881
1882	$this->start_controls_tab(
1883	'rating_normal',
1884	[
1885	'label' => __('Normal', 'elementskit-lite'),
1886	]
1887	);
1888	$this->add_control(
1889	'rating_normal_color',
1890	[
1891	'label' => __('Color', 'elementskit-lite'),
1892	'type' => Controls_Manager::COLOR,
1893	'selectors' => [
1894	'{{WRAPPER}} .fluentform .ff-el-ratings label svg' => 'fill: {{VALUE}}',
1895	],
1896	]
1897	);
1898	$this->end_controls_tab();
1899
1900	$this->start_controls_tab(
1901	'rating_active',
1902	[
1903	'label' => __('Active', 'elementskit-lite'),
1904	]
1905	);
1906	$this->add_control(
1907	'rating_active_color',
1908	[
1909	'label' => __('Color', 'elementskit-lite'),
1910	'type' => Controls_Manager::COLOR,
1911	'selectors' => [
1912	'{{WRAPPER}} .fluentform .ff-el-ratings label.active svg' => 'fill: {{VALUE}}',
1913	],
1914	]
1915	);
1916	$this->end_controls_tab();
1917
1918	$this->end_controls_tabs();
1919
1920
1921	$this->end_controls_section();
1922	// End Rating
1923
1924	$this->start_controls_section(
1925	'section_form_pagination_style',
1926	[
1927	'label' => __('Pagination', 'elementskit-lite'),
1928	'tab' => Controls_Manager::TAB_STYLE,
1929	]
1930	);
1931
1932	$this->add_control(
1933	'form_pagination_progressbar_label',
1934	[
1935	'label' => __('Progressbar Label', 'elementskit-lite'),
1936	'type' => Controls_Manager::HEADING
1937	]
1938	);
1939
1940	$this->add_control(
1941	'show_label',
1942	[
1943	'label' => __( 'Show Label', 'elementskit-lite' ),
1944	'type' => Controls_Manager::SWITCHER,
1945	'label_on' => __( 'Show', 'elementskit-lite' ),
1946	'label_off' => __( 'Hide', 'elementskit-lite' ),
1947	'return_value' => 'yes',
1948	'default' => 'yes',
1949	'render_type' => 'template',
1950	'prefix_class' => 'ekit-fluent-form-widget-step-header-'
1951	]
1952	);
1953
1954	$this->add_control(
1955	'form_progressbar_label_color',
1956	[
1957	'label' => __( 'Label Color', 'elementskit-lite' ),
1958	'type' => Controls_Manager::COLOR,
1959	'selectors' => [
1960	'{{WRAPPER}} .ff-el-progress-status' => 'color: {{VALUE}}',
1961	],
1962	'condition' => [
1963	'show_label' => 'yes'
1964	]
1965	]
1966	);
1967
1968	$this->add_group_control(
1969	Group_Control_Typography::get_type(),
1970	[
1971	'name' => 'form_progressbar_label_typography',
1972	'label' => __( 'Typography', 'elementskit-lite' ),
1973	'selector' => '{{WRAPPER}} .ff-el-progress-status',
1974	'condition' => [
1975	'show_label' => 'yes'
1976	]
1977	]
1978	);
1979
1980	$this->add_control(
1981	'form_progressbar_label_space',
1982	[
1983	'label' => __( 'Spacing', 'elementskit-lite' ),
1984	'type' => Controls_Manager::DIMENSIONS,
1985	'size_units' => [ 'px', '%', 'em' ],
1986	'selectors' => [
1987	'{{WRAPPER}} .ff-el-progress-status' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1988	],
1989	'condition' => [
1990	'show_label' => 'yes'
1991	],
1992	'separator' => 'after'
1993	]
1994	);
1995
1996	$this->add_control(
1997	'form_pagination_progressbar',
1998	[
1999	'label' => __('Progressbar', 'elementskit-lite'),
2000	'type' => Controls_Manager::HEADING,
2001	]
2002	);
2003
2004	$this->add_control(
2005	'show_form_progressbar',
2006	[
2007	'label' => __( 'Show Progressbar', 'elementskit-lite' ),
2008	'type' => Controls_Manager::SWITCHER,
2009	'label_on' => __( 'Show', 'elementskit-lite' ),
2010	'label_off' => __( 'Hide', 'elementskit-lite' ),
2011	'return_value' => 'yes',
2012	'default' => 'yes',
2013	'prefix_class' => 'ekit-fluent-form-widget-step-progressbar-'
2014	]
2015	);
2016
2017	$this->start_controls_tabs('form_progressbar_style_tabs');
2018
2019	$this->start_controls_tab(
2020	'form_progressbar_normal',
2021	[
2022	'label' => __('Normal', 'elementskit-lite'),
2023	'condition' => [
2024	'show_form_progressbar' => 'yes'
2025	],
2026	]
2027	);
2028
2029	$this->add_group_control(
2030	Group_Control_Background::get_type(),
2031	[
2032	'name' => 'form_progressbar_bg',
2033	'label' => __( 'Background', 'elementskit-lite' ),
2034	'types' => [ 'classic', 'gradient' ],
2035	'selector' => '{{WRAPPER}} .ff-el-progress',
2036	'condition' => [
2037	'show_form_progressbar' => 'yes'
2038	],
2039	'exclude' => ['image'] // PHPCS:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude
2040	]
2041	);
2042
2043	$this->add_control(
2044	'form_progressbar_color',
2045	[
2046	'label' => __( 'Text Color', 'elementskit-lite' ),
2047	'type' => Controls_Manager::COLOR,
2048	'selectors' => [
2049	'{{WRAPPER}} .ff-el-progress-bar span' => 'color: {{VALUE}};',
2050	],
2051	'condition' => [
2052	'show_form_progressbar' => 'yes'
2053	]
2054	]
2055	);
2056
2057	$this->add_control(
2058	'form_progressbar_height',
2059	[
2060	'label' => __( 'Height', 'elementskit-lite' ),
2061	'type' => Controls_Manager::SLIDER,
2062	'size_units' => [ 'px' ],
2063	'range' => [
2064	'px' => [
2065	'min' => 0,
2066	'max' => 100,
2067	'step' => 1,
2068	]
2069	],
2070	'selectors' => [
2071	'{{WRAPPER}} .ff-el-progress' => 'height: {{SIZE}}{{UNIT}};',
2072	],
2073	'condition' => [
2074	'show_form_progressbar' => 'yes'
2075	]
2076	]
2077	);
2078
2079	$this->add_group_control(
2080	Group_Control_Border::get_type(),
2081	[
2082	'name' => 'form_progressbar_border',
2083	'label' => __( 'Border', 'elementskit-lite' ),
2084	'selector' => '{{WRAPPER}} .ff-el-progress',
2085	'condition' => [
2086	'show_form_progressbar' => 'yes'
2087	]
2088	]
2089	);
2090
2091	$this->add_control(
2092	'form_progressbar_border_radius',
2093	[
2094	'label' => __( 'Border Radius', 'elementskit-lite' ),
2095	'type' => Controls_Manager::DIMENSIONS,
2096	'size_units' => [ 'px', '%', 'em' ],
2097	'selectors' => [
2098	'{{WRAPPER}} .ff-el-progress' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2099	],
2100	'condition' => [
2101	'show_form_progressbar' => 'yes'
2102	]
2103	]
2104	);
2105
2106	$this->end_controls_tab();
2107
2108	$this->start_controls_tab(
2109	'form_progressbar_filled',
2110	[
2111	'label' => __('Filled', 'elementskit-lite'),
2112	'condition' => [
2113	'show_form_progressbar' => 'yes'
2114	],
2115	]
2116	);
2117
2118	$this->add_group_control(
2119	Group_Control_Background::get_type(),
2120	[
2121	'name' => 'form_progressbar_bg_filled',
2122	'label' => __( 'Background', 'elementskit-lite' ),
2123	'types' => [ 'classic', 'gradient' ],
2124	'selector' => '{{WRAPPER}} .ff-el-progress-bar',
2125	'condition' => [
2126	'show_form_progressbar' => 'yes'
2127	],
2128	'exclude' => ['image'] // PHPCS:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude
2129	]
2130	);
2131
2132
2133	$this->end_controls_tab();
2134
2135	$this->end_controls_tabs();
2136
2137
2138
2139	$this->add_control(
2140	'form_pagination_button_style',
2141	[
2142	'label' => __('Button', 'elementskit-lite'),
2143	'type' => Controls_Manager::HEADING,
2144	'separator' => 'before'
2145	]
2146	);
2147
2148	$this->start_controls_tabs(
2149	'form_pagination_button_style_tabs'
2150	);
2151
2152
2153	$this->start_controls_tab(
2154	'form_pagination_button',
2155	[
2156	'label' => __('Normal', 'elementskit-lite'),
2157	]
2158	);
2159
2160
2161	$this->add_control(
2162	'form_pagination_button_color',
2163	[
2164	'label' => __( 'Color', 'elementskit-lite' ),
2165	'type' => Controls_Manager::COLOR,
2166	'selectors' => [
2167	'{{WRAPPER}} .step-nav button' => 'color: {{VALUE}};',
2168	]
2169	]
2170	);
2171
2172	$this->add_group_control(
2173	Group_Control_Typography::get_type(),
2174	[
2175	'name' => 'form_pagination_button_typography',
2176	'label' => __( 'Typography', 'elementskit-lite' ),
2177	'selector' => '{{WRAPPER}} .step-nav button',
2178	]
2179	);
2180
2181	$this->add_group_control(
2182	Group_Control_Background::get_type(),
2183	[
2184	'name' => 'form_pagination_button_bg',
2185	'label' => __( 'Background', 'elementskit-lite' ),
2186	'types' => [ 'classic', 'gradient' ],
2187	'selector' => '{{WRAPPER}} .step-nav button',
2188	]
2189	);
2190
2191	$this->add_group_control(
2192	Group_Control_Border::get_type(),
2193	[
2194	'name' => 'form_pagination_button_border',
2195	'label' => __( 'Border', 'elementskit-lite' ),
2196	'selector' => '{{WRAPPER}} .step-nav button',
2197	]
2198	);
2199
2200	$this->add_control(
2201	'form_pagination_button_border_radius',
2202	[
2203	'label' => __( 'Border Radius', 'elementskit-lite' ),
2204	'type' => Controls_Manager::DIMENSIONS,
2205	'size_units' => [ 'px', '%', 'em' ],
2206	'selectors' => [
2207	'{{WRAPPER}} .step-nav button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2208	],
2209	]
2210	);
2211
2212	$this->add_control(
2213	'form_pagination_button_padding',
2214	[
2215	'label' => __( 'Padding', 'elementskit-lite' ),
2216	'type' => Controls_Manager::DIMENSIONS,
2217	'size_units' => [ 'px', '%', 'em' ],
2218	'selectors' => [
2219	'{{WRAPPER}} .step-nav button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2220	],
2221	]
2222	);
2223
2224	$this->end_controls_tab();
2225
2226	$this->start_controls_tab(
2227	'form_pagination_button_hover',
2228	[
2229	'label' => __('Hover', 'elementskit-lite'),
2230	]
2231	);
2232
2233	$this->add_control(
2234	'form_pagination_button_hover_color',
2235	[
2236	'label' => __( 'Color', 'elementskit-lite' ),
2237	'type' => Controls_Manager::COLOR,
2238	'selectors' => [
2239	'{{WRAPPER}} .step-nav button:hover' => 'color: {{VALUE}};',
2240	]
2241	]
2242	);
2243
2244	$this->add_group_control(
2245	Group_Control_Background::get_type(),
2246	[
2247	'name' => 'form_pagination_button_hover_bg',
2248	'label' => __( 'Background', 'elementskit-lite' ),
2249	'types' => [ 'classic', 'gradient' ],
2250	'selector' => '{{WRAPPER}} .step-nav button:hover',
2251	]
2252	);
2253
2254	$this->add_control(
2255	'form_pagination_button_border_hover_color',
2256	[
2257	'label' => __( 'Border Color', 'elementskit-lite' ),
2258	'type' => Controls_Manager::COLOR,
2259	'selectors' => [
2260	'{{WRAPPER}} .step-nav button:hover' => 'border-color: {{VALUE}};',
2261	]
2262	]
2263	);
2264
2265	$this->add_control(
2266	'form_pagination_button_border_hover_radius',
2267	[
2268	'label' => __( 'Border Radius', 'elementskit-lite' ),
2269	'type' => Controls_Manager::DIMENSIONS,
2270	'size_units' => [ 'px', '%', 'em' ],
2271	'selectors' => [
2272	'{{WRAPPER}} .step-nav button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2273	],
2274	]
2275	);
2276
2277	$this->end_controls_tab();
2278
2279	$this->end_controls_tabs();
2280
2281
2282	$this->end_controls_section();
2283	}
2284
2285	// Submit Button Styles
2286	$this->start_controls_section(
2287	'section_form_submit_button_style',
2288	[
2289	'label' => __('Submit Button', 'elementskit-lite'),
2290	'tab' => Controls_Manager::TAB_STYLE,
2291	]
2292	);
2293
2294	$this->add_responsive_control(
2295	'form_submit_button_align',
2296	[
2297	'label' => __('Alignment', 'elementskit-lite'),
2298	'type' => Controls_Manager::CHOOSE,
2299	'options' => [
2300	'left' => [
2301	'title' => __('Left', 'elementskit-lite'),
2302	'icon' => 'eicon-h-align-left',
2303	],
2304	'center' => [
2305	'title' => __('Center', 'elementskit-lite'),
2306	'icon' => 'eicon-h-align-center',
2307	],
2308	'right' => [
2309	'title' => __('Right', 'elementskit-lite'),
2310	'icon' => 'eicon-h-align-right',
2311	],
2312	],
2313	'default' => '',
2314	'prefix_class' => 'fluentform-widget-submit-button-',
2315	'condition' => [
2316	'form_submit_button_width_type' => 'custom',
2317	],
2318	]
2319	);
2320
2321	$this->add_control(
2322	'form_submit_button_width_type',
2323	[
2324	'label' => __('Width', 'elementskit-lite'),
2325	'type' => Controls_Manager::SELECT,
2326	'default' => 'custom',
2327	'options' => [
2328	'full-width' => __('Full Width', 'elementskit-lite'),
2329	'custom' => __('Custom', 'elementskit-lite'),
2330	],
2331	'prefix_class' => 'fluentform-widget-submit-button-',
2332	]
2333	);
2334
2335	$this->add_responsive_control(
2336	'form_submit_button_width',
2337	[
2338	'label' => __('Width', 'elementskit-lite'),
2339	'type' => Controls_Manager::SLIDER,
2340	'range' => [
2341	'px' => [
2342	'min' => 0,
2343	'max' => 1200,
2344	'step' => 1,
2345	],
2346	],
2347	'size_units' => ['px', '%'],
2348	'selectors' => [
2349	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit' => 'width: {{SIZE}}{{UNIT}}',
2350	],
2351	'condition' => [
2352	'form_submit_button_width_type' => 'custom',
2353	],
2354	]
2355	);
2356
2357	$this->start_controls_tabs('tabs_submit_button_style');
2358
2359	$this->start_controls_tab(
2360	'tab_submit_button_normal',
2361	[
2362	'label' => __('Normal', 'elementskit-lite'),
2363	]
2364	);
2365
2366	$this->add_control(
2367	'form_submit_button_bg_color_normal',
2368	[
2369	'label' => __('Background Color', 'elementskit-lite'),
2370	'type' => Controls_Manager::COLOR,
2371	'default' => '#409EFF',
2372	'selectors' => [
2373	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit' => 'background-color: {{VALUE}} !important;',
2374	],
2375	]
2376	);
2377
2378	$this->add_control(
2379	'form_submit_button_text_color_normal',
2380	[
2381	'label' => __('Text Color', 'elementskit-lite'),
2382	'type' => Controls_Manager::COLOR,
2383	'default' => '#ffffff',
2384	'selectors' => [
2385	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit' => 'color: {{VALUE}} !important;',
2386	],
2387	]
2388	);
2389
2390	$this->add_group_control(
2391	Group_Control_Border::get_type(),
2392	[
2393	'name' => 'form_submit_button_border_normal',
2394	'label' => __('Border', 'elementskit-lite'),
2395	'placeholder' => '1px',
2396	'default' => '1px',
2397	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit',
2398	]
2399	);
2400
2401	$this->add_control(
2402	'form_submit_button_border_radius',
2403	[
2404	'label' => __('Border Radius', 'elementskit-lite'),
2405	'type' => Controls_Manager::DIMENSIONS,
2406	'size_units' => ['px', 'em', '%'],
2407	'selectors' => [
2408	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2409	],
2410	]
2411	);
2412
2413	$this->add_responsive_control(
2414	'form_submit_button_padding',
2415	[
2416	'label' => __('Padding', 'elementskit-lite'),
2417	'type' => Controls_Manager::DIMENSIONS,
2418	'size_units' => ['px', 'em', '%'],
2419	'selectors' => [
2420	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2421	],
2422	]
2423	);
2424
2425	$this->add_responsive_control(
2426	'form_submit_button_margin',
2427	[
2428	'label' => __('Margin Top', 'elementskit-lite'),
2429	'type' => Controls_Manager::SLIDER,
2430	'range' => [
2431	'px' => [
2432	'min' => 0,
2433	'max' => 150,
2434	'step' => 1,
2435	],
2436	],
2437	'size_units' => ['px', 'em', '%'],
2438	'selectors' => [
2439	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit' => 'margin-top: {{SIZE}}{{UNIT}}',
2440	],
2441	]
2442	);
2443
2444	$this->add_group_control(
2445	Group_Control_Typography::get_type(),
2446	[
2447	'name' => 'form_submit_button_typography',
2448	'label' => __('Typography', 'elementskit-lite'),
2449	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit',
2450	'separator' => 'before',
2451	]
2452	);
2453
2454	$this->add_group_control(
2455	Group_Control_Box_Shadow::get_type(),
2456	[
2457	'name' => 'form_submit_button_box_shadow',
2458	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit',
2459	'separator' => 'before',
2460	]
2461	);
2462
2463	$this->end_controls_tab();
2464
2465	$this->start_controls_tab(
2466	'tab_submit_button_hover',
2467	[
2468	'label' => __('Hover', 'elementskit-lite'),
2469	]
2470	);
2471
2472	$this->add_control(
2473	'form_submit_button_bg_color_hover',
2474	[
2475	'label' => __('Background Color', 'elementskit-lite'),
2476	'type' => Controls_Manager::COLOR,
2477	'default' => '',
2478	'selectors' => [
2479	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover' => 'background-color: {{VALUE}} !important;',
2480	],
2481	]
2482	);
2483
2484	$this->add_control(
2485	'form_submit_button_text_color_hover',
2486	[
2487	'label' => __('Text Color', 'elementskit-lite'),
2488	'type' => Controls_Manager::COLOR,
2489	'default' => '',
2490	'selectors' => [
2491	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover' => 'color: {{VALUE}} !important;',
2492	],
2493	]
2494	);
2495
2496	$this->add_control(
2497	'form_submit_button_border_color_hover',
2498	[
2499	'label' => __('Border Color', 'elementskit-lite'),
2500	'type' => Controls_Manager::COLOR,
2501	'default' => '',
2502	'selectors' => [
2503	'{{WRAPPER}} .fluentform-widget-wrapper .ff-el-group .ff-btn-submit:hover' => 'border-color: {{VALUE}}',
2504	],
2505	]
2506	);
2507
2508	$this->end_controls_tab();
2509
2510	$this->end_controls_tabs();
2511
2512	$this->end_controls_section();
2513
2514	// Submit Button Styles
2515	$this->start_controls_section(
2516	'section_form_success_message_style',
2517	[
2518	'label' => __('Success Message', 'elementskit-lite'),
2519	'tab' => Controls_Manager::TAB_STYLE,
2520	]
2521	);
2522
2523	$this->add_control(
2524	'form_success_message_bg_color',
2525	[
2526	'label' => __('Background Color', 'elementskit-lite'),
2527	'type' => Controls_Manager::COLOR,
2528	'selectors' => [
2529	'{{WRAPPER}} .fluentform-widget-wrapper .ff-message-success' => 'background-color: {{VALUE}}',
2530	],
2531	]
2532	);
2533
2534	$this->add_control(
2535	'form_success_message_text_color',
2536	[
2537	'label' => __('Text Color', 'elementskit-lite'),
2538	'type' => Controls_Manager::COLOR,
2539	'selectors' => [
2540	'{{WRAPPER}} .fluentform-widget-wrapper .ff-message-success' => 'color: {{VALUE}}',
2541	],
2542	]
2543	);
2544
2545	$this->add_group_control(
2546	Group_Control_Border::get_type(),
2547	[
2548	'name' => 'form_success_message_border',
2549	'label' => __('Border', 'elementskit-lite'),
2550	'placeholder' => '1px',
2551	'default' => '1px',
2552	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-message-success',
2553	]
2554	);
2555
2556	$this->add_group_control(
2557	Group_Control_Typography::get_type(),
2558	[
2559	'name' => 'form_success_message_typography',
2560	'label' => __('Typography', 'elementskit-lite'),
2561	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .ff-message-success',
2562	]
2563	);
2564
2565	$this->end_controls_section();
2566
2567	// Error Message styles
2568	$this->start_controls_section(
2569	'section_form_error_style',
2570	[
2571	'label' => __('Error Message', 'elementskit-lite'),
2572	'tab' => Controls_Manager::TAB_STYLE,
2573	]
2574	);
2575
2576	$this->add_control(
2577	'form_error_message_text_color',
2578	[
2579	'label' => __('Color', 'elementskit-lite'),
2580	'type' => Controls_Manager::COLOR,
2581	'default' => '',
2582	'selectors' => [
2583	'{{WRAPPER}} .fluentform-widget-wrapper .error.text-danger' => 'color: {{VALUE}}',
2584	],
2585	]
2586	);
2587
2588	$this->add_group_control(
2589	Group_Control_Typography::get_type(),
2590	[
2591	'name' => 'form_error_message_typography',
2592	'label' => __('Typography', 'elementskit-lite'),
2593	'selector' => '{{WRAPPER}} .fluentform-widget-wrapper .error.text-danger',
2594	]
2595	);
2596
2597	$this->add_responsive_control(
2598	'form_error_message_padding',
2599	[
2600	'label' => __('Padding', 'elementskit-lite'),
2601	'type' => Controls_Manager::DIMENSIONS,
2602	'size_units' => ['px', 'em', '%'],
2603	'selectors' => [
2604	'{{WRAPPER}} .fluentform-widget-wrapper .error.text-danger' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2605	],
2606	]
2607	);
2608
2609	$this->add_responsive_control(
2610	'form_error_message_margin',
2611	[
2612	'label' => __('Margin', 'elementskit-lite'),
2613	'type' => Controls_Manager::DIMENSIONS,
2614	'size_units' => ['px', 'em', '%'],
2615	'selectors' => [
2616	'{{WRAPPER}} .fluentform-widget-wrapper .error.text-danger' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2617	],
2618	]
2619	);
2620
2621	$this->end_controls_section();
2622
2623
2624	$this->insert_pro_message();
2625	}
2626
2627	protected function render( ) {
2628	echo '<div class="ekit-wid-con">';
2629	$this->render_raw();
2630	echo '</div>';
2631	}
2632
2633	protected function render_raw( ) {
2634	$settings = $this->get_settings_for_display();
2635	extract($settings);
2636
2637	$form_list_id_sanitize = isset($form_list) ? intval($form_list) : 0;
2638
2639	$this->add_render_attribute(
2640	'ekit_fluent_forms_widget_wrapper',
2641	[
2642	'class' => [
2643	'fluentform-widget-wrapper',
2644	]
2645	]
2646	);
2647
2648
2649	if ( $placeholder_switch != 'yes' ) {
2650	$this->add_render_attribute( 'ekit_fluent_forms_widget_wrapper', 'class', 'hide-placeholder' );
2651	}
2652
2653	if( $labels_switch != 'yes' ) {
2654	$this->add_render_attribute( 'ekit_fluent_forms_widget_wrapper', 'class', 'hide-fluent-form-labels' );
2655	}
2656
2657	if( $error_messages != 'yes' ) {
2658	$this->add_render_attribute( 'ekit_fluent_forms_widget_wrapper', 'class', 'hide-error-message' );
2659	}
2660
2661	if ( $form_custom_radio_checkbox == 'yes' ) {
2662	$this->add_render_attribute( 'ekit_fluent_forms_widget_wrapper', 'class', 'fluentform-widget-custom-radio-checkbox' );
2663	}
2664
2665	if ( $form_container_alignment ) {
2666	$this->add_render_attribute( 'ekit_fluent_forms_widget_wrapper', 'class', 'fluentform-widget-align-'.$form_container_alignment.'' );
2667	}
2668
2669	if ( ! empty( $form_list_id_sanitize ) ) { ?>
2670
2671	<div <?php echo $this->get_render_attribute_string('ekit_fluent_forms_widget_wrapper'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Already escaped by elementor ?>>
2672
2673	<?php if ($custom_title_description == 'yes') { ?>
2674	<div class="ekit-fluentform-widget-heading">
2675	<?php if ($form_title_custom != '') { ?>
2676	<h3 class="ekit-fluentform-widget-title">
2677	<?php echo esc_attr($form_title_custom); ?>
2678	</h3>
2679	<?php } ?>
2680	<?php if ($form_description_custom != '') { ?>
2681	<p class="ekit-fluentform-widget-description">
2682	<?php echo wp_kses($form_description_custom, \ElementsKit_Lite\Utils::get_kses_array()); ?>
2683	</p>
2684	<?php } ?>
2685	</div>
2686	<?php } ?>
2687
2688	<?php echo do_shortcode('[fluentform id="' . $form_list_id_sanitize . '"]'); ?>
2689	</div>
2690
2691	<?php
2692	}
2693	}
2694	}
2695