uicore-elements / includes / widgets / contact-form.php

contact-form.php in UiCore Elements – Free widgets and templates for Elementor 1.2.4, at includes/widgets/contact-form.php

2,522 lines 92.8 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements;
3
4	use UiCoreElements\Helper;
5	use UiCoreElements\Utils\Contact_Form_Service;
6	use UiCoreElements\Utils\Form_Component;
7	use Elementor\Controls_Manager;
8	use Elementor\Icons_Manager;
9	use Elementor\Utils;
10	use Elementor\Repeater;
11	use Elementor\Group_Control_Typography;
12	use Elementor\Group_Control_Border;
13	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
14	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
15
16
17	defined('ABSPATH') \|\| exit();
18
19	/**
20	* Contact Form
21	*
22	* @author Lucas Marini Falbo <lucas@uicore.co>
23	* @since 1.0.5
24	*/
25
26	class ContactForm extends UiCoreWidget {
27
28	use Form_Component;
29
30	public function get_name() {
31	return 'uicore-contact-form';
32	}
33
34	public function get_title() {
35	return __( 'Contact Form', 'uicore-elements' );
36	}
37
38	public function get_icon() {
39	return 'eicon-form-horizontal ui-e-widget';
40	}
41	public function get_categories()
42	{
43	return ['uicore'];
44	}
45	public function get_keywords() {
46	return [ 'form', 'forms', 'contact', 'mail', 'send', 'field', 'button', 'recaptcha', ];
47	}
48	public function get_styles()
49	{
50	return ['contact-form'];
51	}
52	public function get_scripts()
53	{
54	return [
55	'contact-form',
56	'recaptcha' => [
57	'custom_condition' => $this->check_recaptcha_version('v2')
58	],
59	'recaptcha-v3' => [
60	'custom_condition' => $this->check_recaptcha_version('v3')
61	],
62	'repeater-custom-key' => [
63	'custom_condition' => $this->is_edit_mode()
64	]
65	];
66	}
67	public function has_widget_inner_wrapper(): bool {
68	// TODO: remove after 3.30, when the full deprecation of widget innet wrapper is ready
69	return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );;
70	}
71	function check_recaptcha_version($version)
72	{
73
74	if($this->is_edit_mode()){
75	return true;
76	}
77	$settings = $this->get_settings_for_display();
78	foreach ($settings['form_fields'] as $field) {
79	$version_to_check = $version === 'v2' ? 'recaptcha' : 'recaptcha_v3';
80	if($field['field_type'] === $version_to_check){
81	return true;
82	}
83	}
84	return false;
85	}
86
87	// Helper Functions
88	function get_field_types()
89	{
90	return [
91	'text' => esc_html__( 'Text', 'uicore-elements' ),
92	'email' => esc_html__( 'Email', 'uicore-elements' ),
93	'textarea' => esc_html__( 'Textarea', 'uicore-elements' ),
94	'url' => esc_html__( 'URL', 'uicore-elements' ),
95	'tel' => esc_html__( 'Tel', 'uicore-elements' ),
96	'radio' => esc_html__( 'Radio', 'uicore-elements' ),
97	'select' => esc_html__( 'Select', 'uicore-elements' ),
98	'checkbox' => esc_html__( 'Checkbox', 'uicore-elements' ),
99	'acceptance' => esc_html__( 'Acceptance', 'uicore-elements' ),
100	'number' => esc_html__( 'Number', 'uicore-elements' ),
101	'date' => esc_html__( 'Date', 'uicore-elements' ),
102	'time' => esc_html__( 'Time', 'uicore-elements' ),
103	'file' => esc_html__( 'File Upload', 'uicore-elements' ),
104	'password' => esc_html__( 'Password', 'uicore-elements' ),
105	'address' => esc_html__( 'Honeypot', 'uicore-elements' ),
106	'recaptcha' => esc_html__( 'reCAPTCHA', 'uicore-elements' ),
107	'recaptcha_v3' => esc_html__( 'reCAPTCHA V3', 'uicore-elements' ),
108	'html' => esc_html__( 'HTML', 'uicore-elements' ),
109	'hidden' => esc_html__( 'Hidden', 'uicore-elements' ),
110	];
111	}
112
113	function get_attribute_name( $item ) {
114	return "form_fields[{$item['custom_id']}]";
115	}
116	function get_attribute_id( $item ) {
117	return 'form-field-' . $item['custom_id'];
118	}
119	function add_required_attribute( $element, $js_verication = false ) {
120
121	// Used for elements (eg: checkbox) that aren't natively supported by the browsers validations
122	if($js_verication) {
123	$this->add_render_attribute( $element, 'data-ui-e-required', 'true' );
124	return;
125	}
126
127	// Default method
128	$this->add_render_attribute( $element, 'required', 'required' );
129	$this->add_render_attribute( $element, 'aria-required', 'true' );
130	}
131
132	// Control Render Functions
133	function register_submit_email_controls($instance, $slug = '') {
134	$instance->add_control(
135	'email_to' . $slug,
136	[
137	'label' => esc_html__( 'To', 'uicore-elements' ),
138	'type' => Controls_Manager::TEXT,
139	'default' => get_option( 'admin_email' ),
140	'ai' => [
141	'active' => false,
142	],
143	'placeholder' => get_option( 'admin_email' ),
144	'label_block' => true,
145	'title' => esc_html__( 'Separate emails with commas', 'uicore-elements' ),
146	'render_type' => 'none',
147	'dynamic' => [
148	'active' => true,
149	],
150	]
151	);
152
153	/* translators: %s: Site title. */
154	$default_message = sprintf( html_entity_decode( esc_html__( 'New message from "%s"', 'uicore-elements' ) ), get_option( 'blogname' ) );
155
156	$instance->add_control(
157	'email_subject' . $slug,
158	[
159	'label' => esc_html__( 'Subject', 'uicore-elements' ),
160	'type' => Controls_Manager::TEXT,
161	'default' => $default_message,
162	'ai' => [
163	'active' => false,
164	],
165	'placeholder' => $default_message,
166	'label_block' => true,
167	'render_type' => 'none',
168	'dynamic' => [
169	'active' => true,
170	],
171	]
172	);
173
174	$instance->add_control(
175	'email_content' . $slug,
176	[
177	'label' => esc_html__( 'Message', 'uicore-elements' ),
178	'type' => Controls_Manager::TEXTAREA,
179	'default' => '[all-fields]',
180	'ai' => [
181	'active' => false,
182	],
183	'placeholder' => '[all-fields]',
184	'description' => sprintf(
185	/* translators: %s: The [all-fields] shortcode. */
186	esc_html__( 'By default, all form fields are sent via %s shortcode. To customize sent fields, copy the shortcode that appears inside each field and paste it above.', 'uicore-elements' ),
187	'<code>[all-fields]</code>'
188	),
189	'render_type' => 'none',
190	'dynamic' => [
191	'active' => true,
192	],
193	]
194	);
195
196	$site_domain = Helper::get_site_domain();
197
198	$instance->add_control(
199	'email_from' . $slug,
200	[
201	'label' => esc_html__( 'From Email', 'uicore-elements' ),
202	'type' => Controls_Manager::TEXT,
203	'default' => 'email@' . $site_domain,
204	'ai' => [
205	'active' => false,
206	],
207	'render_type' => 'none',
208	'dynamic' => [
209	'active' => true,
210	],
211	]
212	);
213
214	$instance->add_control(
215	'email_from_name' . $slug,
216	[
217	'label' => esc_html__( 'From Name', 'uicore-elements' ),
218	'type' => Controls_Manager::TEXT,
219	'default' => get_bloginfo( 'name' ),
220	'ai' => [
221	'active' => false,
222	],
223	'render_type' => 'none',
224	'dynamic' => [
225	'active' => true,
226	],
227	]
228	);
229
230	$instance->add_control(
231	'email_reply_to' . $slug,
232	[
233	'label' => esc_html__( 'Reply-To', 'uicore-elements' ),
234	'type' => Controls_Manager::TEXT,
235	'options' => [
236	'' => '',
237	],
238	'default' => 'noreply@' . Helper::get_site_domain(),
239	'render_type' => 'none',
240	]
241	);
242
243	$instance->add_control(
244	'email_to_cc' . $slug,
245	[
246	'label' => esc_html__( 'Cc', 'uicore-elements' ),
247	'type' => Controls_Manager::TEXT,
248	'default' => '',
249	'ai' => [
250	'active' => false,
251	],
252	'title' => esc_html__( 'Separate emails with commas', 'uicore-elements' ),
253	'render_type' => 'none',
254	'dynamic' => [
255	'active' => true,
256	],
257	]
258	);
259
260	$instance->add_control(
261	'email_to_bcc' . $slug,
262	[
263	'label' => esc_html__( 'Bcc', 'uicore-elements' ),
264	'type' => Controls_Manager::TEXT,
265	'default' => '',
266	'ai' => [
267	'active' => false,
268	],
269	'title' => esc_html__( 'Separate emails with commas', 'uicore-elements' ),
270	'render_type' => 'none',
271	'dynamic' => [
272	'active' => true,
273	],
274	]
275	);
276
277	$instance->add_control(
278	'form_metadata' . $slug,
279	[
280	'label' => esc_html__( 'Meta Data', 'uicore-elements' ),
281	'type' => Controls_Manager::SELECT2,
282	'multiple' => true,
283	'label_block' => true,
284	'separator' => 'before',
285	'default' => [
286	'date',
287	'time',
288	'page_url',
289	'user_agent',
290	'remote_ip',
291	],
292	'options' => [
293	'date' => esc_html__( 'Date', 'uicore-elements' ),
294	'time' => esc_html__( 'Time', 'uicore-elements' ),
295	'page_url' => esc_html__( 'Page URL', 'uicore-elements' ),
296	'user_agent' => esc_html__( 'User Agent', 'uicore-elements' ),
297	'remote_ip' => esc_html__( 'Remote IP', 'uicore-elements' ),
298	],
299	'render_type' => 'none',
300	]
301	);
302
303	$instance->add_control(
304	'email_content_type' . $slug,
305	[
306	'label' => esc_html__( 'Send As', 'uicore-elements' ),
307	'type' => Controls_Manager::SELECT,
308	'default' => 'html',
309	'render_type' => 'none',
310	'options' => [
311	'html' => esc_html__( 'HTML', 'uicore-elements' ),
312	'plain' => esc_html__( 'Plain', 'uicore-elements' ),
313	],
314	]
315	);
316	}
317
318	// Field Render Functions
319	function build_honeypot_field( $item, $item_index ) {
320	$this->add_render_attribute( 'honeypot' . $item_index, [
321	'class' => [
322	'ui-e-field',
323	'ui-e-h-p',
324	esc_attr( $item['css_classes'] ),
325	],
326	'name' => 'ui-e-h-p',
327	'id' => 'ui-e-h-p',
328	'autocomplete' => 'off',
329	] );
330
331	if ( $item['placeholder'] ) {
332	$this->add_render_attribute( 'honeypot' . $item_index, 'placeholder', $item['placeholder'] );
333	}
334
335	if ( $item['required'] ) {
336	$this->add_required_attribute( 'honeypot' . $item_index );
337	}
338
339	$value = empty( $item['field_value'] ) ? '' : $item['field_value'];
340
341	return '<input ' . $this->get_render_attribute_string( 'honeypot' . $item_index ) . ' tabindex="-1">' . $value . '</input>';
342	}
343	function build_textarea_field( $item, $item_index ) {
344	$this->add_render_attribute( 'textarea' . $item_index, [
345	'class' => [
346	'ui-e-field',
347	esc_attr( $item['css_classes'] ),
348	],
349	'name' => $this->get_attribute_name( $item ),
350	'id' => $this->get_attribute_id( $item ),
351	'rows' => $item['rows'],
352	] );
353
354	if ( $item['placeholder'] ) {
355	$this->add_render_attribute( 'textarea' . $item_index, 'placeholder', $item['placeholder'] );
356	}
357
358	if ( $item['required'] ) {
359	$this->add_required_attribute( 'textarea' . $item_index );
360	}
361
362	$value = empty( $item['field_value'] ) ? '' : $item['field_value'];
363
364	return '<textarea ' . $this->get_render_attribute_string( 'textarea' . $item_index ) . '>' . $value . '</textarea>';
365	}
366	function build_select_field( $item, $i ) {
367	$this->add_render_attribute(
368	[
369	'select-wrapper' . $i => [
370	'class' => [
371	'ui-e-field',
372	'ui-e-field-select',
373	'ui-e-field-subgroup',
374	esc_attr( $item['css_classes'] ),
375	],
376	],
377	'select' . $i => [
378	'name' => $this->get_attribute_name( $item ) . ( ! empty( $item['allow_multiple'] ) ? '[]' : '' ),
379	'id' => $this->get_attribute_id( $item ),
380	'class' => [
381	'ui-e-field-textual',
382	],
383	],
384	]
385	);
386
387	if ( $item['required'] ) {
388	$this->add_required_attribute( 'select' . $i );
389	}
390
391	if ( $item['allow_multiple'] ) {
392	$this->add_render_attribute( 'select' . $i, 'multiple' );
393	if ( ! empty( $item['select_size'] ) ) {
394	$this->add_render_attribute( 'select' . $i, 'size', $item['select_size'] );
395	}
396	}
397
398	$options = preg_split( "/\\r\\n\|\\r\|\\n/", $item['field_options'] );
399
400	if ( ! $options ) {
401	return '';
402	}
403
404	ob_start();
405	?>
406	<div <?php $this->print_render_attribute_string( 'select-wrapper' . $i ); ?>>
407	<select <?php $this->print_render_attribute_string( 'select' . $i ); ?>>
408	<?php
409	foreach ( $options as $key => $option ) {
410	$option_id = $item['custom_id'] . $key;
411	$option_value = esc_attr( $option );
412	$option_label = esc_html( $option );
413
414	if ( false !== strpos( $option, '\|' ) ) {
415	list( $label, $value ) = explode( '\|', $option );
416	$option_value = esc_attr( $value );
417	$option_label = esc_html( $label );
418	}
419
420	$this->add_render_attribute( $option_id, 'value', $option_value );
421
422	// Support multiple selected values
423	if ( ! empty( $item['field_value'] ) && in_array( $option_value, explode( ',', $item['field_value'] ) ) ) {
424	$this->add_render_attribute( $option_id, 'selected', 'selected' );
425	} ?>
426	<option <?php $this->print_render_attribute_string( $option_id ); ?>><?php
427	// PHPCS - $option_label is already escaped
428	echo $option_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></option>
429	<?php } ?>
430	</select>
431	</div>
432	<?php
433
434	$select = ob_get_clean();
435	return $select;
436	}
437	function build_radio_checkbox_field( $item, $item_index, $type ) {
438	$options = preg_split( "/\\r\\n\|\\r\|\\n/", $item['field_options'] );
439	$html = '';
440	if ( $options ) {
441	$html .= '<div class="ui-e-field-subgroup ' . esc_attr( $item['css_classes'] ) . ' ' . $item['inline_list'] . '">';
442	foreach ( $options as $key => $option ) {
443	$element_id = $item['custom_id'] . $key;
444	$html_id = $this->get_attribute_id( $item ) . '-' . $key;
445	$option_label = $option;
446	$option_value = $option;
447	if ( false !== strpos( $option, '\|' ) ) {
448	list( $option_label, $option_value ) = explode( '\|', $option );
449	}
450
451	$this->add_render_attribute(
452	$element_id,
453	[
454	'type' => $type,
455	'value' => $option_value,
456	'id' => $html_id,
457	'name' => $this->get_attribute_name( $item ) . ( ( 'checkbox' === $type && count( $options ) > 1 ) ? '[]' : '' ),
458	]
459	);
460
461	if ( $item['required'] ) {
462	$this->add_required_attribute( $element_id, true );
463	}
464
465	if ( ! empty( $item['field_value'] ) && $option_value === $item['field_value'] ) {
466	$this->add_render_attribute( $element_id, 'checked', 'checked' );
467	}
468
469	if ( $item['required'] && 'radio' === $type ) {
470	$this->add_required_attribute( $element_id );
471	}
472
473	$html .= '<span class="ui-e-field-option"><input ' . $this->get_render_attribute_string( $element_id ) . '> <label for="' . $html_id . '">' . $option_label . '</label></span>';
474	}
475	$html .= '</div>';
476	}
477
478	return $html;
479	}
480	function build_acceptance_field($item, $item_index) {
481	$text = '';
482	$this->add_render_attribute( 'input' . $item_index, 'class', 'ui-e-acceptance-field' );
483	$this->add_render_attribute( 'input' . $item_index, 'type', 'checkbox', true );
484
485	if ( ! empty( $item['acceptance_text'] ) ) {
486	$text = '<label for="' . $this->get_attribute_id( $item ) . '">' . $item['acceptance_text'] . '</label>';
487	}
488
489	if ( ! empty( $item['checked_by_default'] ) ) {
490	$this->add_render_attribute( 'input' . $item_index, 'checked', 'checked' );
491	}
492
493	?>
494	<div class="ui-e-field-subgroup <?php echo esc_attr( $item['css_classes'] );?>">
495	<input <?php $this->print_render_attribute_string( 'input' . $item_index ); ?>>
496	<?php // PHPCS - the variables $text is safe.
497	echo $text; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
498	</div>
499	<?php
500	}
501	function form_fields_render_attributes( $i, $instance, $item ) {
502	$this->add_render_attribute(
503	[
504	'field-group' . $i => [
505	'class' => [
506	'ui-e-field-type-' . $item['field_type'],
507	'ui-e-field-group',
508	'elementor-column',
509	'ui-e-field-group-' . $item['custom_id'],
510	],
511	],
512	'input' . $i => [
513	'type' => $item['field_type'],
514	'name' => $this->get_attribute_name( $item ),
515	'id' => $this->get_attribute_id( $item ),
516	'class' => [
517	'ui-e-field',
518	empty( $item['css_classes'] ) ? '' : esc_attr( $item['css_classes'] ),
519	],
520	],
521	'label' . $i => [
522	'for' => $this->get_attribute_id( $item ),
523	'class' => 'ui-e-label',
524	],
525	]
526	);
527
528	if ( empty( $item['width'] ) ) {
529	$item['width'] = '100';
530	}
531
532	$this->add_render_attribute( 'field-group' . $i, 'class', 'elementor-col-' . $item['width'] );
533
534	if ( ! empty( $item['width_tablet'] ) ) {
535	$this->add_render_attribute( 'field-group' . $i, 'class', 'elementor-md-' . $item['width_tablet'] );
536	}
537
538	if ( $item['allow_multiple'] ) {
539	$this->add_render_attribute( 'field-group' . $i, 'class', 'ui-e-field-type-' . $item['field_type'] . '-multiple' );
540	}
541
542	if ( ! empty( $item['width_mobile'] ) ) {
543	$this->add_render_attribute( 'field-group' . $i, 'class', 'elementor-sm-' . $item['width_mobile'] );
544	}
545
546	// Allow zero as placeholder.
547	if ( ! Utils::is_empty( $item['placeholder'] ) ) {
548	$this->add_render_attribute( 'input' . $i, 'placeholder', $item['placeholder'] );
549	}
550
551	if ( ! empty( $item['field_value'] ) ) {
552	$this->add_render_attribute( 'input' . $i, 'value', $item['field_value'] );
553	}
554
555	if ( ! $instance['show_labels'] ) {
556	$this->add_render_attribute( 'label' . $i, 'class', 'elementor-screen-only' );
557	}
558
559	if ( ! empty( $item['required'] ) ) {
560	$class = '';
561	if ( ! empty( $instance['mark_required'] ) ) {
562	$class .= ' ui-e-required';
563	}
564	$this->add_render_attribute( 'field-group' . $i, 'class', $class );
565	$this->add_required_attribute( 'input' . $i );
566	}
567	}
568
569	protected function register_controls() {
570
571	// Content Controls
572	// Repeater Controls used by `form_fields` control
573	$repeater = new Repeater();
574	$repeater->start_controls_tabs( 'form_fields_tabs' );
575
576	$repeater->start_controls_tab(
577	'form_fields_content_tab',
578	[
579	'label' => esc_html__( 'Content', 'uicore-elements' ),
580	]
581	);
582
583	$repeater->add_control(
584	'field_type',
585	[
586	'label' => esc_html__( 'Type', 'uicore-elements' ),
587	'type' => Controls_Manager::SELECT,
588	'options' => $this->get_field_types(),
589	'default' => 'text',
590	]
591	);
592	$repeater->add_control(
593	'field_label',
594	[
595	'label' => esc_html__( 'Label', 'uicore-elements' ),
596	'type' => Controls_Manager::TEXT,
597	'default' => '',
598	'dynamic' => [
599	'active' => true,
600	],
601	]
602	);
603	$repeater->add_control(
604	'placeholder',
605	[
606	'label' => esc_html__( 'Placeholder', 'uicore-elements' ),
607	'type' => Controls_Manager::TEXT,
608	'default' => '',
609	'conditions' => [
610	'terms' => [
611	[
612	'name' => 'field_type',
613	'operator' => 'in',
614	'value' => [
615	'tel',
616	'text',
617	'email',
618	'textarea',
619	'number',
620	'url',
621	'password',
622	],
623	],
624	],
625	],
626	'dynamic' => [
627	'active' => true,
628	],
629	]
630	);
631	$repeater->add_control(
632	'required',
633	[
634	'label' => esc_html__( 'Required', 'uicore-elements' ),
635	'type' => Controls_Manager::SWITCHER,
636	'return_value' => 'true',
637	'default' => '',
638	'conditions' => [
639	'terms' => [
640	[
641	'name' => 'field_type',
642	'operator' => '!in',
643	'value' => [
644	'recaptcha',
645	'recaptcha_v3',
646	'hidden',
647	'html',
648	],
649	],
650	],
651	],
652	]
653	);
654	$repeater->add_control(
655	'field_options',
656	[
657	'label' => esc_html__( 'Options', 'uicore-elements' ),
658	'type' => Controls_Manager::TEXTAREA,
659	'default' => '',
660	'description' => esc_html__( 'Enter each option in a separate line. To differentiate between label and value, separate them with a pipe char ("\|"). For example: First Name\|f_name', 'uicore-elements' ),
661	'conditions' => [
662	'terms' => [
663	[
664	'name' => 'field_type',
665	'operator' => 'in',
666	'value' => [
667	'select',
668	'checkbox',
669	'radio',
670	],
671	],
672	],
673	],
674	]
675	);
676	$repeater->add_control(
677	'allow_multiple',
678	[
679	'label' => esc_html__( 'Multiple Selection', 'uicore-elements' ),
680	'type' => Controls_Manager::SWITCHER,
681	'return_value' => 'true',
682	'conditions' => [
683	'terms' => [
684	[
685	'name' => 'field_type',
686	'value' => 'select',
687	],
688	],
689	],
690	]
691	);
692	$repeater->add_control(
693	'select_size',
694	[
695	'label' => esc_html__( 'Rows', 'uicore-elements' ),
696	'type' => Controls_Manager::NUMBER,
697	'min' => 2,
698	'step' => 1,
699	'conditions' => [
700	'terms' => [
701	[
702	'name' => 'field_type',
703	'value' => 'select',
704	],
705	[
706	'name' => 'allow_multiple',
707	'value' => 'true',
708	],
709	],
710	],
711	]
712	);
713	$repeater->add_control(
714	'inline_list',
715	[
716	'label' => esc_html__( 'Inline List', 'uicore-elements' ),
717	'type' => Controls_Manager::SWITCHER,
718	'return_value' => 'ui-e-subgroup-inline',
719	'default' => '',
720	'conditions' => [
721	'terms' => [
722	[
723	'name' => 'field_type',
724	'operator' => 'in',
725	'value' => [
726	'checkbox',
727	'radio',
728	],
729	],
730	],
731	],
732	]
733	);
734	$repeater->add_control(
735	'field_html',
736	[
737	'label' => esc_html__( 'HTML', 'uicore-elements' ),
738	'type' => Controls_Manager::TEXTAREA,
739	'dynamic' => [
740	'active' => true,
741	],
742	'conditions' => [
743	'terms' => [
744	[
745	'name' => 'field_type',
746	'value' => 'html',
747	],
748	],
749	],
750	]
751	);
752	$repeater->add_control(
753	'acceptance_text',
754	[
755	'label' => esc_html__( 'Acceptance Text', 'uicore-elements' ),
756	'type' => Controls_Manager::TEXTAREA,
757	'condition' => [
758	'field_type' => 'acceptance',
759	],
760	],
761	);
762	$repeater->add_control(
763	'checked_by_default',
764	[
765	'label' => esc_html__( 'Checked by Default', 'uicore-elements' ),
766	'type' => Controls_Manager::SWITCHER,
767	'condition' => [
768	'field_type' => 'acceptance',
769	],
770	],
771	);
772	$repeater->add_responsive_control(
773	'width',
774	[
775	'label' => esc_html__( 'Column Width', 'uicore-elements' ),
776	'type' => Controls_Manager::SELECT,
777	'options' => [
778	'' => esc_html__( 'Default', 'uicore-elements' ),
779	'100' => '100%',
780	'80' => '80%',
781	'75' => '75%',
782	'70' => '70%',
783	'66' => '66%',
784	'60' => '60%',
785	'50' => '50%',
786	'40' => '40%',
787	'33' => '33%',
788	'30' => '30%',
789	'25' => '25%',
790	'20' => '20%',
791	],
792	'default' => '100',
793	'conditions' => [
794	'terms' => [
795	[
796	'name' => 'field_type',
797	'operator' => '!in',
798	'value' => [
799	'hidden',
800	'recaptcha',
801	'recaptcha_v3'
802	],
803	],
804	],
805	],
806	]
807	);
808	$repeater->add_control(
809	'rows',
810	[
811	'label' => esc_html__( 'Rows', 'uicore-elements' ),
812	'type' => Controls_Manager::NUMBER,
813	'default' => 4,
814	'conditions' => [
815	'terms' => [
816	[
817	'name' => 'field_type',
818	'value' => 'textarea',
819	],
820	],
821	],
822	]
823	);
824	$repeater->add_control(
825	'recaptcha_hide',
826	[
827	'label' => esc_html__( 'Badge', 'uicore-elements' ),
828	'type' => Controls_Manager::SELECT,
829	'default' => 'hidden',
830	'options' => [
831	'hidden' => esc_html__( 'Hidden', 'uicore-elements' ),
832	'visible' => esc_html__( 'Visible', 'uicore-elements' )
833	],
834	'condition' => [
835	'field_type' => 'recaptcha_v3',
836	],
837	'selectors' => [
838	'.grecaptcha-badge' => 'visibility: {{VALUE}};',
839	],
840	]
841	);
842	$recaptcha_keys = (!get_option('uicore_elements_recaptcha_secret_key') && !get_option('uicore_elements_recaptcha_site_key')) ? true : false; // Check if recaptcha API keys were set
843	$repeater->add_control(
844	'recaptcha_warning',
845	[
846	'type' => Controls_Manager::ALERT,
847	'alert_type' => 'warning',
848	'dismissible' => false,
849	'heading' => esc_html__("You haven't set your reCAPTCHA API keys yet.", 'uicore-elements'),
850	'content' => Helper::get_admin_settings_url(esc_html__("Click here to configure your API keys.", 'uicore-elements' )),
851	'condition' => [
852	'field_type' => $recaptcha_keys ? ['recaptcha', 'recaptcha_v3'] : [],
853	]
854	]
855	);
856
857	$repeater->end_controls_tab();
858
859	$repeater->start_controls_tab(
860	'form_fields_advanced_tab',
861	[
862	'label' => esc_html__( 'Advanced', 'uicore-elements' ),
863	'condition' => [
864	'field_type!' => ['html', 'address' ],
865	],
866	]
867	);
868
869	$repeater->add_control(
870	'field_value',
871	[
872	'label' => esc_html__( 'Default Value', 'uicore-elements' ),
873	'type' => Controls_Manager::TEXT,
874	'default' => '',
875	'dynamic' => [
876	'active' => true,
877	],
878	'ai' => [
879	'active' => false,
880	],
881	'conditions' => [
882	'terms' => [
883	[
884	'name' => 'field_type',
885	'operator' => 'in',
886	'value' => [
887	'text',
888	'email',
889	'textarea',
890	'url',
891	'tel',
892	'radio',
893	'select',
894	'number',
895	'date',
896	'time',
897	'hidden',
898	],
899	],
900	],
901	],
902	]
903	);
904	$repeater->add_control(
905	'custom_id',
906	[
907	'label' => esc_html__( 'ID', 'uicore-elements' ),
908	'type' => Controls_Manager::TEXT,
909	'description' => esc_html__( 'Please make sure the ID is unique and not used elsewhere in this form. This field allows `A-z 0-9` & underscore chars without spaces.', 'uicore-elements' ),
910	'render_type' => 'none',
911	'required' => true,
912	'dynamic' => [
913	'active' => true,
914	],
915	'ai' => [
916	'active' => false,
917	],
918	]
919	);
920	$repeater->add_control(
921	'css_classes',
922	[
923	'label' => esc_html__( 'Custom Class', 'uicore-elements' ),
924	'type' => Controls_Manager::TEXT,
925	'default' => '',
926	'ai' => [
927	'active' => false,
928	],
929	'placeholder' => esc_html__( 'e.g: my-class', 'uicore-elements' ),
930	]
931	);
932	$shortcode_template = '{{ view.container.settings.get( \'custom_id\' ) }}';
933	$repeater->add_control(
934	'shortcode',
935	[
936	'label' => esc_html__( 'Shortcode', 'uicore-elements' ),
937	'type' => Controls_Manager::RAW_HTML,
938	'classes' => 'forms-field-shortcode',
939	'raw' => '<input class="elementor-form-field-shortcode" value=\'[field id="' . $shortcode_template . '"]\' readonly />',
940	'label_block' => false,
941	]
942	);
943
944	$repeater->end_controls_tab();
945
946	$repeater->end_controls_tabs();
947
948	$this->start_controls_section(
949	'section_form_fields',
950	[
951	'label' => esc_html__( 'Form Fields', 'uicore-elements' ),
952	]
953	);
954
955
956	$this->add_control(
957	'form_name',
958	[
959	'label' => esc_html__( 'Form Name', 'uicore-elements' ),
960	'type' => Controls_Manager::TEXT,
961	'default' => esc_html__( 'New Form', 'uicore-elements' ),
962	'placeholder' => esc_html__( 'Form Name', 'uicore-elements' ),
963	]
964	);
965	$this->add_control(
966	'form_fields',
967	[
968	'type' => Controls_Manager::REPEATER,
969	'fields' => $repeater->get_controls(),
970	'default' => [
971	[
972	'custom_id' => 'name',
973	'field_type' => 'text',
974	'field_label' => esc_html__( 'Name', 'uicore-elements' ),
975	'placeholder' => esc_html__( 'Name', 'uicore-elements' ),
976	'width' => '100',
977	'dynamic' => [
978	'active' => true,
979	],
980	],
981	[
982	'custom_id' => 'email',
983	'field_type' => 'email',
984	'required' => 'true',
985	'field_label' => esc_html__( 'Email', 'uicore-elements' ),
986	'placeholder' => esc_html__( 'Email', 'uicore-elements' ),
987	'width' => '100',
988	],
989	[
990	'custom_id' => 'address',
991	'field_type' => 'address',
992	'field_label' => esc_html__( 'address (honeypot)', 'uicore-elements' ),
993	'placeholder' => esc_html__( 'address', 'uicore-elements' ),
994	'width' => '100',
995	],
996	[
997	'custom_id' => 'message',
998	'field_type' => 'textarea',
999	'field_label' => esc_html__( 'Message', 'uicore-elements' ),
1000	'placeholder' => esc_html__( 'Message', 'uicore-elements' ),
1001	'width' => '100',
1002	],
1003	],
1004	'title_field' => '{{{ field_label }}}',
1005	]
1006	);
1007	$this->add_control(
1008	'show_labels',
1009	[
1010	'label' => esc_html__( 'Label', 'uicore-elements' ),
1011	'type' => Controls_Manager::SWITCHER,
1012	'label_on' => esc_html__( 'Show', 'uicore-elements' ),
1013	'label_off' => esc_html__( 'Hide', 'uicore-elements' ),
1014	'return_value' => 'true',
1015	'default' => 'true',
1016	'separator' => 'before',
1017	]
1018	);
1019	$this->add_control(
1020	'mark_required',
1021	[
1022	'label' => esc_html__( 'Required Mark', 'uicore-elements' ),
1023	'type' => Controls_Manager::SWITCHER,
1024	'label_on' => esc_html__( 'Show', 'uicore-elements' ),
1025	'label_off' => esc_html__( 'Hide', 'uicore-elements' ),
1026	'default' => '',
1027	'render_type' => 'template',
1028	'condition' => [
1029	'show_labels!' => '',
1030	],
1031	]
1032	);
1033
1034	$this->end_controls_section();
1035
1036	$this->start_controls_section(
1037	'section_buttons',
1038	[
1039	'label' => esc_html__( 'Button', 'uicore-elements' ),
1040	]
1041	);
1042
1043	$this->add_responsive_control(
1044	'button_width',
1045	[
1046	'label' => esc_html__( 'Column Width', 'uicore-elements' ),
1047	'type' => Controls_Manager::SELECT,
1048	'options' => [
1049	'' => esc_html__( 'Default', 'uicore-elements' ),
1050	'100' => '100%',
1051	'80' => '80%',
1052	'75' => '75%',
1053	'70' => '70%',
1054	'66' => '66%',
1055	'60' => '60%',
1056	'50' => '50%',
1057	'40' => '40%',
1058	'33' => '33%',
1059	'30' => '30%',
1060	'25' => '25%',
1061	'20' => '20%',
1062	],
1063	'default' => '100',
1064	]
1065	);
1066	$this->add_responsive_control(
1067	'button_align',
1068	[
1069	'label' => esc_html__( 'Alignment', 'uicore-elements' ),
1070	'type' => Controls_Manager::CHOOSE,
1071	'options' => [
1072	'left' => [
1073	'title' => esc_html__( 'Left', 'uicore-elements' ),
1074	'icon' => 'eicon-text-align-left',
1075	],
1076	'center' => [
1077	'title' => esc_html__( 'Center', 'uicore-elements' ),
1078	'icon' => 'eicon-text-align-center',
1079	],
1080	'right' => [
1081	'title' => esc_html__( 'Right', 'uicore-elements' ),
1082	'icon' => 'eicon-text-align-right',
1083	],
1084	'stretch' => [
1085	'title' => esc_html__( 'Justified', 'uicore-elements' ),
1086	'icon' => 'eicon-text-align-justify',
1087	],
1088	],
1089	'default' => 'stretch',
1090	'prefix_class' => 'ui-e-submit-align-',
1091	]
1092	);
1093	$this->add_control(
1094	'button_text',
1095	[
1096	'label' => esc_html__( 'Submit', 'uicore-elements' ),
1097	'type' => Controls_Manager::TEXT,
1098	'default' => esc_html__( 'Send', 'uicore-elements' ),
1099	'placeholder' => esc_html__( 'Send', 'uicore-elements' ),
1100	'dynamic' => [
1101	'active' => true,
1102	],
1103	'ai' => [
1104	'active' => false,
1105	],
1106	]
1107	);
1108	$this->add_control(
1109	'selected_button_icon',
1110	[
1111	'label' => esc_html__( 'Icon', 'uicore-elements' ),
1112	'type' => Controls_Manager::ICONS,
1113	'skin' => 'inline',
1114	'label_block' => false,
1115	]
1116	);
1117	$this->add_control(
1118	'button_icon_align',
1119	[
1120	'label' => esc_html__( 'Icon Position', 'uicore-elements' ),
1121	'type' => Controls_Manager::SELECT,
1122	'default' => 'left',
1123	'options' => [
1124	'left' => esc_html__( 'Before', 'uicore-elements' ),
1125	'right' => esc_html__( 'After', 'uicore-elements' ),
1126	],
1127	'condition' => [
1128	'selected_button_icon[value]!' => '',
1129	],
1130	]
1131	);
1132	$this->add_control(
1133	'button_icon_indent',
1134	[
1135	'label' => esc_html__( 'Icon Spacing', 'uicore-elements' ),
1136	'type' => Controls_Manager::SLIDER,
1137	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1138	'range' => [
1139	'px' => [
1140	'max' => 100,
1141	],
1142	'em' => [
1143	'max' => 10,
1144	],
1145	'rem' => [
1146	'max' => 10,
1147	],
1148	],
1149	'condition' => [
1150	'selected_button_icon[value]!' => '',
1151	],
1152	'selectors' => [
1153	'{{WRAPPER}} .elementor-button .ui-e-align-right' => 'margin-left: {{SIZE}}{{UNIT}};',
1154	'{{WRAPPER}} .elementor-button .ui-e-align-left' => 'margin-right: {{SIZE}}{{UNIT}};',
1155	],
1156	]
1157	);
1158	$this->add_control(
1159	'button_css_id',
1160	[
1161	'label' => esc_html__( 'Button ID', 'uicore-elements' ),
1162	'type' => Controls_Manager::TEXT,
1163	'default' => '',
1164	'ai' => [
1165	'active' => false,
1166	],
1167	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'uicore-elements' ),
1168	'description' => esc_html__( 'Please make sure the ID is unique and not used elsewhere on the page this form is displayed. This field allows `A-z 0-9` & underscore chars without spaces.', 'uicore-elements' ),
1169	'separator' => 'before',
1170	'dynamic' => [
1171	'active' => true,
1172	],
1173	]
1174	);
1175
1176
1177	$this->end_controls_section();
1178
1179	$this->start_controls_section(
1180	'section_actions',
1181	[
1182	'label' => esc_html__( 'Actions After Submit', 'uicore-elements' ),
1183	]
1184	);
1185
1186	$this->add_control(
1187	'submit_actions',
1188	[
1189	'label' => esc_html__( 'Submit Actions', 'uicore-elements' ),
1190	'type' => Controls_Manager::SELECT2,
1191	'label_block' => true,
1192	'multiple' => true,
1193	'options' => [
1194	'email' => esc_html__( 'Email', 'uicore-elements' ),
1195	'email_2' => esc_html__( 'Email 2', 'uicore-elements' ),
1196	'redirect' => esc_html__( 'Redirect', 'uicore-elements' ),
1197	'mailchimp' => esc_html__( 'MailChimp', 'uicore-elements' ),
1198	],
1199	'default' => [ 'email' ],
1200	]
1201	);
1202
1203	$this->end_controls_section();
1204
1205	// Submit sections
1206	$this->start_controls_section(
1207	'section_email',
1208	[
1209	'label' => esc_html__( 'Email', 'uicore-elements' ),
1210	'condition' => [
1211	'submit_actions' => 'email',
1212	],
1213	]
1214	);
1215
1216	$this->register_submit_email_controls($this);
1217
1218	$this->end_controls_section();
1219
1220	$this->start_controls_section(
1221	'section_email_2',
1222	[
1223	'label' => esc_html__( 'Email 2', 'uicore-elements' ),
1224	'condition' => [
1225	'submit_actions' => 'email_2',
1226	],
1227	]
1228	);
1229
1230	$this->register_submit_email_controls($this, '_2');
1231
1232	$this->end_controls_section();
1233
1234	$this->start_controls_section(
1235	'section_redirect',
1236	[
1237	'label' => esc_html__( 'Redirect', 'uicore-elements' ),
1238	'condition' => [
1239	'submit_actions' => 'redirect',
1240	],
1241	]
1242	);
1243
1244	$this->add_control(
1245	'redirect_to',
1246	[
1247	'label' => esc_html__( 'Redirect To', 'uicore-elements' ),
1248	'type' => Controls_Manager::TEXT,
1249	'placeholder' => esc_html__( 'https://your-link.com', 'uicore-elements' ),
1250	'ai' => [
1251	'active' => false,
1252	],
1253	'dynamic' => [
1254	'active' => true,
1255	'categories' => [
1256	'url',
1257	],
1258	],
1259	'label_block' => true,
1260	'render_type' => 'none',
1261	]
1262	);
1263
1264	$this->end_controls_section();
1265
1266	$this->start_controls_section(
1267	'mailchimp_redirect',
1268	[
1269	'label' => esc_html__( 'Mailchimp', 'uicore-elements' ),
1270	'condition' => [
1271	'submit_actions' => 'mailchimp',
1272	],
1273	]
1274	);
1275
1276	$this->TRAIT_register_submit_mailchimp_controls($this, true);
1277
1278	$this->end_controls_section();
1279
1280	$default_messages = Contact_Form_Service::get_default_messages();
1281	$this->start_controls_section(
1282	'section_form_options',
1283	[
1284	'label' => esc_html__( 'Additional Options', 'uicore-elements' ),
1285	'tab' => Controls_Manager::TAB_CONTENT,
1286	]
1287	);
1288
1289	$this->add_control(
1290	'form_id',
1291	[
1292	'label' => esc_html__( 'Form ID', 'uicore-elements' ),
1293	'type' => Controls_Manager::TEXT,
1294	'ai' => [
1295	'active' => false,
1296	],
1297	'placeholder' => 'new_form_id',
1298	'description' => esc_html__( 'Please make sure the ID is unique and not used elsewhere on the page this form is displayed. This field allows `A-z 0-9` & underscore chars without spaces.', 'uicore-elements' ),
1299	'separator' => 'after',
1300	'dynamic' => [
1301	'active' => true,
1302	],
1303	]
1304	);
1305	$this->add_control(
1306	'form_validation',
1307	[
1308	'label' => esc_html__( 'Form Validation', 'uicore-elements' ),
1309	'type' => Controls_Manager::SELECT,
1310	'options' => [
1311	'' => esc_html__( 'Browser Default', 'uicore-elements' ),
1312	'no' => esc_html__( 'No validation', 'uicore-elements' ),
1313	],
1314	'default' => '',
1315	]
1316	);
1317	$this->add_control(
1318	'custom_messages',
1319	[
1320	'label' => esc_html__( 'Custom Messages', 'uicore-elements' ),
1321	'type' => Controls_Manager::SWITCHER,
1322	'default' => '',
1323	'separator' => 'before',
1324	'render_type' => 'none',
1325	]
1326	);
1327	$this->add_control(
1328	'success_message',
1329	[
1330	'label' => esc_html__( 'Success Message', 'uicore-elements' ),
1331	'type' => Controls_Manager::TEXT,
1332	'default' => $default_messages['success'],
1333	'placeholder' => $default_messages['success'],
1334	'label_block' => true,
1335	'condition' => [
1336	'custom_messages!' => '',
1337	],
1338	'render_type' => 'none',
1339	'dynamic' => [
1340	'active' => true,
1341	],
1342	]
1343	);
1344	$this->add_control(
1345	'error_message',
1346	[
1347	'label' => esc_html__( 'Form Error', 'uicore-elements' ),
1348	'type' => Controls_Manager::TEXT,
1349	'default' => $default_messages['error'],
1350	'placeholder' => $default_messages['error'],
1351	'label_block' => true,
1352	'condition' => [
1353	'custom_messages!' => '',
1354	],
1355	'render_type' => 'none',
1356	'dynamic' => [
1357	'active' => true,
1358	],
1359	]
1360	);
1361	$this->add_control(
1362	'mail_error_message',
1363	[
1364	'label' => esc_html__( 'Email Sending Error', 'uicore-elements' ),
1365	'type' => Controls_Manager::TEXT,
1366	'default' => $default_messages['mail_error'],
1367	'placeholder' => $default_messages['mail_error'],
1368	'label_block' => true,
1369	'condition' => [
1370	'custom_messages!' => '',
1371	],
1372	'render_type' => 'none',
1373	'dynamic' => [
1374	'active' => true,
1375	],
1376	]
1377	);
1378	$this->add_control(
1379	'required_fields_message',
1380	[
1381	'label' => esc_html__( 'Required Fields', 'uicore-elements' ),
1382	'type' => Controls_Manager::TEXT,
1383	'default' => $default_messages['required'],
1384	'placeholder' => $default_messages['required'],
1385	'label_block' => true,
1386	'conditions' => [
1387	'terms' => [
1388	[
1389	'name' => 'custom_messages',
1390	'operator' => '!=',
1391	'value' => '',
1392	],
1393	],
1394	],
1395	'render_type' => 'none',
1396	'dynamic' => [
1397	'active' => true,
1398	],
1399	]
1400	);
1401	$this->add_control(
1402	'redirect_message',
1403	[
1404	'label' => esc_html__( 'Sucessfull Redirect', 'uicore-elements' ),
1405	'type' => Controls_Manager::TEXT,
1406	'default' => $default_messages['redirect'],
1407	'placeholder' => $default_messages['redirect'],
1408	'label_block' => true,
1409	'conditions' => [
1410	'terms' => [
1411	[
1412	'name' => 'custom_messages',
1413	'operator' => '!=',
1414	'value' => '',
1415	],
1416	[
1417	'name' => 'submit_actions',
1418	'operator' => 'contains',
1419	'value' => 'redirect',
1420	]
1421	],
1422	],
1423	'render_type' => 'none',
1424	'dynamic' => [
1425	'active' => true,
1426	],
1427	]
1428	);
1429
1430	$this->end_controls_section();
1431
1432	$this->start_controls_section(
1433	'section_form_style',
1434	[
1435	'label' => esc_html__( 'Form', 'uicore-elements' ),
1436	'tab' => Controls_Manager::TAB_STYLE,
1437	]
1438	);
1439
1440	$this->add_control(
1441	'column_gap',
1442	[
1443	'label' => esc_html__( 'Columns Gap', 'uicore-elements' ),
1444	'type' => Controls_Manager::SLIDER,
1445	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1446	'default' => [
1447	'size' => 10,
1448	],
1449	'range' => [
1450	'px' => [
1451	'max' => 60,
1452	],
1453	'em' => [
1454	'max' => 6,
1455	],
1456	'rem' => [
1457	'max' => 6,
1458	],
1459	],
1460	'selectors' => [
1461	'{{WRAPPER}} .ui-e-field-group' => 'padding-right: calc( {{SIZE}}{{UNIT}}/2 ); padding-left: calc( {{SIZE}}{{UNIT}}/2 );',
1462	'{{WRAPPER}} .ui-e-fields-wrp' => 'margin-left: calc( -{{SIZE}}{{UNIT}}/2 ); margin-right: calc( -{{SIZE}}{{UNIT}}/2 );',
1463	],
1464	]
1465	);
1466	$this->add_control(
1467	'row_gap',
1468	[
1469	'label' => esc_html__( 'Rows Gap', 'uicore-elements' ),
1470	'type' => Controls_Manager::SLIDER,
1471	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1472	'default' => [
1473	'size' => 10,
1474	],
1475	'range' => [
1476	'px' => [
1477	'max' => 60,
1478	],
1479	'em' => [
1480	'max' => 6,
1481	],
1482	'rem' => [
1483	'max' => 6,
1484	],
1485	],
1486	'selectors' => [
1487	'{{WRAPPER}} .ui-e-field-group' => 'margin-bottom: {{SIZE}}{{UNIT}};',
1488	'{{WRAPPER}} .ui-e-fields-wrp' => 'margin-bottom: -{{SIZE}}{{UNIT}};',
1489	],
1490	]
1491	);
1492	$this->add_control(
1493	'heading_label',
1494	[
1495	'label' => esc_html__( 'Label', 'uicore-elements' ),
1496	'type' => Controls_Manager::HEADING,
1497	'separator' => 'before',
1498	]
1499	);
1500	$this->add_control(
1501	'label_spacing',
1502	[
1503	'label' => esc_html__( 'Spacing', 'uicore-elements' ),
1504	'type' => Controls_Manager::SLIDER,
1505	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1506	'default' => [
1507	'size' => 0,
1508	],
1509	'range' => [
1510	'px' => [
1511	'max' => 60,
1512	],
1513	'em' => [
1514	'max' => 6,
1515	],
1516	'rem' => [
1517	'max' => 6,
1518	],
1519	],
1520	'selectors' => [
1521	'body {{WRAPPER}} .ui-e-field-group > label' => 'padding-bottom: {{SIZE}}{{UNIT}};',
1522	],
1523	]
1524	);
1525	$this->add_control(
1526	'label_color',
1527	[
1528	'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1529	'type' => Controls_Manager::COLOR,
1530	'selectors' => [
1531	'{{WRAPPER}} .ui-e-field-group > label, {{WRAPPER}} .ui-e-field-subgroup label' => 'color: {{VALUE}};',
1532	],
1533	'global' => [
1534	'default' => Global_Colors::COLOR_TEXT,
1535	],
1536	]
1537	);
1538	$this->add_control(
1539	'mark_required_color',
1540	[
1541	'label' => esc_html__( 'Mark Color', 'uicore-elements' ),
1542	'type' => Controls_Manager::COLOR,
1543	'default' => '',
1544	'selectors' => [
1545	'{{WRAPPER}} .ui-e-required .ui-e-label:after' => 'color: {{COLOR}};',
1546	],
1547	'condition' => [
1548	'mark_required' => 'yes',
1549	],
1550	]
1551	);
1552	$this->add_group_control(
1553	Group_Control_Typography::get_type(),
1554	[
1555	'name' => 'label_typography',
1556	'selector' => '{{WRAPPER}} .ui-e-field-group > label',
1557	'global' => [
1558	'default' => Global_Typography::TYPOGRAPHY_TEXT,
1559	],
1560	]
1561	);
1562	$this->add_control(
1563	'heading_html',
1564	[
1565	'label' => esc_html__( 'HTML Field', 'uicore-elements' ),
1566	'type' => Controls_Manager::HEADING,
1567	'separator' => 'before',
1568	]
1569	);
1570	$this->add_control(
1571	'html_spacing',
1572	[
1573	'label' => esc_html__( 'Spacing', 'uicore-elements' ),
1574	'type' => Controls_Manager::SLIDER,
1575	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1576	'default' => [
1577	'size' => 0,
1578	],
1579	'range' => [
1580	'px' => [
1581	'max' => 60,
1582	],
1583	'em' => [
1584	'max' => 6,
1585	],
1586	'rem' => [
1587	'max' => 6,
1588	],
1589	],
1590	'selectors' => [
1591	'{{WRAPPER}} .ui-e-field-type-html' => 'padding-bottom: {{SIZE}}{{UNIT}};',
1592	],
1593	]
1594	);
1595	$this->add_control(
1596	'html_color',
1597	[
1598	'label' => esc_html__( 'Color', 'uicore-elements' ),
1599	'type' => Controls_Manager::COLOR,
1600	'selectors' => [
1601	'{{WRAPPER}} .ui-e-field-type-html' => 'color: {{VALUE}};',
1602	],
1603	'global' => [
1604	'default' => Global_Colors::COLOR_TEXT,
1605	],
1606	]
1607	);
1608	$this->add_group_control(
1609	Group_Control_Typography::get_type(),
1610	[
1611	'name' => 'html_typography',
1612	'selector' => '{{WRAPPER}} .ui-e-field-type-html',
1613	'global' => [
1614	'default' => Global_Typography::TYPOGRAPHY_TEXT,
1615	],
1616	]
1617	);
1618
1619	$this->end_controls_section();
1620
1621	$this->start_controls_section(
1622	'section_field_style',
1623	[
1624	'label' => esc_html__( 'Fields', 'uicore-elements' ),
1625	'tab' => Controls_Manager::TAB_STYLE,
1626	]
1627	);
1628
1629	$this->start_controls_tabs(
1630	'field_style_tabs'
1631	);
1632
1633	$this->start_controls_tab(
1634	'field_normal_tab',
1635	[
1636	'label' => esc_html__( 'Normal', 'uicore-elements' ),
1637	]
1638	);
1639
1640	$this->add_group_control(
1641	Group_Control_Typography::get_type(),
1642	[
1643	'name' => 'field_typography',
1644	'selector' => '{{WRAPPER}} .ui-e-field-group .ui-e-field, {{WRAPPER}} .ui-e-field-subgroup label, {{WRAPPER}} .ui-e-field-group .ui-e-field-select select',
1645	'global' => [
1646	'default' => Global_Typography::TYPOGRAPHY_TEXT,
1647	],
1648	]
1649	);
1650	$this->add_control(
1651	'field_text_color',
1652	[
1653	'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1654	'type' => Controls_Manager::COLOR,
1655	'selectors' => [
1656	'{{WRAPPER}} .ui-e-field-group .ui-e-field, {{WRAPPER}} .ui-e-field-group .ui-e-field-select select' => 'color: {{VALUE}};',
1657	],
1658	'global' => [
1659	'default' => Global_Colors::COLOR_TEXT,
1660	],
1661	]
1662	);
1663	$this->add_control(
1664	'field_placeholder_color',
1665	[
1666	'label' => esc_html__( 'Placeholder Color', 'uicore-elements' ),
1667	'type' => Controls_Manager::COLOR,
1668	'selectors' => [
1669	'{{WRAPPER}} .ui-e-field-group .ui-e-field::placeholder' => 'color: {{VALUE}};',
1670	],
1671	'global' => [
1672	'default' => Global_Colors::COLOR_TEXT,
1673	],
1674	]
1675	);
1676	$this->add_control(
1677	'field_background_color',
1678	[
1679	'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1680	'type' => Controls_Manager::COLOR,
1681	'default' => '#ffffff',
1682	'selectors' => [
1683	'{{WRAPPER}} .ui-e-field-group:not(.ui-e-field-type-file) .ui-e-field:not(.ui-e-field-select)' => 'background-color: {{VALUE}};',
1684	'{{WRAPPER}} .ui-e-field-group .ui-e-field-select select' => 'background-color: {{VALUE}};',
1685	],
1686	]
1687	);
1688	$this->add_group_control(
1689	Group_Control_Border::get_type(),
1690	[
1691	'name' => 'field_border',
1692	'selector' =>
1693	'{{WRAPPER}} .ui-e-field-group:not(.ui-e-field-type-file) .ui-e-field:not(.ui-e-field-select),
1694	{{WRAPPER}} .ui-e-field-group .ui-e-field-select select',
1695	]
1696	);
1697
1698	$this->end_controls_tab();
1699
1700	$this->start_controls_tab(
1701	'field_hover_tab',
1702	[
1703	'label' => esc_html__( 'Hover', 'uicore-elements' ),
1704	]
1705	);
1706
1707	$this->add_control(
1708	'field_text_hover_color',
1709	[
1710	'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1711	'type' => Controls_Manager::COLOR,
1712	'selectors' => [
1713	'{{WRAPPER}} .ui-e-field-group:hover .ui-e-field, {{WRAPPER}} .ui-e-field-group:hover .ui-e-field-select select' => 'color: {{VALUE}};',
1714	],
1715	'global' => [
1716	'default' => Global_Colors::COLOR_TEXT,
1717	],
1718	]
1719	);
1720	$this->add_control(
1721	'field_placeholder_hover_color',
1722	[
1723	'label' => esc_html__( 'Placeholder Color', 'uicore-elements' ),
1724	'type' => Controls_Manager::COLOR,
1725	'selectors' => [
1726	'{{WRAPPER}} .ui-e-field-group:hover .ui-e-field::placeholder' => 'color: {{VALUE}};',
1727	],
1728	'global' => [
1729	'default' => Global_Colors::COLOR_TEXT,
1730	],
1731	]
1732	);
1733	$this->add_control(
1734	'field_background_hover_color',
1735	[
1736	'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1737	'type' => Controls_Manager::COLOR,
1738	'default' => '#ffffff',
1739	'selectors' => [
1740	'{{WRAPPER}} .ui-e-field-group:hover:not(.ui-e-field-type-file) .ui-e-field:not(.ui-e-field-select)' => 'background-color: {{VALUE}};',
1741	'{{WRAPPER}} .ui-e-field-group:hover .ui-e-field-select select' => 'background-color: {{VALUE}};',
1742	],
1743	]
1744	);
1745	$this->add_group_control(
1746	Group_Control_Border::get_type(),
1747	[
1748	'name' => 'field_hover_border',
1749	'selector' =>
1750	'{{WRAPPER}} .ui-e-field-group:hover:not(.ui-e-field-type-file) .ui-e-field:not(.ui-e-field-select),
1751	{{WRAPPER}} .ui-e-field-group:hover .ui-e-field-select select',
1752	]
1753	);
1754
1755	$this->end_controls_tab();
1756
1757	$this->start_controls_tab(
1758	'field_active_tab',
1759	[
1760	'label' => esc_html__( 'Active', 'uicore-elements' ),
1761	]
1762	);
1763
1764	$this->add_control(
1765	'field_text_active_color',
1766	[
1767	'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1768	'type' => Controls_Manager::COLOR,
1769	'selectors' => [
1770	'{{WRAPPER}} .ui-e-field-group .ui-e-field:focus, {{WRAPPER}} .ui-e-field-group .ui-e-field-select select:focus' => 'color: {{VALUE}};',
1771	],
1772	'global' => [
1773	'default' => Global_Colors::COLOR_TEXT,
1774	],
1775	]
1776	);
1777	$this->add_control(
1778	'field_background_active_color',
1779	[
1780	'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1781	'type' => Controls_Manager::COLOR,
1782	'default' => '#ffffff',
1783	'selectors' => [
1784	'{{WRAPPER}} .ui-e-field-group:not(.ui-e-field-type-file) .ui-e-field:focus:not(.ui-e-field-select)' => 'background-color: {{VALUE}};',
1785	'{{WRAPPER}} .ui-e-field-group .ui-e-field-select:focus select' => 'background-color: {{VALUE}};',
1786	],
1787	]
1788	);
1789	$this->add_group_control(
1790	Group_Control_Border::get_type(),
1791	[
1792	'name' => 'field_active_border',
1793	'selector' =>
1794	'{{WRAPPER}} .ui-e-field-group:not(.ui-e-field-type-file) .ui-e-field:focus:not(.ui-e-field-select),
1795	{{WRAPPER}} .ui-e-field-group .ui-e-field-select:focus select',
1796	]
1797	);
1798
1799	$this->end_controls_tab();
1800
1801	$this->end_controls_tabs();
1802
1803	$this->add_control(
1804	'field_border_radius',
1805	[
1806	'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
1807	'type' => Controls_Manager::DIMENSIONS,
1808	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1809	'selectors' => [
1810	'{{WRAPPER}} .ui-e-field-group:not(.ui-e-field-type-file) .ui-e-field:not(.ui-e-field-select)' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1811	'{{WRAPPER}} .ui-e-field-group .ui-e-field-select select' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1812	],
1813	'separator' => 'before'
1814	]
1815	);
1816	$this->add_control(
1817	'field_padding',
1818	[
1819	'label' => esc_html__( 'Padding', 'uicore-elements' ),
1820	'type' => Controls_Manager::DIMENSIONS,
1821	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1822	'selectors' => [
1823	'{{WRAPPER}} .ui-e-field-group:not(.ui-e-field-type-file) .ui-e-field:not(.ui-e-field-select)' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1824	'{{WRAPPER}} .ui-e-field-group .ui-e-field-select select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1825	],
1826	]
1827	);
1828
1829	$this->end_controls_section();
1830
1831	$this->start_controls_section(
1832	'section_button_style',
1833	[
1834	'label' => esc_html__( 'Button', 'uicore-elements' ),
1835	'tab' => Controls_Manager::TAB_STYLE,
1836	]
1837	);
1838
1839	$this->add_group_control(
1840	Group_Control_Typography::get_type(),
1841	[
1842	'name' => 'button_typography',
1843	'global' => [
1844	'default' => Global_Typography::TYPOGRAPHY_ACCENT,
1845	],
1846	'selector' => '{{WRAPPER}} .elementor-button',
1847	]
1848	);
1849	$this->add_group_control(
1850	Group_Control_Border::get_type(), [
1851	'name' => 'button_border',
1852	'selector' => '{{WRAPPER}} .elementor-button',
1853	'exclude' => [
1854	'color',
1855	],
1856	]
1857	);
1858
1859	$this->start_controls_tabs( 'tabs_button_style' );
1860
1861	$this->start_controls_tab(
1862	'tab_button_normal',
1863	[
1864	'label' => esc_html__( 'Normal', 'uicore-elements' ),
1865	]
1866	);
1867
1868	$this->add_control(
1869	'button_background_color',
1870	[
1871	'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1872	'type' => Controls_Manager::COLOR,
1873	'global' => [
1874	'default' => Global_Colors::COLOR_ACCENT,
1875	],
1876	'selectors' => [
1877	'{{WRAPPER}} .e-form__buttons__wrapper__button-next' => 'background-color: {{VALUE}};',
1878	'{{WRAPPER}} .elementor-button[type="submit"]' => 'background-color: {{VALUE}};',
1879	],
1880	]
1881	);
1882	$this->add_control(
1883	'button_text_color',
1884	[
1885	'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1886	'type' => Controls_Manager::COLOR,
1887	'default' => '#ffffff',
1888	'selectors' => [
1889	'{{WRAPPER}} .e-form__buttons__wrapper__button-next' => 'color: {{VALUE}};',
1890	'{{WRAPPER}} .elementor-button[type="submit"]' => 'color: {{VALUE}};',
1891	'{{WRAPPER}} .elementor-button[type="submit"] svg *' => 'fill: {{VALUE}};',
1892	],
1893	]
1894	);
1895	$this->add_control(
1896	'button_border_color',
1897	[
1898	'label' => esc_html__( 'Border Color', 'uicore-elements' ),
1899	'type' => Controls_Manager::COLOR,
1900	'default' => '',
1901	'selectors' => [
1902	'{{WRAPPER}} .e-form__buttons__wrapper__button-next' => 'border-color: {{VALUE}};',
1903	'{{WRAPPER}} .elementor-button[type="submit"]' => 'border-color: {{VALUE}};',
1904	],
1905	'condition' => [
1906	'button_border_border!' => '',
1907	],
1908	]
1909	);
1910
1911	$this->end_controls_tab();
1912
1913	$this->start_controls_tab(
1914	'tab_button_hover',
1915	[
1916	'label' => esc_html__( 'Hover', 'uicore-elements' ),
1917	]
1918	);
1919
1920	$this->add_control(
1921	'button_background_hover_color',
1922	[
1923	'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1924	'type' => Controls_Manager::COLOR,
1925	'default' => '',
1926	'selectors' => [
1927	'{{WRAPPER}} .e-form__buttons__wrapper__button-next:hover' => 'background-color: {{VALUE}};',
1928	'{{WRAPPER}} .elementor-button[type="submit"]:hover' => 'background-color: {{VALUE}};',
1929	],
1930	]
1931	);
1932	$this->add_control(
1933	'button_hover_color',
1934	[
1935	'label' => esc_html__( 'Text Color', 'uicore-elements' ),
1936	'type' => Controls_Manager::COLOR,
1937	'default' => '#ffffff',
1938	'selectors' => [
1939	'{{WRAPPER}} .e-form__buttons__wrapper__button-next:hover' => 'color: {{VALUE}};',
1940	'{{WRAPPER}} .elementor-button[type="submit"]:hover' => 'color: {{VALUE}};',
1941	'{{WRAPPER}} .elementor-button[type="submit"]:hover svg *' => 'fill: {{VALUE}};',
1942	],
1943	]
1944	);
1945	$this->add_control(
1946	'button_hover_border_color',
1947	[
1948	'label' => esc_html__( 'Border Color', 'uicore-elements' ),
1949	'type' => Controls_Manager::COLOR,
1950	'default' => '',
1951	'selectors' => [
1952	'{{WRAPPER}} .e-form__buttons__wrapper__button-next:hover' => 'border-color: {{VALUE}};',
1953	'{{WRAPPER}} .elementor-button[type="submit"]:hover' => 'border-color: {{VALUE}};',
1954	],
1955	'condition' => [
1956	'button_border_border!' => '',
1957	],
1958	]
1959	);
1960	$this->add_control(
1961	'hover_transition_duration',
1962	[
1963	'label' => esc_html__( 'Transition Duration', 'uicore-elements' ),
1964	'type' => Controls_Manager::SLIDER,
1965	'size_units' => [ 's', 'ms', 'custom' ],
1966	'default' => [
1967	'unit' => 'ms',
1968	],
1969	'selectors' => [
1970	'{{WRAPPER}} .e-form__buttons__wrapper__button-previous' => 'transition-duration: {{SIZE}}{{UNIT}};',
1971	'{{WRAPPER}} .e-form__buttons__wrapper__button-next' => 'transition-duration: {{SIZE}}{{UNIT}};',
1972	'{{WRAPPER}} .elementor-button[type="submit"] svg *' => 'transition-duration: {{SIZE}}{{UNIT}};',
1973	'{{WRAPPER}} .elementor-button[type="submit"]' => 'transition-duration: {{SIZE}}{{UNIT}};',
1974	],
1975	]
1976	);
1977	$this->add_control(
1978	'button_hover_animation',
1979	[
1980	'label' => esc_html__( 'Animation', 'uicore-elements' ),
1981	'type' => Controls_Manager::HOVER_ANIMATION,
1982	]
1983	);
1984
1985	$this->end_controls_tab();
1986
1987	$this->end_controls_tabs();
1988
1989	$this->add_control(
1990	'button_border_radius',
1991	[
1992	'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
1993	'type' => Controls_Manager::DIMENSIONS,
1994	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1995	'selectors' => [
1996	'{{WRAPPER}} .elementor-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1997	],
1998	'separator' => 'before',
1999	]
2000	);
2001
2002	$this->add_control(
2003	'button_text_padding',
2004	[
2005	'label' => esc_html__( 'Text Padding', 'uicore-elements' ),
2006	'type' => Controls_Manager::DIMENSIONS,
2007	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
2008	'selectors' => [
2009	'{{WRAPPER}} .elementor-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2010	],
2011	]
2012	);
2013
2014	$this->end_controls_section();
2015
2016	$this->start_controls_section(
2017	'section_messages_style',
2018	[
2019	'label' => esc_html__( 'Messages', 'uicore-elements' ),
2020	'tab' => Controls_Manager::TAB_STYLE,
2021	]
2022	);
2023
2024	$this->add_control(
2025	'show_messages',
2026	[
2027	'label' => esc_html__( 'Show/Hide messages', 'uicore-elements' ),
2028	'type' => Controls_Manager::BUTTON,
2029	'separator' => 'before',
2030	'text' => esc_html__( 'Toggle', 'uicore-elements' ),
2031	'event' => 'ui-e-form-show-messages',
2032	]
2033	);
2034	$this->add_group_control(
2035	Group_Control_Typography::get_type(),
2036	[
2037	'name' => 'message_typography',
2038	'global' => [
2039	'default' => Global_Typography::TYPOGRAPHY_TEXT,
2040	],
2041	'selector' => '{{WRAPPER}} .ui-e-message',
2042	]
2043	);
2044	$this->add_control(
2045	'success_message_color',
2046	[
2047	'label' => esc_html__( 'Success Message Color', 'uicore-elements' ),
2048	'type' => Controls_Manager::COLOR,
2049	'default' => '#4CAF50',
2050	'selectors' => [
2051	'{{WRAPPER}} .ui-e-message span.success' => 'color: {{COLOR}};',
2052	],
2053	]
2054	);
2055	$this->add_control(
2056	'error_message_color',
2057	[
2058	'label' => esc_html__( 'Error Message Color', 'uicore-elements' ),
2059	'type' => Controls_Manager::COLOR,
2060	'default' => '#F44336',
2061	'selectors' => [
2062	'{{WRAPPER}} .ui-e-message span.error' => 'color: {{COLOR}};',
2063	],
2064	]
2065	);
2066
2067	$this->end_controls_section();
2068	}
2069	function recaptcha_js()
2070	{
2071	?>
2072	<script>
2073	window.uicore_elements_recaptcha = '<?php echo esc_html( get_option('uicore_elements_recaptcha_site_key')); ?>';
2074	</script>
2075	<?php
2076	}
2077
2078	protected function render() {
2079
2080	$instance = $this->get_settings_for_display();
2081	$is_recaptcha_required = false;
2082
2083	// Save widget settings so form API can retrieve them
2084	set_transient('ui_e_form_widget_settings_' . $this->get_id(), $instance, DAY_IN_SECONDS);
2085
2086	// Render Form Atts
2087	$this->add_render_attribute(
2088	[
2089	'wrapper' => [
2090	'class' => [
2091	'ui-e-fields-wrp',
2092	],
2093	],
2094	'submit-group' => [
2095	'class' => [
2096	'ui-e-field-group',
2097	'elementor-column',
2098	'ui-e-field-type-submit',
2099	],
2100	],
2101	'button' => [
2102	'class' => 'elementor-button',
2103	],
2104	'icon-align' => [
2105	'class' => [
2106	empty( $instance['button_icon_align'] ) ? '' : 'ui-e-icon ui-e-align-' . $instance['button_icon_align'],
2107	],
2108	],
2109	]
2110	);
2111
2112	// Fallback for empty control values
2113	if ( empty( $instance['button_width'] ) ) {
2114	$instance['button_width'] = '100';
2115	}
2116
2117	// Button atts
2118	$this->add_render_attribute( 'submit-group', 'class', 'elementor-col-' . $instance['button_width'] . ' e-form__buttons' );
2119
2120	if ( ! empty( $instance['button_width_tablet'] ) ) {
2121	$this->add_render_attribute( 'submit-group', 'class', 'elementor-md-' . $instance['button_width_tablet'] );
2122	}
2123	if ( ! empty( $instance['button_width_mobile'] ) ) {
2124	$this->add_render_attribute( 'submit-group', 'class', 'elementor-sm-' . $instance['button_width_mobile'] );
2125	}
2126	if ( $instance['button_hover_animation'] ) {
2127	$this->add_render_attribute( 'button', 'class', 'elementor-animation-' . $instance['button_hover_animation'] );
2128	}
2129
2130	// Form atts
2131	if ( ! empty( $instance['form_id'] ) ) {
2132	$this->add_render_attribute( 'form', 'id', $instance['form_id'] );
2133	}
2134	if ( ! empty( $instance['form_name'] ) ) {
2135	$this->add_render_attribute( 'form', 'name', $instance['form_name'] );
2136	}
2137	if ( 'no' === $instance['form_validation'] ) {
2138	$this->add_render_attribute( 'form', 'novalidate' );
2139	}
2140	if ( ! empty( $instance['button_css_id'] ) ) {
2141	$this->add_render_attribute( 'button', 'id', $instance['button_css_id'] );
2142	}
2143
2144	$referer_title = trim( wp_title( '', false ) );
2145	if ( ! $referer_title && is_home() ) {
2146	$referer_title = get_option( 'blogname' );
2147	}
2148
2149	// Get default messages
2150	$messages = Contact_Form_Service::get_default_messages();
2151
2152	// Set frontend validation message
2153	$front_msg_required = isset($instance['required_fields_message'])
2154	? $instance['required_fields_message']
2155	: $messages['required'];
2156	?>
2157
2158	<form class="ui-e-form" method="post" <?php $this->print_render_attribute_string( 'form' ); ?>>
2159
2160	<input type="hidden" name="post_id" value="<?php echo esc_attr( get_the_ID()); ?>"/>
2161	<input type="hidden" name="widget_type" value="contact-form">
2162
2163	<input type="hidden" name="required_fields_message" value="<?php echo esc_html($front_msg_required);?>">
2164
2165	<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
2166
2167	<?php foreach ( $instance['form_fields'] as $item_index => $item ) :
2168	$this->form_fields_render_attributes( $item_index, $instance, $item );
2169
2170	$field_type = $item['field_type'];
2171
2172	if( $field_type === 'recaptcha' \|\| $field_type === 'recaptcha_v3' ){
2173	$is_recaptcha_required = true;
2174	}
2175
2176	$print_label = ! in_array( $item['field_type'], [ 'hidden', 'html' ], true );
2177	?>
2178
2179	<div <?php $this->print_render_attribute_string( 'field-group' . $item_index ); ?>>
2180	<?php
2181	// Print label (excepts if recaptcha)
2182	if ( $print_label && $item['field_label'] && $item['field_type'] !== 'recaptcha' && $item['field_type'] !== 'recaptcha_v3' ){
2183	?>
2184	<label <?php $this->print_render_attribute_string( 'label' . $item_index ); ?>>
2185	<?php // PHPCS - the variable $item['field_label'] is safe.
2186	echo $item['field_label']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
2187	</label>
2188	<?php
2189	}
2190
2191	// Print field
2192	switch ( $item['field_type'] ) :
2193	case 'html':
2194	echo do_shortcode( $item['field_html'] );
2195	break;
2196
2197	case 'textarea':
2198	// PHPCS - the method build_textarea_field is safe.
2199	echo $this->build_textarea_field( $item, $item_index ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2200	break;
2201
2202	case 'select':
2203	// PHPCS - the method build_select_field is safe.
2204	echo $this->build_select_field( $item, $item_index ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2205	break;
2206
2207	case 'acceptance':
2208	// PHPCS - the method build_select_field is safe.
2209	echo $this->build_acceptance_field( $item, $item_index); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2210	break;
2211
2212	case 'radio':
2213	case 'checkbox':
2214	// PHPCS - the method build_radio_checkbox_field is safe.
2215	echo $this->build_radio_checkbox_field( $item, $item_index, $item['field_type'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2216	break;
2217
2218	case 'address': // is actually honeypot
2219	// PHPCS - the method build_honeypot_field is safe.
2220	echo $this->build_honeypot_field( $item, $item_index ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2221	break;
2222
2223	case 'recaptcha':
2224	// get widget ID
2225	echo '<input type="hidden" name="recaptcha"/> <div id="ui-e-recaptcha-'.esc_attr($this->get_ID()).'"></div>';
2226	break;
2227
2228	case 'recaptcha_v3':
2229	echo '<input type="hidden" name="recaptcha_v3"/>';
2230	break;
2231
2232	// All other cases are covered by the add_render_atribute()
2233	default:
2234	$this->add_render_attribute('input' . $item_index, 'class', 'ui-e-field-textual');
2235	?>
2236	<input size="1" <?php $this->print_render_attribute_string( 'input' . $item_index ); ?>>
2237	<?php
2238	break;
2239
2240	endswitch;
2241	?>
2242	</div>
2243
2244	<?php endforeach; ?>
2245
2246	<div <?php $this->print_render_attribute_string( 'submit-group' ); ?>>
2247	<button type="submit" <?php $this->print_render_attribute_string( 'button' ); ?>>
2248	<span <?php $this->print_render_attribute_string( 'content-wrapper' ); ?>>
2249	<?php if ( ! empty( $instance['button_icon'] ) \|\| ! empty( $instance['selected_button_icon'] ) ) : ?>
2250	<span <?php $this->print_render_attribute_string( 'icon-align' ); ?>>
2251	<?php Icons_Manager::render_icon( $instance['selected_button_icon'], [ 'aria-hidden' => 'true' ] ); ?>
2252	<?php if ( empty( $instance['button_text'] ) ) : ?>
2253	<span class="elementor-screen-only"><?php echo esc_html__( 'Submit', 'uicore-elements' ); ?></span>
2254	<?php endif; ?>
2255	</span>
2256	<?php endif; ?>
2257	<?php if ( ! empty( $instance['button_text'] ) ) : ?>
2258	<span class="ui-e-text"><?php $this->print_unescaped_setting( 'button_text' ); ?></span>
2259	<?php endif; ?>
2260	</span>
2261	</button>
2262	</div>
2263
2264	</div>
2265
2266	<div class="ui-e-message <?php echo $this->is_edit_mode() ? 'elementor-hidden' : ''; ?>">
2267	<?php if($this->is_edit_mode()) :
2268	// Get custom messages if set, else use default
2269	$success = isset($instance['success_message'])
2270	? $instance['success_message']
2271	: $messages['success'];
2272	$error = isset($instance['error_message'])
2273	? $instance['error_message']
2274	: $messages['error'];
2275	?>
2276	<span class="success"> <?php echo esc_html($success);?> </span> <br>
2277	<span class="error"> <?php echo esc_html($error);?> </span>
2278	<?php endif; ?>
2279	</div>
2280	</form>
2281	<?php
2282
2283	//add js to footer if recaptcha is enabled
2284	if($is_recaptcha_required){
2285	add_action('wp_footer', [$this, 'recaptcha_js'], 999);
2286	}
2287
2288	// Add frontend validation messages to js var
2289	?>
2290	<script>
2291	window.ui_e_form_validation_messages = <?php echo json_encode([
2292	'required_fields' => esc_html($front_msg_required),
2293	]); ?>;
2294	</script>
2295	<?php
2296	}
2297	protected function content_template() {
2298	?>
2299	<#
2300	view.addRenderAttribute(
2301	'form',
2302	{
2303	'id': settings.form_id,
2304	'name': settings.form_name,
2305	}
2306	);
2307	if ( 'no' === settings.form_validation ) {
2308	view.addRenderAttribute( 'form', 'novalidate' );
2309	}
2310	#>
2311	<form class="ui-e-form" {{{ view.getRenderAttributeString( 'form' ) }}}>
2312	<div class="ui-e-fields-wrp">
2313	<#
2314	for ( var i in settings.form_fields ) {
2315	var item = settings.form_fields[ i ];
2316	item.field_type = _.escape( item.field_type );
2317	item.field_value = _.escape( item.field_value );
2318
2319	var options = item.field_options ? item.field_options.split( '\n' ) : [],
2320	itemClasses = _.escape( item.css_classes ),
2321	labelVisibility = '',
2322	placeholder = '',
2323	required = '',
2324	checked_by_default = '',
2325	inputField = '',
2326	multiple = '',
2327	fieldGroupClasses = 'ui-e-field-group elementor-column ui-e-field-type-' + item.field_type,
2328	printLabel = settings.show_labels && ! [ 'hidden', 'html', 'recaptcha', 'recaptcha_v3' ].includes( item.field_type );
2329
2330	fieldGroupClasses += ' elementor-col-' + ( ( '' !== item.width ) ? item.width : '100' );
2331
2332	if ( item.width_tablet ) {
2333	fieldGroupClasses += ' elementor-md-' + item.width_tablet;
2334	}
2335
2336	if ( item.width_mobile ) {
2337	fieldGroupClasses += ' elementor-sm-' + item.width_mobile;
2338	}
2339
2340	if ( item.required ) {
2341	required = 'required';
2342	fieldGroupClasses += ' ui-e-field-required';
2343
2344	if ( settings.mark_required ) {
2345	fieldGroupClasses += ' ui-e-required';
2346	}
2347	}
2348
2349	if ( item.placeholder ) {
2350	placeholder = 'placeholder="' + _.escape( item.placeholder ) + '"';
2351	}
2352
2353	if ( item.allow_multiple ) {
2354	multiple = ' multiple';
2355	fieldGroupClasses += ' ui-e-field-type-' + item.field_type + '-multiple';
2356	}
2357
2358	switch ( item.field_type ) {
2359	case 'html':
2360	inputField = item.field_html;
2361	break;
2362
2363	case 'textarea':
2364	inputField = '<textarea class="ui-e-field ui-e-field-textual elementor-size-' + settings.input_size + ' ' + itemClasses + '" name="form_field_' + i + '" id="form_field_' + i + '" rows="' + item.rows + '" ' + required + ' ' + placeholder + '>' + item.field_value + '</textarea>';
2365	break;
2366
2367	case 'select':
2368	if ( options ) {
2369	var size = '';
2370	if ( item.allow_multiple && item.select_size ) {
2371	size = ' size="' + item.select_size + '"';
2372	}
2373	inputField = '<div class="ui-e-field ui-e-field-select ui-e-field-subgroup' + itemClasses + '">';
2374	inputField += '<select class="ui-e-field-textual" name="form_field_' + i + '" id="form_field_' + i + '" ' + required + multiple + size + ' >';
2375	for ( var x in options ) {
2376	var option_value = options[ x ];
2377	var option_label = options[ x ];
2378	var option_id = 'form_field_option' + i + x;
2379
2380	if ( options[ x ].indexOf( '\|' ) > -1 ) {
2381	var label_value = options[ x ].split( '\|' );
2382	option_label = label_value[0];
2383	option_value = label_value[1];
2384	}
2385
2386	view.addRenderAttribute( option_id, 'value', option_value );
2387	if ( item.field_value.split( ',' ) .indexOf( option_value ) ) {
2388	view.addRenderAttribute( option_id, 'selected', 'selected' );
2389	}
2390	inputField += '<option ' + view.getRenderAttributeString( option_id ) + '>' + option_label + '</option>';
2391	}
2392	inputField += '</select></div>';
2393	}
2394	break;
2395
2396	case 'radio':
2397	case 'checkbox':
2398	if ( options ) {
2399	var multiple = '';
2400
2401	if ( 'checkbox' === item.field_type && options.length > 1 ) {
2402	multiple = '[]';
2403	}
2404
2405	inputField = '<div class="ui-e-field-subgroup ' + itemClasses + ' ' + _.escape( item.inline_list ) + '">';
2406
2407	for ( var x in options ) {
2408	var option_value = options[ x ];
2409	var option_label = options[ x ];
2410	var option_id = 'form_field_' + item.field_type + i + x;
2411	if ( options[x].indexOf( '\|' ) > -1 ) {
2412	var label_value = options[x].split( '\|' );
2413	option_label = label_value[0];
2414	option_value = label_value[1];
2415	}
2416
2417	view.addRenderAttribute( option_id, {
2418	value: option_value,
2419	type: item.field_type,
2420	id: 'form_field_' + i + '-' + x,
2421	name: 'form_field_' + i + multiple
2422	} );
2423
2424	if ( option_value === item.field_value ) {
2425	view.addRenderAttribute( option_id, 'checked', 'checked' );
2426	}
2427
2428	inputField += '<span class="ui-e-field-option"><input ' + view.getRenderAttributeString( option_id ) + ' ' + required + '> ';
2429	inputField += '<label for="form_field_' + i + '-' + x + '">' + option_label + '</label></span>';
2430
2431	}
2432
2433	inputField += '</div>';
2434	}
2435	break;
2436
2437	case 'acceptance' :
2438	var checked = '';
2439	if(item.checked_by_default == 'yes') {
2440	checked = ' checked';
2441	}
2442	inputField += '<div class="ui-e-field-subgroup">';
2443	inputField += '<input type="checkbox" class="ui-e-field ui-e-acceptance-field" name="form_field_' + i + '" id="form_field_' + i + '" ' + required + checked + '>';
2444	inputField += '<label for="form_field_' + i + '">' + item.acceptance_text + '</label>';
2445	inputField += '</div>';
2446	break;
2447
2448	case 'recaptcha' :
2449	case 'recaptcha_v3' :
2450	inputField = '<input type="hidden" name="recaptcha"/> <div id="ui-e-recaptcha"></div>';
2451	break;
2452
2453	default:
2454	itemClasses = 'ui-e-field-textual ' + itemClasses;
2455	inputField = '<input size="1" type="' + item.field_type + '" value="' + item.field_value + '" class="ui-e-field elementor-size-' + settings.input_size + ' ' + itemClasses + '" name="form_field_' + i + '" id="form_field_' + i + '" ' + required + ' ' + placeholder + ' >';
2456	break;
2457	}
2458
2459	if ( inputField ) {
2460	#>
2461	<div class="{{ fieldGroupClasses }}">
2462
2463	<# if ( printLabel && item.field_label ) { #>
2464	<label class="ui-e-field-label" for="form_field_{{ i }}" {{{ labelVisibility }}}>{{{ item.field_label }}}</label>
2465	<# } #>
2466
2467	{{{ inputField }}}
2468	</div>
2469	<#
2470	}
2471	}
2472
2473
2474	var buttonClasses = 'ui-e-field-group elementor-column ui-e-field-type-submit e-form__buttons';
2475
2476	buttonClasses += ' elementor-col-' + ( ( '' !== settings.button_width ) ? settings.button_width : '100' );
2477
2478	if ( settings.button_width_tablet ) {
2479	buttonClasses += ' elementor-md-' + settings.button_width_tablet;
2480	}
2481
2482	if ( settings.button_width_mobile ) {
2483	buttonClasses += ' elementor-sm-' + settings.button_width_mobile;
2484	}
2485
2486	var iconHTML = elementor.helpers.renderIcon( view, settings.selected_button_icon, { 'aria-hidden': true }, 'i' , 'object' )
2487	#>
2488
2489	<div class="{{ buttonClasses }}">
2490	<button id="{{ settings.button_css_id }}" type="submit" class="elementor-button elementor-animation-{{ settings.button_hover_animation }}">
2491	<span>
2492	<# if ( settings.button_icon \|\| settings.selected_button_icon ) { #>
2493	<span class="ui-e-icon ui-e-align-{{ settings.button_icon_align }}">
2494	<# if ( iconHTML && iconHTML.rendered && ( ! settings.button_icon ) ) { #>
2495	{{{ iconHTML.value }}}
2496	<# } else { #>
2497	<i class="{{ settings.button_icon }}" aria-hidden="true"></i>
2498	<# } #>
2499	<span class="elementor-screen-only"><?php echo esc_html__( 'Submit', 'uicore-elements' ); ?></span>
2500	</span>
2501	<# } #>
2502
2503	<# if ( settings.button_text ) { #>
2504	<span class="ui-e-text">{{{ settings.button_text }}}</span>
2505	<# } #>
2506	</span>
2507	</button>
2508	</div>
2509	</div>
2510	<div class="ui-e-message elementor-hidden">
2511	<#
2512	const success = settings.success_message;
2513	const error = settings.error_message;
2514	#>
2515	<span class="success">{{{ success }}}</span> <br>
2516	<span class="error">{{{ error }}}</span>
2517	</div>
2518	</form>
2519	<?php
2520	}
2521	}
2522	\Elementor\Plugin::instance()->widgets_manager->register(new ContactForm());