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

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

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

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

ninja-forms.php

935 lines

1	<?php
2	namespace Elementor;
3
4	use \Elementor\ElementsKit_Widget_Ninja_Forms_Handler as Handler;
5	use \ElementsKit_Lite\Modules\Controls\Controls_Manager as ElementsKit_Controls_Manager;
6
7	if (! defined( 'ABSPATH' ) ) exit;
8
9	class ElementsKit_Widget_Ninja_Forms extends Widget_Base {
10	use \ElementsKit_Lite\Widgets\Widget_Notice;
11
12	public $base;
13
14	public function get_name() {
15	return Handler::get_name();
16	}
17
18	public function get_title() {
19	return Handler::get_title();
20	}
21
22	public function get_icon() {
23	return Handler::get_icon();
24	}
25
26	public function get_categories() {
27	return Handler::get_categories();
28	}
29
30	public function get_keywords() {
31	return Handler::get_keywords();
32	}
33
34	public function get_help_url() {
35	return 'https://wpmet.com/doc/ninja-forms/';
36	}
37	protected function is_dynamic_content(): bool {
38	return true;
39	}
40
41	public function is_reload_preview_required() {
42	return true;
43	}
44
45	public function get_script_depends() {
46	return [ 'nf-front-end' ];
47	}
48
49	protected function register_controls() {
50	$this->start_controls_section(
51	'ekit_ninja_section_tab', [
52	'label' =>esc_html__( 'Ninja Form', 'elementskit-lite' ),
53	]
54	);
55
56	$this->add_control(
57	'ekit_ninja_form_id',
58	[
59	'label' => __( 'Select Your Form', 'elementskit-lite' ),
60	'type' => Controls_Manager::SELECT,
61	'label_block' => true,
62	'default' => '0',
63	'options' => \ElementsKit_Lite\Utils::ekit_get_ninja_form(),
64	]
65	);
66
67	$this->end_controls_section();
68
69
70	/-----------------------------------------------------------------------------------/
71	/* STYLE TAB START
72	/-----------------------------------------------------------------------------------/
73
74	/* Form Title & Description */
75	$this->start_controls_section(
76	'ekit_ninja_section_form_title_style',
77	[
78	'label' => __( 'Title & Description', 'elementskit-lite' ),
79	'tab' => Controls_Manager::TAB_STYLE,
80	]
81	);
82
83	$this->add_responsive_control(
84	'ekit_ninja_heading_alignment',
85	[
86	'label' => __( 'Alignment', 'elementskit-lite' ),
87	'type' => Controls_Manager::CHOOSE,
88	'options' => [
89	'left' => [
90	'title' => __( 'Left', 'elementskit-lite' ),
91	'icon' => 'eicon-text-align-left',
92	],
93	'center' => [
94	'title' => __( 'Center', 'elementskit-lite' ),
95	'icon' => 'eicon-text-align-center',
96	],
97	'right' => [
98	'title' => __( 'Right', 'elementskit-lite' ),
99	'icon' => 'eicon-text-align-right',
100	],
101	],
102	'default' => '',
103	'selectors' => [
104	'{{WRAPPER}} .ekit_ninjaForms_container .nf-form-title h3, {{WRAPPER}} .ekit_ninjaForms_container-heading' => 'text-align: {{VALUE}};',
105	],
106	]
107	);
108
109	$this->add_control(
110	'ekit_ninja_title_heading',
111	[
112	'label' => __( 'Title', 'elementskit-lite' ),
113	'type' => Controls_Manager::HEADING,
114	'separator' => 'before',
115	]
116	);
117
118	$this->add_control(
119	'ekit_ninja_form_title_text_color',
120	[
121	'label' => __( 'Text Color', 'elementskit-lite' ),
122	'type' => Controls_Manager::COLOR,
123	'default' => '',
124	'selectors' => [
125	'{{WRAPPER}} .ekit_ninjaForms_container .nf-form-title h3' => 'color: {{VALUE}}',
126	],
127	]
128	);
129
130	$this->add_group_control(
131	Group_Control_Typography::get_type(),
132	[
133	'name' => 'ekit_ninja_form_title_typography',
134	'label' => __( 'Typography', 'elementskit-lite' ),
135	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-form-title h3',
136	]
137	);
138
139	$this->add_responsive_control(
140	'ekit_ninja_form_title_margin',
141	[
142	'label' => __( 'Margin', 'elementskit-lite' ),
143	'type' => Controls_Manager::DIMENSIONS,
144	'size_units' => [ 'px', 'em', '%' ],
145	'allowed_dimensions' => 'vertical',
146	'placeholder' => [
147	'top' => '',
148	'right' => 'auto',
149	'bottom' => '',
150	'left' => 'auto',
151	],
152	'selectors' => [
153	'{{WRAPPER}} .ekit_ninjaForms_container .nf-form-title h3' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
154	],
155	]
156	);
157
158	$this->end_controls_section();
159
160	/* Style Tab: Labels */
161	$this->start_controls_section(
162	'ekit_ninja_section_label_style',
163	[
164	'label' => __( 'Labels', 'elementskit-lite' ),
165	'tab' => Controls_Manager::TAB_STYLE,
166	]
167	);
168
169	$this->add_control(
170	'ekit_ninja_text_color_label',
171	[
172	'label' => __( 'Text Color', 'elementskit-lite' ),
173	'type' => Controls_Manager::COLOR,
174	'selectors' => [
175	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field-label label' => 'color: {{VALUE}}',
176	],
177	]
178	);
179
180	$this->add_group_control(
181	Group_Control_Typography::get_type(),
182	[
183	'name' => 'ekit_ninja_typography_label',
184	'label' => __( 'Typography', 'elementskit-lite' ),
185	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field-label label',
186	]
187	);
188
189	$this->end_controls_section();
190
191	/* Required Fields Notice */
192	$this->start_controls_section(
193	'ekit_ninja_section_required_notice_style',
194	[
195	'label' => __( 'Required Fields Notice', 'elementskit-lite' ),
196	'tab' => Controls_Manager::TAB_STYLE,
197	]
198	);
199
200	$this->add_control(
201	'ekit_ninja_required_notice_text_color',
202	[
203	'label' => __( 'Color', 'elementskit-lite' ),
204	'type' => Controls_Manager::COLOR,
205	'default' => '',
206	'selectors' => [
207	'{{WRAPPER}} .ekit_ninjaForms_container .nf-form-fields-required' => 'color: {{VALUE}}',
208	],
209	]
210	);
211
212	$this->add_responsive_control(
213	'ekit_ninja_required_notice_spacing',
214	[
215	'label' => __( 'Spacing', 'elementskit-lite' ),
216	'type' => Controls_Manager::SLIDER,
217	'range' => [
218	'px' => [
219	'min' => 0,
220	'max' => 100,
221	'step' => 1,
222	],
223	],
224	'size_units' => [ 'px', 'em', '%' ],
225	'selectors' => [
226	'{{WRAPPER}} .ekit_ninjaForms_container .nf-form-fields-required' => 'margin-bottom: {{SIZE}}{{UNIT}}',
227	],
228	]
229	);
230
231	$this->add_group_control(
232	Group_Control_Typography::get_type(),
233	[
234	'name' => 'ekit_ninja_required_notice_typography',
235	'label' => __( 'Typography', 'elementskit-lite' ),
236	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-form-fields-required',
237	]
238	);
239
240	$this->end_controls_section();
241
242	/* Input & Textarea */
243	$this->start_controls_section(
244	'ekit_ninja_section_fields_style',
245	[
246	'label' => __( 'Input & Textarea', 'elementskit-lite' ),
247	'tab' => Controls_Manager::TAB_STYLE,
248	]
249	);
250
251	$this->add_responsive_control(
252	'ekit_ninja_input_alignment',
253	[
254	'label' => __( 'Alignment', 'elementskit-lite' ),
255	'type' => Controls_Manager::CHOOSE,
256	'options' => [
257	'left' => [
258	'title' => __( 'Left', 'elementskit-lite' ),
259	'icon' => 'eicon-text-align-left',
260	],
261	'center' => [
262	'title' => __( 'Center', 'elementskit-lite' ),
263	'icon' => 'eicon-text-align-center',
264	],
265	'right' => [
266	'title' => __( 'Right', 'elementskit-lite' ),
267	'icon' => 'eicon-text-align-right',
268	],
269	],
270	'default' => '',
271	'selectors' => [
272	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select' => 'text-align: {{VALUE}};',
273	],
274	]
275	);
276
277	$this->start_controls_tabs( 'ekit_ninja_tabs_fields_style' );
278
279	$this->start_controls_tab(
280	'ekit_ninja_tab_fields_normal',
281	[
282	'label' => __( 'Normal', 'elementskit-lite' ),
283	]
284	);
285
286	$this->add_control(
287	'ekit_ninja_field_text_color',
288	[
289	'label' => __( 'Text Color', 'elementskit-lite' ),
290	'type' => Controls_Manager::COLOR,
291	'default' => '',
292	'selectors' => [
293	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select, {{WRAPPER}} .list-select-wrap div:after' => 'color: {{VALUE}}',
294	],
295	]
296	);
297
298	$this->add_control(
299	'ekit_ninja_field_bg_color',
300	[
301	'label' => __( 'Background Color', 'elementskit-lite' ),
302	'type' => Controls_Manager::COLOR,
303	'default' => '',
304	'selectors' => [
305	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-form-content .list-select-wrap>div div' => 'background-color: {{VALUE}}',
306	],
307	]
308	);
309
310	$this->add_group_control(
311	Group_Control_Typography::get_type(),
312	[
313	'name' => 'ekit_ninja_field_typography',
314	'label' => __( 'Typography', 'elementskit-lite' ),
315	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select',
316	'separator' => 'before',
317	]
318	);
319
320	$this->add_responsive_control(
321	'ekit_ninja_text_indent',
322	[
323	'label' => __( 'Text Indent', 'elementskit-lite' ),
324	'type' => Controls_Manager::SLIDER,
325	'range' => [
326	'px' => [
327	'min' => 0,
328	'max' => 60,
329	'step' => 1,
330	],
331	'%' => [
332	'min' => 0,
333	'max' => 30,
334	'step' => 1,
335	],
336	],
337	'size_units' => [ 'px', 'em', '%' ],
338	'selectors' => [
339	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select' => 'text-indent: {{SIZE}}{{UNIT}}',
340	],
341	'separator' => 'after',
342	]
343	);
344
345	$this->add_group_control(
346	Group_Control_Box_Shadow::get_type(),
347	[
348	'name' => 'ekit_ninja_field_box_shadow',
349	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select',
350	// 'separator' => 'before',
351	]
352	);
353
354	$this->add_group_control(
355	Group_Control_Border::get_type(),
356	[
357	'name' => 'ekit_ninja_field_border',
358	'label' => __( 'Border', 'elementskit-lite' ),
359	'placeholder' => '1px',
360	'default' => '1px',
361	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select',
362	// 'separator' => 'before',
363	]
364	);
365
366	$this->add_control(
367	'ekit_ninja_field_radius',
368	[
369	'label' => __( 'Border Radius', 'elementskit-lite' ),
370	'type' => Controls_Manager::DIMENSIONS,
371	'size_units' => [ 'px', 'em', '%' ],
372	'selectors' => [
373	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select, {{WRAPPER}} .nf-form-content .list-select-wrap>div div' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
374	],
375	]
376	);
377
378	$this->add_responsive_control(
379	'ekit_ninja_input_width',
380	[
381	'label' => __( 'Input Width', 'elementskit-lite' ),
382	'type' => Controls_Manager::SLIDER,
383	'range' => [
384	'px' => [
385	'min' => 0,
386	'max' => 1200,
387	'step' => 1,
388	],
389	],
390	'size_units' => [ 'px', 'em', '%' ],
391	'selectors' => [
392	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field select' => 'width: {{SIZE}}{{UNIT}}',
393	],
394	'separator' => 'before',
395	]
396	);
397
398	$this->add_responsive_control(
399	'ekit_ninja_textarea_width',
400	[
401	'label' => __( 'Textarea Width', 'elementskit-lite' ),
402	'type' => Controls_Manager::SLIDER,
403	'range' => [
404	'px' => [
405	'min' => 0,
406	'max' => 1200,
407	'step' => 1,
408	],
409	],
410	'size_units' => [ 'px', 'em', '%' ],
411	'selectors' => [
412	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea' => 'width: {{SIZE}}{{UNIT}}',
413	],
414	]
415	);
416
417	$this->add_responsive_control(
418	'ekit_ninja_textarea_height',
419	[
420	'label' => __( 'Textarea Height', 'elementskit-lite' ),
421	'type' => Controls_Manager::SLIDER,
422	'range' => [
423	'px' => [
424	'min' => 0,
425	'max' => 400,
426	'step' => 1,
427	],
428	],
429	'size_units' => [ 'px', 'em', '%' ],
430	'selectors' => [
431	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea' => 'height: {{SIZE}}{{UNIT}}',
432	],
433	]
434	);
435
436	$this->add_responsive_control(
437	'ekit_ninja_field_padding',
438	[
439	'label' => __( 'Padding', 'elementskit-lite' ),
440	'type' => Controls_Manager::DIMENSIONS,
441	'size_units' => [ 'px', 'em', '%' ],
442	'selectors' => [
443	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="text"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="email"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field input[type="tel"], {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea, {{WRAPPER}} .ekit_ninjaForms_container .nf-field select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
444	],
445	'separator' => 'before',
446	]
447	);
448
449	$this->add_responsive_control(
450	'ekit_ninja_field_spacing',
451	[
452	'label' => __( 'Spacing', 'elementskit-lite' ),
453	'type' => Controls_Manager::SLIDER,
454	'range' => [
455	'px' => [
456	'min' => 0,
457	'max' => 100,
458	'step' => 1,
459	],
460	],
461	'size_units' => [ 'px', 'em', '%' ],
462	'selectors' => [
463	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field-container' => 'margin-bottom: {{SIZE}}{{UNIT}}',
464	],
465	]
466	);
467
468	$this->end_controls_tab();
469
470	$this->start_controls_tab(
471	'ekit_ninja_tab_fields_focus',
472	[
473	'label' => __( 'Focus', 'elementskit-lite' ),
474	]
475	);
476
477	$this->add_control(
478	'ekit_ninja_field_bg_color_focus',
479	[
480	'label' => __( 'Background Color', 'elementskit-lite' ),
481	'type' => Controls_Manager::COLOR,
482	'default' => '',
483	'selectors' => [
484	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input:focus, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea:focus, {{WRAPPER}} .list-select-wrap select:active+div, {{WRAPPER}} .list-select-wrap select:focus+div' => 'background-color: {{VALUE}} !important',
485	],
486	]
487	);
488
489	$this->add_group_control(
490	Group_Control_Border::get_type(),
491	[
492	'name' => 'ekit_ninja_focus_input_border',
493	'label' => __( 'Border', 'elementskit-lite' ),
494	'placeholder' => '1px',
495	'default' => '1px',
496	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field input:focus, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea:focus, {{WRAPPER}} .list-select-wrap select:active+div, {{WRAPPER}} .list-select-wrap select:focus+div',
497	]
498	);
499
500	$this->add_group_control(
501	Group_Control_Box_Shadow::get_type(),
502	[
503	'name' => 'ekit_ninja_focus_box_shadow',
504	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field input:focus, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea:focus, {{WRAPPER}} .list-select-wrap select:active+div, {{WRAPPER}} .list-select-wrap select:focus+div',
505	'separator' => 'before',
506	]
507	);
508
509	$this->end_controls_tab();
510
511	$this->end_controls_tabs();
512
513	$this->end_controls_section();
514
515	/* Field Description */
516	$this->start_controls_section(
517	'ekit_ninja_section_field_description_style',
518	[
519	'label' => __( 'Field Description', 'elementskit-lite' ),
520	'tab' => Controls_Manager::TAB_STYLE,
521	]
522	);
523
524	$this->add_control(
525	'ekit_ninja_field_description_text_color',
526	[
527	'label' => __( 'Text Color', 'elementskit-lite' ),
528	'type' => Controls_Manager::COLOR,
529	'selectors' => [
530	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field .nf-field-description' => 'color: {{VALUE}}',
531	],
532	]
533	);
534
535	$this->add_group_control(
536	Group_Control_Typography::get_type(),
537	[
538	'name' => 'ekit_ninja_field_description_typography',
539	'label' => __( 'Typography', 'elementskit-lite' ),
540	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-field .nf-field-description',
541	]
542	);
543
544	$this->add_responsive_control(
545	'ekit_ninja_field_description_spacing',
546	[
547	'label' => __( 'Spacing', 'elementskit-lite' ),
548	'type' => Controls_Manager::SLIDER,
549	'range' => [
550	'px' => [
551	'min' => 0,
552	'max' => 100,
553	'step' => 1,
554	],
555	],
556	'size_units' => [ 'px', 'em', '%' ],
557	'selectors' => [
558	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field .nf-field-description' => 'margin-bottom: {{SIZE}}{{UNIT}}',
559	],
560	]
561	);
562
563	$this->end_controls_section();
564
565	/* Placeholder */
566	$this->start_controls_section(
567	'ekit_ninja_section_placeholder_style',
568	[
569	'label' => __( 'Placeholder', 'elementskit-lite' ),
570	'tab' => Controls_Manager::TAB_STYLE,
571	]
572	);
573
574	$this->add_control(
575	'ekit_ninja_text_color_placeholder',
576	[
577	'label' => __( 'Text Color', 'elementskit-lite' ),
578	'type' => Controls_Manager::COLOR,
579	'selectors' => [
580	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input::-webkit-input-placeholder, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea::-webkit-input-placeholder' => 'color: {{VALUE}}',
581	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input::-moz-input-placeholder, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea::-moz-input-placeholder' => 'color: {{VALUE}}',
582	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input:-ms-input-placeholder, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea:-ms-input-placeholder' => 'color: {{VALUE}}',
583	'{{WRAPPER}} .ekit_ninjaForms_container .nf-field input:-moz-placeholder, {{WRAPPER}} .ekit_ninjaForms_container .nf-field textarea:-moz-placeholder' => 'color: {{VALUE}}',
584	],
585	]
586	);
587
588	$this->end_controls_section();
589
590
591	/* Submit Button */
592	$this->start_controls_section(
593	'ekit_ninja_section_submit_button_style',
594	[
595	'label' => __( 'Submit Button', 'elementskit-lite' ),
596	'tab' => Controls_Manager::TAB_STYLE,
597	]
598	);
599
600	$this->add_control(
601	'ekit_ninja_button_width_type',
602	[
603	'label' => __( 'Width', 'elementskit-lite' ),
604	'type' => Controls_Manager::SELECT,
605	'default' => 'custom',
606	'options' => [
607	'full-width' => __( 'Full Width', 'elementskit-lite' ),
608	'custom' => __( 'Custom', 'elementskit-lite' ),
609	],
610	'prefix_class' => 'ekit_ninjaForms_container-button-',
611	]
612	);
613
614	$this->add_responsive_control(
615	'ekit_ninja_button_align',
616	[
617	'label' => __( 'Alignment', 'elementskit-lite' ),
618	'type' => Controls_Manager::CHOOSE,
619	'options' => [
620	'left' => [
621	'title' => __( 'Left', 'elementskit-lite' ),
622	'icon' => 'eicon-h-align-left',
623	],
624	'center' => [
625	'title' => __( 'Center', 'elementskit-lite' ),
626	'icon' => 'eicon-h-align-center',
627	],
628	'right' => [
629	'title' => __( 'Right', 'elementskit-lite' ),
630	'icon' => 'eicon-h-align-right',
631	],
632	],
633	'default' => '',
634	'selectors' => [
635	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container' => 'text-align: {{VALUE}};',
636	],
637	'condition' => [
638	'ekit_ninja_button_width_type' => 'custom',
639	],
640	]
641	);
642
643	$this->add_responsive_control(
644	'ekit_ninja_button_width',
645	[
646	'label' => __( 'Width', 'elementskit-lite' ),
647	'type' => Controls_Manager::SLIDER,
648	'default' => [
649	'size' => '130',
650	'unit' => 'px'
651	],
652	'range' => [
653	'px' => [
654	'min' => 0,
655	'max' => 1200,
656	'step' => 1,
657	],
658	],
659	'size_units' => [ 'px', '%' ],
660	'selectors' => [
661	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]' => 'width: {{SIZE}}{{UNIT}}',
662	],
663	'condition' => [
664	'ekit_ninja_utton_width_type' => 'custom',
665	],
666	]
667	);
668
669	$this->start_controls_tabs( 'tabs_button_style' );
670
671	$this->start_controls_tab(
672	'ekit_ninja_tab_button_normal',
673	[
674	'label' => __( 'Normal', 'elementskit-lite' ),
675	]
676	);
677
678	$this->add_group_control(
679	Group_Control_Typography::get_type(),
680	[
681	'name' => 'ekit_ninja_button_typography',
682	'label' => __( 'Typography', 'elementskit-lite' ),
683	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]',
684	// 'separator' => 'before',
685	]
686	);
687
688	$this->add_control(
689	'ekit_ninja_button_text_color_normal',
690	[
691	'label' => __( 'Text Color', 'elementskit-lite' ),
692	'type' => Controls_Manager::COLOR,
693	'default' => '',
694	'selectors' => [
695	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]' => 'color: {{VALUE}}',
696	],
697	]
698	);
699
700	$this->add_control(
701	'ekit_ninja_button_bg_color_normal',
702	[
703	'label' => __( 'Background Color', 'elementskit-lite' ),
704	'type' => Controls_Manager::COLOR,
705	'default' => '',
706	'selectors' => [
707	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]' => 'background-color: {{VALUE}}',
708	],
709	]
710	);
711
712	$this->add_group_control(
713	Group_Control_Box_Shadow::get_type(),
714	[
715	'name' => 'ekit_ninja_button_box_shadow',
716	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]',
717	'separator' => 'before',
718	]
719	);
720
721
722	$this->add_group_control(
723	Group_Control_Border::get_type(),
724	[
725	'name' => 'ekit_ninja_button_border_normal',
726	'label' => __( 'Border', 'elementskit-lite' ),
727	'placeholder' => '1px',
728	'default' => '1px',
729	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]',
730	]
731	);
732
733	$this->add_control(
734	'ekit_ninja_button_border_radius',
735	[
736	'label' => __( 'Border Radius', 'elementskit-lite' ),
737	'type' => Controls_Manager::DIMENSIONS,
738	'size_units' => [ 'px', 'em', '%' ],
739	'selectors' => [
740	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
741	],
742	]
743	);
744
745	$this->add_responsive_control(
746	'ekit_ninja_button_padding',
747	[
748	'label' => __( 'Padding', 'elementskit-lite' ),
749	'type' => Controls_Manager::DIMENSIONS,
750	'size_units' => [ 'px', 'em', '%' ],
751	'selectors' => [
752	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
753	],
754	]
755	);
756
757	$this->add_responsive_control(
758	'ekit_ninja_button_margin',
759	[
760	'label' => __( 'Margin', 'elementskit-lite' ),
761	'type' => Controls_Manager::DIMENSIONS,
762	'size_units' => [ 'px', 'em', '%' ],
763	'selectors' => [
764	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
765	],
766	]
767	);
768
769	$this->end_controls_tab();
770
771	$this->start_controls_tab(
772	'ekit_ninja_tab_button_hover',
773	[
774	'label' => __( 'Hover', 'elementskit-lite' ),
775	]
776	);
777
778	$this->add_control(
779	'ekit_ninja_button_bg_color_hover',
780	[
781	'label' => __( 'Background Color', 'elementskit-lite' ),
782	'type' => Controls_Manager::COLOR,
783	'default' => '',
784	'selectors' => [
785	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]:hover' => 'background-color: {{VALUE}}',
786	],
787	]
788	);
789
790	$this->add_control(
791	'ekit_ninja_button_text_color_hover',
792	[
793	'label' => __( 'Text Color', 'elementskit-lite' ),
794	'type' => Controls_Manager::COLOR,
795	'default' => '',
796	'selectors' => [
797	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]:hover' => 'color: {{VALUE}}',
798	],
799	]
800	);
801
802	$this->add_control(
803	'ekit_ninja_button_border_color_hover',
804	[
805	'label' => __( 'Border Color', 'elementskit-lite' ),
806	'type' => Controls_Manager::COLOR,
807	'default' => '',
808	'selectors' => [
809	'{{WRAPPER}} .ekit_ninjaForms_container .submit-container input[type="button"]:hover' => 'border-color: {{VALUE}}',
810	],
811	]
812	);
813
814	$this->end_controls_tab();
815
816	$this->end_controls_tabs();
817
818	$this->end_controls_section();
819
820	/* Success Message */
821	$this->start_controls_section(
822	'ekit_ninja_section_success_message_style',
823	[
824	'label' => __( 'Success Message', 'elementskit-lite' ),
825	'tab' => Controls_Manager::TAB_STYLE,
826	]
827	);
828
829	$this->add_control(
830	'ekit_ninja_success_message_text_color',
831	[
832	'label' => __( 'Text Color', 'elementskit-lite' ),
833	'type' => Controls_Manager::COLOR,
834	'selectors' => [
835	'{{WRAPPER}} .ekit_ninjaForms_container .nf-response-msg' => 'color: {{VALUE}}',
836	],
837	]
838	);
839
840	$this->add_group_control(
841	Group_Control_Typography::get_type(),
842	[
843	'name' => 'ekit_ninja_success_message_typography',
844	'label' => __( 'Typography', 'elementskit-lite' ),
845	'selector' => '{{WRAPPER}} .ekit_ninjaForms_container .nf-response-msg',
846	]
847	);
848
849	$this->end_controls_section();
850
851	/* Style Tab: Errors */
852	$this->start_controls_section(
853	'ekit_ninja_section_error_style',
854	[
855	'label' => __( 'Errors', 'elementskit-lite' ),
856	'tab' => Controls_Manager::TAB_STYLE,
857	]
858	);
859
860	$this->add_control(
861	'ekit_ninja_error_messages_heading',
862	[
863	'label' => __( 'Error Messages', 'elementskit-lite' ),
864	'type' => Controls_Manager::HEADING,
865	]
866	);
867
868	$this->add_control(
869	'ekit_ninja_error_message_text_color',
870	[
871	'label' => __( 'Text Color', 'elementskit-lite' ),
872	'type' => Controls_Manager::COLOR,
873	'default' => '',
874	'selectors' => [
875	'{{WRAPPER}} .ekit_ninjaForms_container .nf-error-wrap .nf-error-required-error' => 'color: {{VALUE}}',
876	],
877	]
878	);
879
880	$this->add_control(
881	'ekit_ninja_validation_errors_heading',
882	[
883	'label' => __( 'Validation Errors', 'elementskit-lite' ),
884	'type' => Controls_Manager::HEADING,
885	'separator' => 'before',
886	]
887	);
888
889	$this->add_control(
890	'ekit_ninja_validation_error_description_color',
891	[
892	'label' => __( 'Error Description Color', 'elementskit-lite' ),
893	'type' => Controls_Manager::COLOR,
894	'default' => '',
895	'selectors' => [
896	'{{WRAPPER}} .ekit_ninjaForms_container .nf-form-errors .nf-error-field-errors' => 'color: {{VALUE}}',
897	],
898	]
899	);
900
901	$this->add_control(
902	'ekit_ninja_validation_error_field_input_border_color',
903	[
904	'label' => __( 'Error Field Input Border Color', 'elementskit-lite' ),
905	'type' => Controls_Manager::COLOR,
906	'default' => '',
907	'selectors' => [
908	'{{WRAPPER}} .ekit_ninjaForms_container .nf-error .ninja-forms-field' => 'border-color: {{VALUE}}',
909	],
910	]
911	);
912
913	$this->end_controls_section();
914
915	$this->insert_pro_message();
916	}
917
918	protected function render( ) {
919	echo '<div class="ekit-wid-con ekit_ninjaForms_container">';
920	$this->render_raw();
921	echo '</div>';
922	}
923
924	protected function render_raw( ) {
925	$settings = $this->get_settings();
926	if ( ! empty( $settings['ekit_ninja_form_id'] ) ) {
927	?>
928	<div <?php echo $this->get_render_attribute_string( 'contact-form' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Already escaped by elementor ?>>
929	<?php echo do_shortcode( '[ninja_form id="' . intval($settings['ekit_ninja_form_id']) . '" ]' ); ?>
930	</div>
931	<?php
932	}
933	}
934	}
935