fluentform / app / Modules / Widgets / FluentFormWidget.php

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

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