fluentform / app / Modules / Widgets / FluentFormWidget.php

FluentFormWidget.php in Fluent Forms – Customizable Contact Forms, Survey, Quiz, & Conversational Form Builder 3.6.40, at app/Modules/Widgets/FluentFormWidget.php

2,417 lines 86.4 KB

Raw Download Zip

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