html-admin-page-builder.php — Everest Forms – Contact Form, Payment Form, Quiz, Survey & Custom Form Builder with AI 3.5.2

everest-forms / includes / admin / views / html-admin-page-builder.php

everest-forms / includes / admin / views Last commit date

html-admin-page-builder.php

190 lines

1	<?php
2	/**
3	* Admin View: Builder
4	*
5	* @package EverestForms/Admin/Builder
6	*/
7
8	defined( 'ABSPATH' ) \|\| exit;
9
10	$form_data['form_field_id'] = isset( $form_data['form_field_id'] ) ? $form_data['form_field_id'] : 0;
11	$form_data['form_enabled'] = isset( $form_data['form_enabled'] ) ? $form_data['form_enabled'] : 1;
12
13	// Get tabs for the builder panel.
14	$tabs = apply_filters( 'everest_forms_builder_tabs_array', array() ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride
15
16	// Get preview link.
17	$preview_link = add_query_arg(
18	array(
19	'form_id' => absint( $form_data['id'] ),
20	'evf_preview' => 'true',
21	),
22	home_url()
23	);
24
25	?>
26	<div id="everest-forms-builder" class="everest-forms">
27	<div class="everest-forms-overlay">
28	<div class="everest-forms-overlay-content">
29	<svg id="eUYBWjcnFJs1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
30	<style>
31	<![CDATA[
32	#eUYBWjcnFJs5_ts {
33	animation: eUYBWjcnFJs5_ts__ts 2000ms linear infinite normal forwards
34	}
35
36	@keyframes eUYBWjcnFJs5_ts__ts {
37	0% {
38	transform: translate(250.000015px, 185.300003px) scale(1, 1)
39	}
40
41	50% {
42	transform: translate(250.000015px, 185.300003px) scale(0.8, 0.8)
43	}
44
45	100% {
46	transform: translate(250.000015px, 185.300003px) scale(1, 1)
47	}
48	}
49	]]>
50	</style>
51	<g transform="translate(1.439678 0)">
52	<text dx="0" dy="0" font-family=""eUYBWjcnFJs1:::Montserrat"" font-size="72" font-weight="600" transform="translate(97.506642 430.341)">
53	<tspan y="0" font-weight="600">
54	<![CDATA[
55
56	Loading
57
58	]]>
59	</tspan>
60	</text>
61	</g>
62	<g id="eUYBWjcnFJs5_ts" transform="translate(250.000015,185.300003) scale(1,1)">
63	<g transform="translate(-250.000015,-185.300003)">
64	<path d="M249.9,324c76.7.1,138.8-62.1,138.8-138.8-.1-75.4-63.2-138.5-138.6-138.6-76.7-.1-138.8,62.1-138.8,138.8.1,75.5,63.2,138.6,138.6,138.6Z" fill="#fff" />
65	<g>
66	<path d="M294.3,127.2h-28.2l8.6,14.5h28.2l-8.6-14.5Z" fill="#5317aa" />
67	<path d="M312,156.3h-28.2l9.1,14.5h28.2L312,156.3Z" fill="#5317aa" />
68	<path d="M311.5,229h-4.1-12.7-90.4l45-73.6l18.6,30h-4.1-14.5l-8.6,14.5h8.6h5.9h38.6l-44.5-71.8-70.9,115.4h12.7h116.3h13.2L311.5,229Z" fill="#5317aa" />
69	</g>
70	</g>
71	</g>
72	<style>
73	<![CDATA[
74	@font-face {
75	font-family: 'eUYBWjcnFJs1:::Montserrat';
76	font-style: normal;
77	font-weight: 600;
78	src: url(data:font/ttf;charset=utf-8;base64,AAEAAAAQAQAABAAAR0RFRgBWABEAAAGcAAAALkdQT1OPoJfgAAAEFAAAANhHU1VCs4qymAAAA0AAAADUT1MvMnexXi0AAAJ8AAAAYFNUQVTlkMwZAAACOAAAAERjbWFwAUsB8QAAAtwAAABkZ2FzcAAAABAAAAEUAAAACGdseWZ7qpc2AAAHSAAAAyRoZWFkGGyzDAAAAgAAAAA2aGhlYQlxAj0AAAF4AAAAJGhtdHgW6wM2AAABzAAAADJsb2NhBZ8GhQAAARwAAAAcbWF4cAAhALUAAAE4AAAAIG5hbWUyuFzpAAAE7AAAAlpwb3N0/58AMgAAAVgAAAAgcHJlcGgGjIUAAAEMAAAAB7gB/4WwBI0AAAEAAf//AA8AAAAUACMAYQCdAOgA9AEAAQwBMgFkAWQBewGSAAEAAAANAFkABwBYAAkAAQAAAAAAAAAAAAAAAAADAAMAAwAAAAAAAP+cADIAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAADyP8FAAAGh/86/KQGbAABAAAAAAAAAAAAAAAAAAAADAABAAIAHgAAAAAAAAAOAAEAAgAAAAwAAAAMAAEAAAACAAIAAQAFAAEABwAJAAEAAAJLACgCVwBeAl8ALAKvACYCtgAmASEAQAEhAFIBIQBJAq0AUgKFACYBFAAAAAAA5QDcAAAAAQAAAAgAALdCCONfDzz1AAMD6AAAAADWC/5GAAAAAN2ccMT/Ov73BmwEKAAAAAYAAgAAAAAAAAABAAEACAACAAAAFAACAAAAJAACd2dodAEAAABpdGFsARMAAQAUAAQAAwABAAIBFAAAAAAAAQAAAAEAAAAAAQYCWAAAAAQCcgJYAAUAAAKKAlgAAABLAooCWAAAAV4AMgE2AAAAAAAAAAAAAAAAoAAC/0AAIHsAAAAAAAAAAFVMQQAAwAAA+wIDyP8FAAAEVQEOIAABlwAAAAACBQK8AAAAIAADAAAAAgAAAAMAAAAUAAMAAQAAABQABABQAAAAEAAQAAMAAAAgAEwAYQBkAGcAaQBv//8AAAAgAEwAYQBkAGcAaQBu////6v+1/6H/n/+d/5z/mgABAAAAAAAAAAAAAAAAAAAAAAABAAAACgB2ALQAA0RGTFQAYmN5cmwAXmxhdG4AFAAAAAVBWkUgAEJDUlQgADpLQVogADJUQVQgACpUUksgACIAAP//AAEABAAA//8AAQADAAD//wABAAIAAP//AAEAAQAA//8AAQAAAAAAAAAEAAAAAP//AAAABWxvY2wAOGxvY2wAMmxvY2wALGxvY2wAJmxvY2wAIAAAAAEAAgAAAAEAAQAAAAEAAAAAAAEAAwAAAAEABAAFAAwADAAMAAwADAABAAAAAQAIAAEABgACAAEAAQAFAAEAAAAKACoAOAADREZMVAAUY3lybAAUbGF0bgAUAAQAAAAA//8AAQAAAAFrZXJuAAgAAAABAAAAAQAEAAkACAABAAgAAQACAAAACAACAEwABAAAAHQAXAAFAAYAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAA//kAAAAAAAAAAAAAAAAAAAAA//sAAAAAAAEAAgACAAEABQAAAAcACQAFAAEAAQAJAAEABQACAAIABAAAAAMAAwACAAEAAQAJAAQAAQADAAAAAAAAAAAAAQACAAAADACWAAMAAQQJAAAAsAEUAAMAAQQJAAEAJgDuAAMAAQQJAAIADgDgAAMAAQQJAAMAOgCmAAMAAQQJAAQAJgDuAAMAAQQJAAUAGgCMAAMAAQQJAAYAJgBmAAMAAQQJAA4ANAAyAAMAAQQJAQAADAAmAAMAAQQJAQYAEAAWAAMAAQQJARMADAAKAAMAAQQJARQACgAAAFIAbwBtAGEAbgBJAHQAYQBsAGkAYwBTAGUAbQBpAEIAbwBsAGQAVwBlAGkAZwBoAHQAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAE0AbwBuAHQAcwBlAHIAcgBhAHQALQBTAGUAbQBpAEIAbwBsAGQAVgBlAHIAcwBpAG8AbgAgADgALgAwADAAMAA4AC4AMAAwADAAOwBVAEwAQQA7AE0AbwBuAHQAcwBlAHIAcgBhAHQALQBTAGUAbQBpAEIAbwBsAGQAUgBlAGcAdQBsAGEAcgBNAG8AbgB0AHMAZQByAHIAYQB0ACAAUwBlAG0AaQBCAG8AbABkAEMAbwBwAHkAcgBpAGcAaAB0ACAAMgAwADEAMQAgAFQAaABlACAATQBvAG4AdABzAGUAcgByAGEAdAAgAFAAcgBvAGoAZQBjAHQAIABBAHUAdABoAG8AcgBzACAAKABoAHQAdABwAHMAOgAvAC8AZwBpAHQAaAB1AGIALgBjAG8AbQAvAEoAdQBsAGkAZQB0AGEAVQBsAGEALwBNAG8AbgB0AHMAZQByAHIAYQB0ACkAAAACACgAAAIjArwAAwAHAAAzESERJSERISgB+/5VAVv+pQK8/URGAjAAAQBeAAACTgK8AAUAADMRMxEhFV6CAW4CvP2ybgAAAgAs//kCEQIcABEAKQAAITUnNTQmIyIGByc2NjMyFhURBSImJjU0NjYzMxUjIgYVFBYzMjY3FwYGAZsHQkMtVx4xK3dAdH/+4jxaMStiUZuSQCw2MC5JEBUSXWwXvTc9HBlbISFvdP7HBylJLi1IKlMpHiIoKilLLzQAAAMAJv/5AlwC5gAPAB8AJgAABSImJjU0NjYzMhYWFRQGBicyNjY1NCYmIyIGBhUUFhYXNTcnETMRATRNe0ZGe01Daj48ajYtRysrRy0tRysrR88FCnwHRXpTU3pEO3heXXk8ayhMMzRLKChLNDNMKGR+jo4BTP0aAAMAJv83AmQCHAASACIAMgAABSImJzcWFjMyNjU1Nyc1MxEUBiciJiY1NDY2MzIWFhUUBgYnMjY2NTQmJiMiBgYVFBYWAURKjS04I2s3WFIKBHeUnEx7R0d7TERsQUFsMS9KKSlKLy9LKSlLySclXh0jUVFfeXmC/juRieFBdE5NdEA2cllZczdqJ0UtLUUlJUUtLUUn//8AQAAAAOEDBAImAAYAAAAHAAz/ZQAAAAEAUgAAAM8CFgADAAAzETMRUn0CFv3q//8ASQAAANgC+QImAAYAAAAHAAv/ZQAAAAEAUgAAAmACHAAWAAABMhYWFREjETQmIyIGBhURIxEzFSc2NgGBQGU6fUM8LEQlfXcVHGsCHDJnUf7OASJHRiRHNv7yAhaQLDM3AAACACb/+QJfAhwADwAfAAAFIiYmNTQ2NjMyFhYVFAYGJzI2NjU0JiYjIgYGFRQWFgFCUoBKSoBSU4FJSYFTLkgpKUgtLkcqKkcHR3xPUHtGRnpRT3xHayhMMzRLKChLNDNMKAAAAQDlAmsBcwL5AAsAAAEiJjU0NjMyFhUUBgEsHygoHx4pKQJrKB8fKCgfHygAAAEA3AJuAXwDBAALAAABIiY1NDYzMhYVFAYBLCMtLSMjLSwCbiwfICspHyEtAA==) format('truetype');
79	}
80	]]>
81	</style>
82	</svg>
83	</div>
84	</div>
85	<form id="everest-forms-builder-form" name="everest-forms-builder" method="post" data-id="<?php echo absint( $form_id ); ?>">
86	<input type="hidden" name="id" value="<?php echo absint( $form_id ); ?>">
87	<input type="hidden" name="form_enabled" value="<?php echo absint( $form_data['form_enabled'] ); ?>">
88	<input type="hidden" value="<?php echo absint( $form_data['form_field_id'] ); ?>" name="form_field_id" id="everest-forms-field-id">
89
90	<div class="everest-forms-nav-wrapper clearfix">
91	<nav class="nav-tab-wrapper evf-nav-tab-wrapper">
92	<div class="everest-forms-back-button-wrapper">
93	<a href="<?php echo esc_url( admin_url( 'admin.php?page=evf-builder' ) ); ?>" class="back-button">
94	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
95	<path d="M10.352 3.935a.917.917 0 0 1 1.296 1.297l-5.769 5.767 5.769 5.77a.916.916 0 1 1-1.296 1.296l-6.417-6.417a.917.917 0 0 1 0-1.296z"></path>
96	<path d="M17.416 10.083a.917.917 0 0 1 0 1.834H4.583a.917.917 0 0 1 0-1.834z"></path>
97	</svg>
98	</a>
99	</div>
100	<?php
101	foreach ( $tabs as $slug => $tab ) { // phpcs:ignore WordPress.WP.GlobalVariablesOverride
102	echo '<a href="#" class="evf-panel-' . esc_attr( $slug ) . '-button nav-tab ' . ( $current_tab === $slug ? 'nav-tab-active' : '' ) . '" data-panel="' . esc_attr( $slug ) . '"><span class="evf-nav-icon ' . esc_attr( $slug ) . '"></span>' . esc_html( $tab['label'] ) . '</a>';
103	}
104
105	do_action( 'everest_forms_builder_tabs' );
106	?>
107	</nav>
108	<div class="evf-forms-nav-right">
109	<a class="everest-forms-btn everest-forms-show-entries-btn" href="<?php echo esc_url( admin_url( 'admin.php?page=evf-entries&form_id=' . absint( $_GET['form_id'] ) ) ); ?>" rel="bookmark" target="_blank">
110	<div class="evf-nav-btn-container">
111	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
112	<path d="M8.66602 11.3333V6" stroke="#383838" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
113	<path d="M12 11.334V3.33398" stroke="#383838" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
114	<path d="M2 2V12.6667C2 13.0203 2.14048 13.3594 2.39052 13.6095C2.64057 13.8595 2.97971 14 3.33333 14H14" stroke="#383838" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
115	<path d="M5.33398 11.334V9.33398" stroke="#383838" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
116	</svg>
117	<?php esc_html_e( 'Entries', 'everest-forms' ); ?>
118	</div>
119	</a>
120	<div class="evf-shortcode-field">
121	<input type="text" class="large-text code" onfocus="this.select();" value="<?php printf( esc_html( '[everest_form id="%s"]' ), isset( $_GET['form_id'] ) ? absint( sanitize_text_field( wp_unslash( $_GET['form_id'] ) ) ) : 0 ); // phpcs:ignore WordPress.Security.NonceVerification ?>" id="evf-form-shortcode" readonly="readonly" />
122	<button id="copy-shortcode" class="everest-forms-btn help_tip dashicons copy-shortcode" href="#" data-tip="<?php esc_attr_e( 'Copy Shortcode!', 'everest-forms' ); ?>" data-copied="<?php esc_attr_e( 'Copied!', 'everest-forms' ); ?>">
123	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 25">
124	<path fill-rule="evenodd" d="M3.033 3.533c.257-.257.605-.4.968-.4h9A1.368 1.368 0 0 1 14.369 4.5v1a.632.632 0 0 0 1.263 0v-1a2.632 2.632 0 0 0-2.631-2.632H4A2.632 2.632 0 0 0 1.368 4.5v9A2.631 2.631 0 0 0 4 16.131h1a.632.632 0 0 0 0-1.263H4A1.368 1.368 0 0 1 2.631 13.5v-9c0-.363.144-.711.401-.968Zm6.598 7.968A1.37 1.37 0 0 1 11 10.132h9c.756 0 1.368.613 1.368 1.369v9c0 .755-.612 1.368-1.368 1.368h-9A1.368 1.368 0 0 1 9.63 20.5v-9ZM11 8.869A2.632 2.632 0 0 0 8.368 11.5v9A2.632 2.632 0 0 0 11 23.131h9a2.632 2.632 0 0 0 2.63-2.631v-9A2.632 2.632 0 0 0 20 8.87h-9Z" clip-rule="evenodd"/>
125	</svg>
126	<span class="screen-reader-text"><?php esc_html_e( 'Copy shortcode', 'everest-forms' ); ?></span>
127	</button>
128	</div>
129	<a class="everest-forms-btn everest-forms-preview-button" href="<?php echo esc_url( $preview_link ); ?>" rel="bookmark" target="_blank"><?php esc_html_e( 'Preview', 'everest-forms' ); ?></a>
130	<button name="embed_form" data-form_id="<?php echo esc_html( isset( $_GET['form_id'] ) ? absint( sanitize_text_field( wp_unslash( $_GET['form_id'] ) ) ) : 0 ); ?>" class="everest-forms-btn everest-forms-embed-button" type="button" value="<?php esc_attr_e( 'Embed', 'everest-forms' ); ?>"><?php esc_html_e( 'Embed', 'everest-forms' ); ?></button>
131	<button name="save_form" class="everest-forms-btn everest-forms-save-button" type="button" value="<?php esc_attr_e( 'Save', 'everest-forms' ); ?>"><?php esc_html_e( 'Save', 'everest-forms' ); ?></button>
132	</div>
133	</div>
134	<div class="evf-tab-content">
135	<?php foreach ( $tabs as $slug => $tab ) : // phpcs:ignore WordPress.WP.GlobalVariablesOverride ?>
136	<div id="everest-forms-panel-<?php echo esc_attr( $slug ); ?>" class="everest-forms-panel<?php echo $current_tab === $slug ? ' active' : ''; ?>">
137	<div class="everest-forms-panel-<?php echo $tab['sidebar'] ? 'sidebar-content' : 'full-content'; ?>">
138	<?php if ( $tab['sidebar'] ) : ?>
139	<div class="everest-forms-panel-sidebar">
140	<?php do_action( 'everest_forms_builder_sidebar_' . $slug ); ?>
141	<button id="evf-collapse" class="close">
142	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
143	<path fill="#6B6B6B" d="M16.5 22a1.003 1.003 0 0 1-.71-.29l-9-9a1 1 0 0 1 0-1.42l9-9a1.004 1.004 0 1 1 1.42 1.42L8.91 12l8.3 8.29A.999.999 0 0 1 16.5 22Z"/>
144	</svg>
145	</button>
146	</div>
147	<?php endif; ?>
148	<div class="panel-wrap everest-forms-panel-content-wrap">
149	<div class="everest-forms-panel-content">
150	<?php do_action( 'everest_forms_builder_content_' . $slug ); ?>
151	</div>
152	<?php do_action( 'everest_forms_builder_after_content_' . $slug ); ?>
153	</div>
154	</div>
155	</div>
156	<?php endforeach; ?>
157	<?php do_action( 'everest_forms_builder_output' ); ?>
158	</div>
159	</form>
160	</div>
161	<script type="text/html" id="tmpl-everest-forms-field-preview-choices">
162	<# if ( data.settings.choices_images ) { #>
163	<ul class="widefat primary-input everest-forms-image-choices">
164	<# _.each( data.order, function( choiceID, key ) { #>
165	<li class="everest-forms-image-choices-item<# if ( 1 === data.settings.choices[choiceID].default ) { print( ' everest-forms-selected' ); } #>">
166	<label>
167	<span class="everest-forms-image-choices-image">
168	<# if ( ! _.isEmpty( data.settings.choices[choiceID].image ) ) { #>
169	<img src="{{ data.settings.choices[choiceID].image }}" alt="{{ data.settings.choices[choiceID].label }}"<# if ( data.settings.choices[choiceID].label ) { #> title="{{ data.settings.choices[choiceID].label }}"<# } #>>
170	<# } else { #>
171	<img src="<?php echo esc_url( evf()->plugin_url() . '/assets/images/everest-forms-placeholder.png' ); ?>" alt="{{ data.settings.choices[choiceID].label }}"<# if ( data.settings.choices[choiceID].label ) { #> title="{{ data.settings.choices[choiceID].label }}"<# } #>>
172	<# } #>
173	</span>
174	<input type="{{ data.type }}" disabled<# if ( 1 === data.settings.choices[choiceID].default ) { print( ' checked' ); } #>>
175	<span class="everest-forms-image-choices-label">{{{ data.settings.choices[choiceID].label }}} <# if(( 'payment-checkbox' === data.settings.type ) \|\| ( 'payment-multiple' === data.settings.type )) { print ( ' - ' + data.amountFilter( evf_data, data.settings.choices[choiceID].value )) }#></span>
176	</label>
177	</li>
178	<# }) #>
179	</ul>
180	<# } else { #>
181	<ul class="widefat primary-input">
182	<# _.each( data.order, function( choiceID, key ) { #>
183	<li>
184	<input type="{{ data.type }}" disabled<# if ( 1 === data.settings.choices[choiceID].default ) { print( ' checked' ); } #>>{{{ data.settings.choices[choiceID].label }}} <# if(( 'payment-checkbox' === data.settings.type ) \|\| ( 'payment-multiple' === data.settings.type )) { print ( ' - ' + data.amountFilter( evf_data, data.settings.choices[choiceID].value )) }#>
185	</li>
186	<# }) #>
187	</ul>
188	<# } #>
189	</script>
190