fluentform / app / Modules / Widgets / OxyFluentFormWidget.php

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

1,009 lines 35.5 KB

Raw Download Zip

1	<?php
2
3	namespace FluentForm\App\Modules\Widgets;
4
5	use FluentForm\App\Helpers\Helper;
6
7	class OxyFluentFormWidget extends OxygenEl
8	{
9	public $css_added = false;
10
11	public function name()
12	{
13	return __('Fluent Form', 'fluentform');
14	}
15
16	public function slug()
17	{
18	return 'form_widget';
19	}
20
21	public function accordion_button_place()
22	{
23	return 'form';
24	}
25
26	public function icon()
27	{
28	return '';
29	}
30
31	public function controls()
32	{
33	$templates_control = $this->addOptionControl(
34	[
35	'type' => 'dropdown',
36	'name' => __('Select a Form', 'fluentform'),
37	'slug' => 'ff_form',
38	'value' => Helper::getForms(),
39	'default' => 'no',
40	'css' => false,
41	]
42	);
43	$templates_control->rebuildElementOnChange();
44
45	$this->formContainerStyleControls();
46	$this->formInputLabelsStyle();
47	$this->formInputsStyle();
48	$this->checkboxAndRadioStyle();
49	$this->gdprAndTermsConditionStyle();
50	$this->sectionBreakStyle();
51	$this->checkboxGridStyle();
52	$this->fileUploadStyle();
53	$this->progressBarStyle();
54	$this->submitBtnStyle();
55	$this->stepButtonStyle();
56	$this->successMessageStyle();
57	$this->errorMessageStyle();
58	}
59
60	public function formContainerStyleControls()
61	{
62	$section_container = $this->addControlSection(
63	'fluentform_container',
64	__('Form Container', 'fluentform'),
65	'assets/icon.png',
66	$this
67	);
68	$selector = '.fluentform';
69	$section_container->addStyleControls(
70	[
71	[
72	'name' => __('Background Color', 'fluentform'),
73	'selector' => $selector,
74	'property' => 'background-color',
75	],
76	[
77	'name' => __('Max Width', 'fluentform'),
78	'selector' => $selector,
79	'property' => 'width',
80	],
81	]
82	);
83
84	$section_container->addPreset(
85	'padding',
86	'fluentform_container_padding',
87	__('Padding', 'fluentform'),
88	$selector
89	)->whiteList();
90
91	$section_container->addPreset(
92	'margin',
93	'fluentform_container_margin',
94	__('Margin', 'fluentform'),
95	$selector
96	)->whiteList();
97
98	$section_container->addPreset(
99	'border',
100	'fluentform_container_border',
101	__('Border', 'fluentform'),
102	$selector
103	)->whiteList();
104
105	$section_container->addPreset(
106	'border-radius',
107	'fluentform_container_radius',
108	__('Border Radius', 'fluentform'),
109	$selector
110	)->whiteList();
111
112	$section_container->boxShadowSection(
113	__('Box Shadow', 'fluentform'),
114	$selector,
115	$this
116	);
117	}
118
119	public function formInputLabelsStyle()
120	{
121	$section_label = $this->addControlSection(
122	'fluentform_label',
123	__('Labels', 'fluentform'),
124	'assets/icon.png',
125	$this
126	);
127
128	$selector = '.fluentform .ff-el-input--label label';
129	$section_label->typographySection(__('Typography', 'fluentform'), $selector, $this);
130	$section_label->addStyleControls(
131	[
132	[
133	'name' => __('Text Color', 'fluentform'),
134	'selector' => $selector,
135	'property' => 'color',
136	],
137	]
138	);
139	$section_label->addStyleControl(
140	[
141	'name' => __('Asterisk Color', 'fluentform'),
142	'selector' => '.ff-el-input--label.ff-el-is-required.asterisk-right label:after ,.ff-el-input--label.ff-el-is-required.asterisk-left label:before',
143	'property' => 'color',
144	]
145	);
146	}
147
148	public function formInputsStyle()
149	{
150	$selector = '.ff-el-form-control';
151	$section_input = $this->addControlSection(
152	'fluentform_input',
153	__('Input & Textara', 'fluentform'),
154	'assets/icon.png',
155	$this
156	);
157
158	$section_input->addStyleControls(
159	[
160	[
161	'name' => __('Text Indent', 'fluentform'),
162	'selector' => $selector,
163	'property' => 'padding-left',
164	'control_type' => 'slider-measurebox',
165	'unit' => 'px',
166	],
167	[
168	'name' => __('Margin Bottom', 'fluentform'),
169	'selector' => '.ff-el-group',
170	'property' => 'margin-bottom',
171	],
172	[
173	'name' => __('Input Width', 'fluentform'),
174	'selector' => $selector,
175	'property' => 'width',
176	'control_type' => 'slider-measurebox',
177	'unit' => 'px',
178	],
179	[
180	'name' => __('Input Height', 'fluentform'),
181	'selector' => $selector,
182	'property' => 'height',
183	'control_type' => 'slider-measurebox',
184	'unit' => 'px',
185	],
186	[
187	'name' => __('Textarea Width', 'fluentform'),
188	'selector' => '.ff-el-group textarea',
189	'property' => 'width',
190	'control_type' => 'slider-measurebox',
191	'unit' => 'px',
192	],
193	[
194	'name' => __('Textarea Height', 'fluentform'),
195	'selector' => '.ff-el-group textarea',
196	'property' => 'height',
197	'control_type' => 'slider-measurebox',
198	'unit' => 'px',
199	],
200	]
201	);
202
203	$section_input_normal = $section_input->addControlSection(
204	'fluentform_input_normal_section',
205	__('Normal', 'fluentform'),
206	'assets/icon.png',
207	$this
208	);
209
210	$section_input_normal->addStyleControls(
211	[
212	[
213	'name' => __('Color', 'fluentform'),
214	'selector' => '.ff-el-form-control',
215	'property' => 'color',
216	],
217	[
218	'name' => __('Background Color', 'fluentform'),
219	'selector' => '.ff-el-form-control',
220	'property' => 'background-color',
221	],
222	[
223	'name' => __('Placeholder Color', 'fluentform'),
224	'slug' => 'fluentform_input_placeholder',
225	'selector' => '::placeholder',
226	'property' => 'color',
227	],
228	]
229	);
230
231	$section_input_hover = $section_input->addControlSection(
232	'fluentform_input_hover_section',
233	__('Hover', 'fluentform'),
234	'assets/icon.png',
235	$this
236	);
237
238	$section_input_hover->addStyleControls(
239	[
240	[
241	'name' => __('Background Color', 'fluentform'),
242	'selector' => '.ff-el-form-control:focus',
243	'property' => 'background-color',
244	],
245	[
246	'name' => __('Text Color', 'fluentform'),
247	'selector' => '.ff-el-form-control:focus',
248	'property' => 'color',
249	],
250	[
251	'name' => __('Border Color', 'fluentform'),
252	'selector' => '.ff-el-form-control:focus',
253	'property' => 'border-color',
254	'control_type' => 'colorpicker',
255	],
256	]
257	);
258
259	$section_input->addPreset(
260	'padding',
261	'fluentform_input_spacing',
262	__('Padding', 'fluentform'),
263	$selector
264	)->whiteList();
265
266	$section_input->boxShadowSection(
267	__('Box Shadow', 'fluentform'),
268	$selector,
269	$this
270	);
271
272	$section_input->typographySection(
273	__('Typography', 'fluentform'),
274	$selector,
275	$this
276	);
277
278	$section_input->addPreset(
279	'border',
280	'fluentform_input_border',
281	__('Border', 'fluentform'),
282	$selector
283	)->whiteList();
284
285	$section_input->addPreset(
286	'border-radius',
287	'fluentform_input_border_radius',
288	__('Border Radius', 'fluentform'),
289	$selector
290	)->whiteList();
291	}
292
293	public function checkboxGridStyle()
294	{
295	$section_checkbox_grid = $this->addControlSection(
296	'fluentform_checkbox_grid',
297	__('Checkable Grid Field', 'fluentform'),
298	'assets/icon.png',
299	$this
300	);
301
302	$section_checkbox_grid_spacing = $section_checkbox_grid->addControlSection(
303	'fluentform_checkbox_grid_sp',
304	__('Spacing', 'fluentform'),
305	'assets/icon.png',
306	$this
307	);
308	$section_checkbox_grid_width = $section_checkbox_grid_spacing->addStyleControl(
309	[
310	'selector' => '.fluentform .ff-checkable-grids',
311	'property' => 'width',
312	'control_type' => 'slider-measurebox',
313	]
314	);
315	$section_checkbox_grid_width->setRange('0', '100', '1');
316	$section_checkbox_grid_width->setUnits('%', 'px,%,em');
317	$section_checkbox_grid_width->setDefaultValue('100');
318
319	$section_checkbox_grid_spacing->addPreset(
320	'padding',
321	'fluentform_checkbox_grid_padding',
322	__('Table Head Cell Padding', 'fluentform'),
323	'.fluentform .ff-checkable-grids thead>tr>th'
324	)->whiteList();
325
326	$section_checkbox_grid_spacing->addPreset(
327	'padding',
328	'fluentform_checkbox_grid_padding_tb',
329	__('Table Body Cell Padding', 'fluentform'),
330	'.fluentform .ff-checkable-grids tbody>tr>td'
331	)->whiteList();
332
333	$section_checkbox_grid_color = $section_checkbox_grid->addControlSection(
334	'fluentform_checkbox_grid_color',
335	__('Color', 'fluentform'),
336	'assets/icon.png',
337	$this
338	);
339	$section_checkbox_grid_color->addStyleControls([
340	[
341	'name' => __('Table Outer Border Width', 'fluentform'),
342	'selector' => '.fluentform .ff-checkable-grids',
343	'property' => 'border-width',
344	],
345	[
346	'name' => __('Table Outer Border Color', 'fluentform'),
347	'selector' => '.fluentform .ff-checkable-grids',
348	'property' => 'border-color',
349	],
350	[
351	'name' => __('Table Head Background', 'fluentform'),
352	'selector' => '.fluentform .ff-checkable-grids thead>tr>th',
353	'property' => 'background-color',
354	],
355	[
356	'name' => __('Table Body Background', 'fluentform'),
357	'selector' => '.fluentform .ff-checkable-grids tbody>tr>td',
358	'property' => 'background-color',
359	],
360	[
361	'name' => __('Table Body Alt Background', 'fluentform'),
362	'selector' => '.fluentform .ff-checkable-grids tbody>tr:nth-child(2n)>td',
363	'property' => 'background-color',
364	],
365	[
366	'name' => __('Table Body Alt Text Color', 'fluentform'),
367	'selector' => '.fluentform .ff-checkable-grids tbody>tr:nth-child(2n)>td',
368	'property' => 'color',
369	],
370	]);
371
372	$section_checkbox_grid->typographySection(
373	__('Heading Typography', 'fluentform'),
374	'.fluentform .ff-checkable-grids thead>tr>th',
375	$this
376	);
377	$section_checkbox_grid->typographySection(
378	__('Cell Typography', 'fluentform'),
379	'.fluentform .ff-checkable-grids tbody>tr>td',
380	$this
381	);
382	}
383
384	public function gdprAndTermsConditionStyle()
385	{
386	$section_gdpr_terms = $this->addControlSection(
387	'fluentform_gdpr_terms_section',
388	__('GDPR, Terms & Condition', 'fluentform'),
389	'assets/icon.png',
390	$this
391	);
392
393	$section_gdpr_terms->typographySection(__('Typography', 'fluentform'), '.ff-el-tc , .ff_t_c', $this);
394	$section_gdpr_terms->addStyleControls(
395	[
396	[
397	'name' => __('Text Color', 'fluentform'),
398	'selector' => '.ff-el-tc , .ff_t_c',
399	'property' => 'color',
400	],
401	[
402	'name' => __('Link Color', 'fluentform'),
403	'selector' => '.ff-el-tc a, .ff_t_c a',
404	'property' => 'color',
405	],
406	]
407	);
408	}
409
410	public function sectionBreakStyle()
411	{
412	$section_section_break = $this->addControlSection(
413	'fluentform_section_break_section',
414	__('Section Break', 'fluentform'),
415	'assets/icon.png',
416	$this
417	);
418
419	$selector = '.ff-el-section-break';
420	$section_section_break->typographySection(__('Typography', 'fluentform'), $selector, $this);
421	$section_section_break->addStyleControls(
422	[
423	[
424	'name' => __('Text Color', 'fluentform'),
425	'selector' => $selector,
426	'property' => 'color',
427	],
428	[
429	'selector' => $selector,
430	'slug' => 'ff_section_break_section_bg_color',
431	'property' => 'background-color',
432	],
433	]
434	);
435	$section_section_break->addPreset(
436	'padding',
437	'ff_section_break_section_padding',
438	__('Padding', 'fluentform'),
439	$selector
440	)->whiteList();
441
442	$section_section_break->addPreset(
443	'margin',
444	'ff_section_break_section_margin',
445	__('Margin', 'fluentform'),
446	$selector
447	)->whiteList();
448
449	$section_section_break->addStyleControl(
450	[
451	'selector' => $selector . ' hr',
452	'slug' => 'ffsb_line',
453	'property' => 'border-color',
454	]
455	)->setParam('hide_wrapper_end', true);
456
457	$section_section_break->addStyleControl(
458	[
459	'selector' => $selector . ' hr',
460	'slug' => 'ffsb_linew',
461	'property' => 'border-width',
462	]
463	)->setParam('hide_wrapper_start', true);
464	}
465
466	public function render($options, $defaults, $content)
467	{
468	if ('no' == $options['ff_form']) {
469	echo '<h5 class="ff-template-missing">' . esc_html__('Select a Form', 'fluentform') . '</h5>';
470	return;
471	}
472
473	if (function_exists('do_oxygen_elements')) {
474	echo do_oxygen_elements('[fluentform id="' . (int) $options['ff_form'] . '"]'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
475	} else {
476	if (Helper::isConversionForm($options['ff_form'])) {
477	esc_html_e('This is a Conversational Form. You must use the default Design tab for this type of forms.', 'fluentform');
478	return;
479	}
480	echo do_shortcode('[fluentform id="' . (int) $options['ff_form'] . '"]'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
481	}
482	}
483
484	public function init()
485	{
486	$this->El->useAJAXControls();
487
488	$app = wpFluentForm();
489
490	if ($app->request->get('ct_builder')) {
491	wp_enqueue_style(
492	'fluent-form-styles',
493	fluentFormMix('css/fluent-forms-public.css'),
494	[],
495	FLUENTFORM_VERSION
496	);
497
498	wp_enqueue_style(
499	'fluentform-public-default',
500	fluentFormMix('css/fluentform-public-default.css'),
501	[],
502	FLUENTFORM_VERSION
503	);
504
505	if (!wp_script_is('flatpickr', 'registered')) {
506	wp_enqueue_style(
507	'flatpickr',
508	fluentFormMix('libs/flatpickr/flatpickr.min.css'),
509	[],
510	FLUENTFORM_VERSION
511	);
512	}
513
514	wp_enqueue_style(
515	'ff_choices',
516	fluentFormMix('css/choices.css'),
517	[],
518	FLUENTFORM_VERSION
519	);
520	}
521	}
522
523	public function enablePresets()
524	{
525	return true;
526	}
527
528	public function enableFullPresets()
529	{
530	return true;
531	}
532
533	public function customCSS($options, $selector)
534	{
535	$css = $defaultCSS = '';
536
537	$prefix = 'oxy-' . $this->slug();
538
539	if (isset($options[$prefix . '_ff_inp_placeholder'])) {
540	$css .= '.fluent_form_' . $options['fluentform'] . ' .ff-el-form-control::-webkit-input-placeholder,.fluent_form_' . $options['fluentform'] . ' .ff-el-form-control::-moz-input-placeholder,.fluent_form_' . $options['fluentform'] . ' .ff-el-form-control:-ms-input-placeholder,.fluent_form_' . $options['fluentform'] . ' .ff-el-form-control::placeholder{color:' . $options['ff_inp_placeholder'] . ';}';
541	}
542
543	if (isset($options[$prefix . '_rc_smart_ui']) && 'yes' == $options[$prefix . '_rc_smart_ui']) {
544	$css .= $selector . ' .ff-el-group input[type=checkbox]:after, ' . $selector . ' .ff-el-group input[type=radio]:after {content: " "!important;display: inline-block!important;border-style: solid}';
545	$css .= $selector . ' .ff-el-group input[type=checkbox], ' . $selector . ' .ff-el-group input[type=radio]{width: 1px;}';
546	} else {
547	$css .= $selector . ' .ff-el-group input[type=checkbox]:after, ' . $selector . ' .ff-el-group input[type=radio]:after {content: none;}';
548	}
549
550	return $defaultCSS . $css;
551	}
552
553	public function checkboxAndRadioStyle()
554	{
555	$input_section_radio_checkbox = $this->addControlSection(
556	'fluentform_checkbox_radio_style',
557	__('Checkbox & Radio', 'fluentform'),
558	'assets/icon.png',
559	$this
560	);
561	$selector_after = '.ff-el-group input[type=checkbox]:after,.ff-el-group input[type=radio]:after';
562	$selector = '.ff-el-group input[type=checkbox],.ff-el-group input[type=radio]';
563
564	$text = $input_section_radio_checkbox->addControlSection(
565	'fluentform_radio_checkbox_text',
566	__('Text Style', 'fluentform'),
567	'assets/icon.png',
568	$this
569	);
570
571	$text->addStyleControls(
572	[
573	[
574	'selector' => '.ff-el-form-check-label, .ff_t_c',
575	'property' => 'color',
576	'name' => __('Text Color', 'fluentform'),
577	],
578	[
579	'selector' => '.ff_t_c a',
580	'property' => 'color',
581	'name' => __('Link Color', 'fluentform'),
582	],
583	[
584	'selector' => '.ff_t_c a:hover',
585	'property' => 'color',
586	'name' => __('Link Hover Color', 'fluentform'),
587	],
588	[
589	'selector' => '.ff-el-form-check-label, .ff_t_c',
590	'property' => 'font-size',
591	'control_type' => 'slider-measurebox',
592	'name' => __('Text Font Size', 'fluentform'),
593	'unit' => 'px',
594	],
595	]
596	);
597
598	$smart_ui = $input_section_radio_checkbox->addControlSection(
599	'fluentform_radio_checkbox_smart_ui',
600	__('Checkbox/Radio Smart UI', 'fluentform'),
601	'assets/icon.png',
602	$this
603	);
604	$smart_ui->addOptionControl(
605	[
606	'type' => 'radio',
607	'name' => __('Enable Smart UI', 'fluentform'),
608	'slug' => 'rc_smart_ui',
609	'value' => ['yes' => __('Yes', 'fluentform'), 'no' => __('No', 'fluentform')],
610	'default' => 'no',
611	'css' => false,
612	]
613	)->rebuildElementOnChange();
614
615	$smart_ui->addStyleControl(
616	[
617	'selector' => $selector_after,
618	'name' => __('Width', 'fluentform'),
619	'property' => 'width\|height',
620	'control_type' => 'slider-measurebox',
621	'unit' => 'px',
622	'condition' => 'rc_smart_ui=yes',
623	]
624	);
625	$smart_ui->addStyleControl(
626	[
627	'selector' => $selector,
628	'name' => __('Text Indent', 'fluentform'),
629	'property' => 'margin-right',
630	'control_type' => 'slider-measurebox',
631	'unit' => 'px',
632	'condition' => 'rc_smart_ui=yes',
633	]
634	);
635	$smart_ui->addStyleControls(
636	[
637	[
638	'selector' => $selector_after,
639	'property' => 'background-color',
640	'slug' => 'cr_bg_color',
641	'condition' => 'rc_smart_ui=yes',
642	],
643	[
644	'selector' => $selector_after,
645	'property' => 'border-color',
646	'slug' => 'cr_brd_color',
647	'condition' => 'rc_smart_ui=yes',
648	'value' => '#333',
649	],
650	[
651	'selector' => $selector_after . ', .ff-el-group input[type=checkbox]:checked:after, .ff-el-group input[type=radio]:checked:after',
652	'property' => 'border-width',
653	'condition' => 'rc_smart_ui=yes',
654	],
655	[
656	'name' => __('Border Radius for Checkbox', 'fluentform'),
657	'selector' => '.ff-el-group input[type=checkbox]:after, .ff-el-group input[type=checkbox]:checked:after',
658	'property' => 'border-radius',
659	'condition' => 'rc_smart_ui=yes',
660	],
661	]
662	);
663
664	$smart_ui->addStyleControls(
665	[
666	[
667	'name' => __('Background Color - Selected State', 'fluentform'),
668	'selector' => '.ff-el-group input[type=checkbox]:checked:after, .ff-el-group input[type=radio]:checked:after',
669	'property' => 'background-color',
670	'control_type' => 'colorpicker',
671	'condition' => 'rc_smart_ui=yes',
672	],
673	[
674	'name' => __('Border Size - Selected State', 'fluentform'),
675	'selector' => '.ff-el-group input[type=checkbox]:checked:after, .ff-el-group input[type=radio]:checked:after',
676	'property' => 'border-width',
677	'control_type' => 'slider-measurebox',
678	'unit' => 'px',
679	'condition' => 'rc_smart_ui=yes',
680	],
681	[
682	'name' => __('Border Color - Selected State', 'fluentform'),
683	'selector' => '.ff-el-group input[type=checkbox]:checked:after, .ff-el-group input[type=radio]:checked:after',
684	'property' => 'border-color',
685	'slug' => 'crc_bg_color',
686	'control_type' => 'colorpicker',
687	'condition' => 'rc_smart_ui=yes',
688	],
689	]
690	);
691
692	$input_section_radio_checkbox_space = $input_section_radio_checkbox->addControlSection(
693	'fluentform_radio_checkbox_sp',
694	__('Spacing', 'fluentform'),
695	'assets/icon.png',
696	$this
697	);
698
699	$input_section_radio_checkbox_space->addPreset(
700	'margin',
701	'fluentform_radio_checkbox_margin',
702	__('Checkbox/Radio Margin', 'fluentform'),
703	'.fluentform input[type=checkbox], .ff-el-group input[type=radio]'
704	)->whiteList();
705
706	$input_section_radio_checkbox_space->addPreset(
707	'padding',
708	'fluentform_radio_checkbox_padding',
709	__('Label Spacing', 'fluentform'),
710	'.ff-el-form-check-label, .ff_t_c'
711	)->whiteList();
712	}
713
714	public function fileUploadStyle()
715	{
716	$section_file_upload = $this->addControlSection(
717	'fluentform_file_upload',
718	__('File Upload Field', 'fluentform'),
719	'assets/icon.png',
720	$this
721	);
722	$selector = '.ff_upload_btn';
723
724	$section_file_upload->typographySection(__('Button Typography', 'fluentform'), $selector, $this);
725	$section_file_upload->borderSection(__('Button Border', 'fluentform'), $selector, $this);
726	$section_file_upload->boxShadowSection(__('Button Box Shadow', 'fluentform'), $selector, $this);
727	$section_file_upload->boxShadowSection(__('Button Hover Box Shadow', 'fluentform'), $selector . ':hover', $this);
728	$section_file_upload->borderSection(__('Button Hover Border', 'fluentform'), $selector . ':hover', $this);
729
730	$button = $section_file_upload->addControlSection(
731	'fluentform_file_upload_bttn',
732	__('Button Style', 'fluentform'),
733	'assets/icon.png',
734	$this
735	);
736	$button->addPreset(
737	'padding',
738	'fluentform_file_upload_bttn_padding',
739	__('Padding', 'fluentform'),
740	$selector
741	)->whiteList();
742
743	$button->addStyleControls(
744	[
745	[
746	'name' => __('Text Hover Color', 'fluentform'),
747	'selector' => $selector . ':hover',
748	'property' => 'color',
749	],
750	[
751	'selector' => $selector,
752	'property' => 'background-color',
753	],
754	[
755	'name' => __('Background Hover Color', 'fluentform'),
756	'selector' => $selector . ':Hover',
757	'property' => 'background-color',
758	'control_type' => 'colorpicker',
759	],
760	[
761	'name' => __('Width', 'fluentform'),
762	'selector' => $selector,
763	'property' => 'width',
764	],
765	]
766	);
767	}
768
769	public function progressBarStyle()
770	{
771	$section_progressbar = $this->addControlSection(
772	'fluentform_progress_bar',
773	__('Progress Bar', 'fluentform'),
774	'assets/icon.png',
775	$this
776	);
777
778	$section_progressbar->typographySection(__('Typography', 'fluentform'), '.ff-el-progress-status', $this);
779	$section_progressbar->addStyleControls(
780	[
781	[
782	'name' => __('Text Color', 'fluentform'),
783	'selector' => '.ff-el-progress-status',
784	'property' => 'color',
785	],
786	]
787	);
788	$section_progressbar->addStyleControls(
789	[
790	[
791	'name' => __('Bar Color', 'fluentform'),
792	'selector' => '.ff-el-progress-bar',
793	'property' => 'background-color',
794	],
795	]
796	);
797	$section_progressbar->addPreset(
798	'padding',
799	'fluentform_progress_bar_padding',
800	__('Label Spacing', 'fluentform'),
801	'.ff-el-progress-status'
802	)->whiteList();
803	}
804
805	public function submitBtnStyle()
806	{
807	$section_submit_btn = $this->addControlSection(
808	'fluentform_submit_bttn',
809	__('Submit Button', 'fluentform'),
810	'assets/icon.png',
811	$this
812	);
813
814	$selector_submit_bttn = '.ff-btn-submit';
815	$section_submit_btn->addStyleControls(
816	[
817	[
818	'name' => __('Color', 'fluentform'),
819	'selector' => $selector_submit_bttn,
820	'property' => 'color',
821	],
822	[
823	'name' => __('Background Color', 'fluentform'),
824	'selector' => $selector_submit_bttn,
825	'property' => 'background-color',
826	],
827	[
828	'name' => __('Hover Color', 'fluentform'),
829	'selector' => '.ff-btn-submit:hover',
830	'property' => 'background-color',
831	],
832	[
833	'name' => __('Width', 'fluentform'),
834	'selector' => $selector_submit_bttn,
835	'property' => 'width',
836	'control_type' => 'slider-measurebox',
837	'unit' => 'px',
838	],
839	[
840	'name' => __('Margin Top', 'fluentform'),
841	'selector' => $selector_submit_bttn,
842	'property' => 'margin-top',
843	'control_type' => 'slider-measurebox',
844	'unit' => 'px',
845	],
846	]
847	);
848
849	$section_submit_btn->addPreset(
850	'padding',
851	'fluentform_submit_bttn_padding',
852	__('Padding', 'fluentform'),
853	$selector_submit_bttn
854	)->whiteList();
855
856	$section_submit_btn->addPreset(
857	'margin',
858	'fluentform_submit_bttn_margin',
859	__('Margin', 'fluentform'),
860	$selector_submit_bttn
861	)->whiteList();
862
863	$section_submit_btn->typographySection(__('Typography', 'fluentform'), $selector_submit_bttn, $this);
864	$section_submit_btn->borderSection(__('Border', 'fluentform'), $selector_submit_bttn, $this);
865	$section_submit_btn->borderSection(__('Hover Border', 'fluentform'), $selector_submit_bttn . ':hover', $this);
866	$section_submit_btn->boxShadowSection(__('Box Shadow', 'fluentform'), $selector_submit_bttn, $this);
867	$section_submit_btn->boxShadowSection(__('Hover Box Shadow', 'fluentform'), $selector_submit_bttn . ':hover', $this);
868	}
869
870	public function stepButtonStyle()
871	{
872	$section_step_button = $this->addControlSection(
873	'section_step_button',
874	__('Step Button', 'fluentform'),
875	'assets/icon.png',
876	$this
877	);
878
879	$section_step_button->addPreset(
880	'padding',
881	'section_step_button_padding',
882	__('Padding', 'fluentform'),
883	'.step-nav button'
884	)->whiteList();
885
886	$section_step_button->addStyleControl(
887	[
888	'name' => __('Width', 'fluentform'),
889	'selector' => '.step-nav .ff-btn',
890	'property' => 'width',
891	]
892	);
893	$section_step_button_color = $section_step_button->addControlSection(
894	'ffsfnb_clr',
895	__('Color', 'fluentform'),
896	'assets/icon.png',
897	$this
898	);
899	$section_step_button_color->addStyleControls(
900	[
901	[
902	'name' => __('Text Color', 'fluentform'),
903	'selector' => '.step-nav .ff-btn',
904	'property' => 'color',
905	],
906	[
907	'name' => __('Text Hover Color', 'fluentform'),
908	'selector' => '.step-nav .ff-btn:hover',
909	'property' => 'color',
910	],
911	[
912	'name' => __('Background Color', 'fluentform'),
913	'selector' => '.step-nav .ff-btn',
914	'property' => 'background-color',
915	'control_type' => 'colorpicker',
916	],
917	[
918	'name' => __('Background Hover Color', 'fluentform'),
919	'selector' => '.step-nav .ff-btn:hover',
920	'property' => 'background-color',
921	'control_type' => 'colorpicker',
922	],
923	]
924	);
925
926	$section_step_button->typographySection(__('Typography', 'fluentform'), '.step-nav .ff-btn', $this);
927	$section_step_button->borderSection(__('Border', 'fluentform'), '.step-nav .ff-btn', $this);
928	$section_step_button->borderSection(__('Hover Border', 'fluentform'), '.step-nav .ff-btn:hover', $this);
929	$section_step_button->boxShadowSection(__('Box Shadow', 'fluentform'), '.step-nav .ff-btn', $this);
930	$section_step_button->boxShadowSection(__('Hover Box Shadow', 'fluentform'), '.step-nav .ff-btn:hover', $this);
931	}
932
933	public function successMessageStyle()
934	{
935	$section_success_message = $this->addControlSection(
936	'fluentform_success_message',
937	__('Success Message', 'fluentform'),
938	'assets/icon.png',
939	$this
940	);
941
942	$section_success_message->addStyleControl(
943	[
944	'selector' => '.ff-message-success',
945	'value' => 100,
946	'property' => 'width',
947	]
948	)->setUnits('%', 'px,%');
949
950	$section_success_message->addStyleControl(
951	[
952	'selector' => '.ff-message-success',
953	'property' => 'background-color',
954	]
955	);
956
957	$section_success_message->typographySection(
958	__('Typography', 'fluentform'),
959	'.ff-message-success, .ff-message-success p',
960	$this
961	);
962	$section_success_message->borderSection(__('Border', 'fluentform'), '.ff-message-success', $this);
963	$section_success_message->boxShadowSection(__('Box Shadow', 'fluentform'), '.ff-message-success', $this);
964
965	$section_success_message->addPreset(
966	'padding',
967	'fluentform_success_message_padding',
968	__('Padding', 'fluentform'),
969	'.ff-message-success'
970	)->whiteList();
971	}
972
973	public function errorMessageStyle()
974	{
975	$section_error_message = $this->addControlSection(
976	'fluentform_error_message',
977	__('Validation Error', 'fluentform'),
978	'assets/icon.png',
979	$this
980	);
981	$section_error_message->addStyleControls(
982	[
983	[
984	'name' => __('Text Color', 'fluentform'),
985	'selector' => '.ff-el-is-error .text-danger',
986	'property' => 'color',
987	'value' => '#f56c6c',
988	],
989	[
990	'selector' => '.ff-el-is-error .text-danger',
991	'property' => 'font-size',
992	'value' => 14,
993	],
994	[
995	'selector' => '.ff-el-is-error .text-danger',
996	'property' => 'font-weight',
997	],
998	[
999	'selector' => '.ff-el-is-error .text-danger',
1000	'property' => 'margin-top',
1001	'value' => 4,
1002	],
1003	]
1004	);
1005	}
1006	}
1007
1008	new OxyFluentFormWidget();
1009