hash-form / admin / styles / main.php

main.php in Hash Form – Drag & Drop Form Builder trunk, at admin/styles/main.php

1,025 lines 72.1 KB

Raw Download Zip

1	<?php
2	defined('ABSPATH') \|\| die();
3	/*
4	* A template, included from inside a class method - never loaded on its own.
5	* The variables below are locals of the method that includes it, not globals,
6	* which is what the prefix sniff assumes about a file-scope assignment.
7	*/
8	// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- included from within a method, so these are function locals.
9	$id = get_the_ID();
10	?>
11
12	<div class="hf-settings-row hf-form-row">
13	<label class="hf-setting-label"><?php esc_html_e('Choose Form to Preview', 'hash-form'); ?></label>
14	<select id="hf-template-preview-form-id">
15	<?php
16	// A chooser, so trashed templates' owners do not get offered
17	// forms they threw away.
18	$forms = HashFormBuilder::get_published_forms();
19	?>
20	<option value=""><?php esc_html_e('Default Demo Form', 'hash-form'); ?></option>
21	<?php
22	foreach ($forms as $form) {
23	?>
24	<option value="<?php echo esc_attr($form->id); ?>"><?php echo esc_html($form->name); ?></option>
25	<?php } ?>
26	</select>
27	</div>
28
29	<h2 class="hf-settings-heading"><?php esc_html_e('Form', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
30
31	<div class="hf-form-settings">
32	<div class="hf-settings-row">
33	<label class="hf-setting-label"><?php esc_html_e('Column Gap', 'hash-form'); ?></label>
34	<div class="hf-setting-fields hf-range-slider-wrap">
35	<div class="hf-range-slider"></div>
36	<input data-unit="px" id="hf-form-column-gap" class="hf-range-input-selector" type="number" name="hashform_styles[form][column_gap]" value="<?php echo is_numeric($hashform_styles['form']['column_gap']) ? intval($hashform_styles['form']['column_gap']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
37	</div>
38	</div>
39
40	<div class="hf-settings-row">
41	<label class="hf-setting-label"><?php esc_html_e('Row Gap', 'hash-form'); ?></label>
42	<div class="hf-setting-fields hf-range-slider-wrap">
43	<div class="hf-range-slider"></div>
44	<input data-unit="px" id="hf-form-row-gap" class="hf-range-input-selector" type="number" name="hashform_styles[form][row_gap]" value="<?php echo is_numeric($hashform_styles['form']['row_gap']) ? intval($hashform_styles['form']['row_gap']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
45	</div>
46	</div>
47
48	<div class="hf-settings-row">
49	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color', 'hash-form'); ?></label>
50	<div class="hf-setting-fields hf-color-input-field">
51	<input id="hf-form-bg-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[form][bg_color]" value="<?php echo esc_attr($hashform_styles['form']['bg_color']); ?>">
52	</div>
53	</div>
54
55	<div class="hf-settings-row">
56	<label class="hf-setting-label"><?php esc_html_e('Box Shadow', 'hash-form') ?></label>
57	<div class="hf-setting-fields">
58	<ul class="hf-shadow-fields">
59	<li class="hf-shadow-settings-field">
60	<input id="hf-form-shadow-x" data-unit="px" type="number" name="hashform_styles[form][shadow][x]" value="<?php echo esc_attr($hashform_styles['form']['shadow']['x']); ?>">
61	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
62	</li>
63	<li class="hf-shadow-settings-field">
64	<input id="hf-form-shadow-y" data-unit="px" type="number" name="hashform_styles[form][shadow][y]" value="<?php echo esc_attr($hashform_styles['form']['shadow']['y']); ?>">
65	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
66	</li>
67	<li class="hf-shadow-settings-field">
68	<input id="hf-form-shadow-blur" data-unit="px" type="number" name="hashform_styles[form][shadow][blur]" value="<?php echo esc_attr($hashform_styles['form']['shadow']['blur']); ?>">
69	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
70	</li>
71	<li class="hf-shadow-settings-field">
72	<input id="hf-form-shadow-spread" data-unit="px" type="number" name="hashform_styles[form][shadow][spread]" value="<?php echo esc_attr($hashform_styles['form']['shadow']['spread']); ?>">
73	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
74	</li>
75	</ul>
76	<div class="hf-shadow-settings-field">
77	<div class="hf-color-input-field">
78	<input id="hf-form-shadow-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[form][shadow][color]" value="<?php echo esc_attr($hashform_styles['form']['shadow']['color']); ?>">
79	</div>
80	</div>
81	</div>
82	</div>
83
84	<div class="hf-settings-row">
85	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color', 'hash-form'); ?></label>
86	<div class="hf-setting-fields hf-color-input-field">
87	<input id="hf-form-border-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[form][border_color]" value="<?php echo esc_attr($hashform_styles['form']['border_color']); ?>">
88	</div>
89	</div>
90
91	<div class="hf-settings-row">
92	<label class="hf-setting-label"><?php esc_html_e('Border Width', 'hash-form') ?></label>
93	<ul class="hf-unit-fields">
94	<li class="hf-unit-settings-field">
95	<input id="hf-form-border-top" data-unit="px" type="number" name="hashform_styles[form][border][top]" value="<?php echo esc_attr($hashform_styles['form']['border']['top']); ?>" min="0">
96	<label><?php esc_html_e('Top', 'hash-form') ?></label>
97	</li>
98	<li class="hf-unit-settings-field">
99	<input id="hf-form-border-right" data-unit="px" type="number" name="hashform_styles[form][border][right]" value="<?php echo esc_attr($hashform_styles['form']['border']['right']); ?>" min="0">
100	<label><?php esc_html_e('Right', 'hash-form') ?></label>
101	</li>
102	<li class="hf-unit-settings-field">
103	<input id="hf-form-border-bottom" data-unit="px" type="number" name="hashform_styles[form][border][bottom]" value="<?php echo esc_attr($hashform_styles['form']['border']['bottom']); ?>" min="0">
104	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
105	</li>
106	<li class="hf-unit-settings-field">
107	<input id="hf-form-border-left" data-unit="px" type="number" name="hashform_styles[form][border][left]" value="<?php echo esc_attr($hashform_styles['form']['border']['left']); ?>" min="0">
108	<label><?php esc_html_e('Left', 'hash-form') ?></label>
109	</li>
110	<li class="hf-unit-settings-field">
111	<div class="hf-link-button">
112	<span class="dashicons dashicons-admin-links hf-linked"></span>
113	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
114	</div>
115	</li>
116	</ul>
117	</div>
118
119	<div class="hf-settings-row">
120	<label class="hf-setting-label"><?php esc_html_e('Border Radius', 'hash-form') ?></label>
121	<ul class="hf-unit-fields">
122	<li class="hf-unit-settings-field">
123	<input id="hf-form-border-radius-top" data-unit="px" type="number" name="hashform_styles[form][border_radius][top]" value="<?php echo esc_attr($hashform_styles['form']['border_radius']['top']); ?>" min="0">
124	<label><?php esc_html_e('Top', 'hash-form') ?></label>
125	</li>
126	<li class="hf-unit-settings-field">
127	<input id="hf-form-border-radius-right" data-unit="px" type="number" name="hashform_styles[form][border_radius][right]" value="<?php echo esc_attr($hashform_styles['form']['border_radius']['right']); ?>" min="0">
128	<label><?php esc_html_e('Right', 'hash-form') ?></label>
129	</li>
130	<li class="hf-unit-settings-field">
131	<input id="hf-form-border-radius-bottom" data-unit="px" type="number" name="hashform_styles[form][border_radius][bottom]" value="<?php echo esc_attr($hashform_styles['form']['border_radius']['bottom']); ?>" min="0">
132	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
133	</li>
134	<li class="hf-unit-settings-field">
135	<input id="hf-form-border-radius-left" data-unit="px" type="number" name="hashform_styles[form][border_radius][left]" value="<?php echo esc_attr($hashform_styles['form']['border_radius']['left']); ?>" min="0">
136	<label><?php esc_html_e('Left', 'hash-form') ?></label>
137	</li>
138	<li class="hf-unit-settings-field">
139	<div class="hf-link-button">
140	<span class="dashicons dashicons-admin-links hf-linked"></span>
141	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
142	</div>
143	</li>
144	</ul>
145	</div>
146
147	<div class="hf-settings-row">
148	<label class="hf-setting-label"><?php esc_html_e('Padding', 'hash-form') ?></label>
149	<ul class="hf-unit-fields">
150	<li class="hf-unit-settings-field">
151	<input id="hf-form-padding-top" data-unit="px" type="number" name="hashform_styles[form][padding][top]" value="<?php echo esc_attr($hashform_styles['form']['padding']['top']); ?>" min="0">
152	<label><?php esc_html_e('Top', 'hash-form') ?></label>
153	</li>
154	<li class="hf-unit-settings-field">
155	<input id="hf-form-padding-right" data-unit="px" type="number" name="hashform_styles[form][padding][right]" value="<?php echo esc_attr($hashform_styles['form']['padding']['right']); ?>" min="0">
156	<label><?php esc_html_e('Right', 'hash-form') ?></label>
157	</li>
158	<li class="hf-unit-settings-field">
159	<input id="hf-form-padding-bottom" data-unit="px" type="number" name="hashform_styles[form][padding][bottom]" value="<?php echo esc_attr($hashform_styles['form']['padding']['bottom']); ?>" min="0">
160	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
161	</li>
162	<li class="hf-unit-settings-field">
163	<input id="hf-form-padding-left" data-unit="px" type="number" name="hashform_styles[form][padding][left]" value="<?php echo esc_attr($hashform_styles['form']['padding']['left']); ?>" min="0">
164	<label><?php esc_html_e('Left', 'hash-form') ?></label>
165	</li>
166	<li class="hf-unit-settings-field">
167	<div class="hf-link-button">
168	<span class="dashicons dashicons-admin-links hf-linked"></span>
169	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
170	</div>
171	</li>
172	</ul>
173	</div>
174	</div>
175
176	<h2 class="hf-settings-heading"><?php esc_html_e('Labels', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
177
178	<div class="hf-form-settings">
179	<div class="hf-settings-row">
180	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
181	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'label'); ?>
182	</div>
183
184	<div class="hf-settings-row">
185	<label class="hf-setting-label"><?php esc_html_e('Bottom Spacing', 'hash-form'); ?></label>
186	<div class="hf-setting-fields hf-range-slider-wrap">
187	<div class="hf-range-slider"></div>
188	<input data-unit="px" id="hf-label-spacing" class="hf-range-input-selector" type="number" name="hashform_styles[label][spacing]" value="<?php echo is_numeric($hashform_styles['label']['spacing']) ? intval($hashform_styles['label']['spacing']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
189	</div>
190	</div>
191	<div class="hf-settings-row">
192	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Required Text Color', 'hash-form'); ?></label>
193	<div class="hf-setting-fields hf-color-input-field">
194	<input id="hf-label-required-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[label][required_color]" value="<?php echo esc_attr($hashform_styles['label']['required_color']); ?>">
195	</div>
196	</div>
197	</div>
198
199
200	<h2 class="hf-settings-heading"><?php esc_html_e('Description', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
201	<div class="hf-form-settings">
202	<div class="hf-settings-row">
203	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
204	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'desc'); ?>
205	</div>
206
207	<div class="hf-settings-row">
208	<label class="hf-setting-label"><?php esc_html_e('Top Spacing', 'hash-form'); ?></label>
209	<div class="hf-setting-fields hf-range-slider-wrap">
210	<div class="hf-range-slider"></div>
211	<input data-unit="px" id="hf-desc-spacing" class="hf-range-input-selector" type="number" name="hashform_styles[desc][spacing]" value="<?php echo is_numeric($hashform_styles['desc']['spacing']) ? intval($hashform_styles['desc']['spacing']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
212	</div>
213	</div>
214	</div>
215
216
217	<h2 class="hf-settings-heading"><?php esc_html_e('Fields', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
218
219	<div class="hf-form-settings">
220	<div class="hf-settings-row">
221	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
222	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'field', array('color')); ?>
223	</div>
224
225	<div class="hf-tab-container">
226	<ul class="hf-setting-tab">
227	<li data-tab="hf-tab-normal" class="hf-tab-active"><?php esc_html_e('Normal', 'hash-form'); ?></li>
228	<li data-tab="hf-tab-focus"><?php esc_html_e('Focus', 'hash-form'); ?></li>
229	</ul>
230
231	<div class="hf-setting-tab-panel">
232	<div class="hf-tab-normal hf-tab-content">
233	<div class="hf-settings-row">
234	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color', 'hash-form'); ?></label>
235	<div class="hf-setting-fields hf-color-input-field">
236	<input id="hf-field-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][color_normal]" value="<?php echo esc_attr($hashform_styles['field']['color_normal']); ?>">
237	</div>
238	</div>
239
240	<div class="hf-settings-row">
241	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color', 'hash-form'); ?></label>
242	<div class="hf-setting-fields hf-color-input-field">
243	<input id="hf-field-bg-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][bg_color_normal]" value="<?php echo esc_attr($hashform_styles['field']['bg_color_normal']); ?>">
244	</div>
245	</div>
246
247	<div class="hf-settings-row">
248	<label class="hf-setting-label"><?php esc_html_e('Box Shadow', 'hash-form') ?></label>
249	<div class="hf-setting-fields">
250	<ul class="hf-shadow-fields">
251	<li class="hf-shadow-settings-field">
252	<input id="hf-field-shadow-normal-x" data-unit="px" type="number" name="hashform_styles[field][shadow_normal][x]" value="<?php echo esc_attr($hashform_styles['field']['shadow_normal']['x']); ?>">
253	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
254	</li>
255	<li class="hf-shadow-settings-field">
256	<input id="hf-field-shadow-normal-y" data-unit="px" type="number" name="hashform_styles[field][shadow_normal][y]" value="<?php echo esc_attr($hashform_styles['field']['shadow_normal']['y']); ?>">
257	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
258	</li>
259	<li class="hf-shadow-settings-field">
260	<input id="hf-field-shadow-normal-blur" data-unit="px" type="number" name="hashform_styles[field][shadow_normal][blur]" value="<?php echo esc_attr($hashform_styles['field']['shadow_normal']['blur']); ?>">
261	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
262	</li>
263	<li class="hf-shadow-settings-field">
264	<input id="hf-field-shadow-normal-spread" data-unit="px" type="number" name="hashform_styles[field][shadow_normal][spread]" value="<?php echo esc_attr($hashform_styles['field']['shadow_normal']['spread']); ?>">
265	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
266	</li>
267	</ul>
268	<div class="hf-shadow-settings-field">
269	<div class="hf-color-input-field">
270	<input id="hf-field-shadow-normal-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][shadow_normal][color]" value="<?php echo esc_attr($hashform_styles['field']['shadow_normal']['color']); ?>">
271	</div>
272	</div>
273	</div>
274	</div>
275
276	<div class="hf-settings-row">
277	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color', 'hash-form'); ?></label>
278	<div class="hf-setting-fields hf-color-input-field">
279	<input id="hf-field-border-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][border_color_normal]" value="<?php echo esc_attr($hashform_styles['field']['border_color_normal']); ?>">
280	</div>
281	</div>
282	</div>
283
284	<div class="hf-tab-focus hf-tab-content" style="display: none;">
285	<div class="hf-settings-row">
286	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color (Focus)', 'hash-form'); ?></label>
287	<div class="hf-setting-fields hf-color-input-field">
288	<input id="hf-field-color-focus" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][color_focus]" value="<?php echo esc_attr($hashform_styles['field']['color_focus']); ?>">
289	</div>
290	</div>
291
292	<div class="hf-settings-row">
293	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color (Focus)', 'hash-form'); ?></label>
294	<div class="hf-setting-fields hf-color-input-field">
295	<input id="hf-field-bg-color-focus" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][bg_color_focus]" value="<?php echo esc_attr($hashform_styles['field']['bg_color_focus']); ?>">
296	</div>
297	</div>
298
299	<div class="hf-settings-row">
300	<label class="hf-setting-label"><?php esc_html_e('Box Shadow (Focus)', 'hash-form') ?></label>
301	<div class="hf-setting-fields">
302	<ul class="hf-shadow-fields">
303	<li class="hf-shadow-settings-field">
304	<input id="hf-field-shadow-focus-x" data-unit="px" type="number" name="hashform_styles[field][shadow_focus][x]" value="<?php echo esc_attr($hashform_styles['field']['shadow_focus']['x']); ?>">
305	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
306	</li>
307	<li class="hf-shadow-settings-field">
308	<input id="hf-field-shadow-focus-y" data-unit="px" type="number" name="hashform_styles[field][shadow_focus][y]" value="<?php echo esc_attr($hashform_styles['field']['shadow_focus']['y']); ?>">
309	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
310	</li>
311	<li class="hf-shadow-settings-field">
312	<input id="hf-field-shadow-focus-blur" data-unit="px" type="number" name="hashform_styles[field][shadow_focus][blur]" value="<?php echo esc_attr($hashform_styles['field']['shadow_focus']['blur']); ?>">
313	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
314	</li>
315	<li class="hf-shadow-settings-field">
316	<input id="hf-field-shadow-focus-spread" data-unit="px" type="number" name="hashform_styles[field][shadow_focus][spread]" value="<?php echo esc_attr($hashform_styles['field']['shadow_focus']['spread']); ?>">
317	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
318	</li>
319	</ul>
320
321	<div class="hf-shadow-settings-field">
322	<div class="hf-color-input-field">
323	<input id="hf-field-shadow-focus-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][shadow_focus][color]" value="<?php echo esc_attr($hashform_styles['field']['shadow_focus']['color']); ?>">
324	</div>
325	</div>
326	</div>
327	</div>
328
329	<div class="hf-settings-row">
330	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color (Focus)', 'hash-form'); ?></label>
331	<div class="hf-setting-fields hf-color-input-field">
332	<input id="hf-field-border-color-focus" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[field][border_color_focus]" value="<?php echo esc_attr($hashform_styles['field']['border_color_focus']); ?>">
333	</div>
334	</div>
335	</div>
336	</div>
337	</div>
338
339	<div class="hf-settings-row">
340	<label class="hf-setting-label"><?php esc_html_e('Border Width', 'hash-form') ?></label>
341	<ul class="hf-unit-fields">
342	<li class="hf-unit-settings-field">
343	<input id="hf-field-border-top" data-unit="px" type="number" name="hashform_styles[field][border][top]" value="<?php echo esc_attr($hashform_styles['field']['border']['top']); ?>" min="0">
344	<label><?php esc_html_e('Top', 'hash-form') ?></label>
345	</li>
346	<li class="hf-unit-settings-field">
347	<input id="hf-field-border-right" data-unit="px" type="number" name="hashform_styles[field][border][right]" value="<?php echo esc_attr($hashform_styles['field']['border']['right']); ?>" min="0">
348	<label><?php esc_html_e('Right', 'hash-form') ?></label>
349	</li>
350	<li class="hf-unit-settings-field">
351	<input id="hf-field-border-bottom" data-unit="px" type="number" name="hashform_styles[field][border][bottom]" value="<?php echo esc_attr($hashform_styles['field']['border']['bottom']); ?>" min="0">
352	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
353	</li>
354	<li class="hf-unit-settings-field">
355	<input id="hf-field-border-left" data-unit="px" type="number" name="hashform_styles[field][border][left]" value="<?php echo esc_attr($hashform_styles['field']['border']['left']); ?>" min="0">
356	<label><?php esc_html_e('Left', 'hash-form') ?></label>
357	</li>
358	<li class="hf-unit-settings-field">
359	<div class="hf-link-button">
360	<span class="dashicons dashicons-admin-links hf-linked"></span>
361	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
362	</div>
363	</li>
364	</ul>
365	</div>
366
367	<div class="hf-settings-row">
368	<label class="hf-setting-label"><?php esc_html_e('Border Radius', 'hash-form') ?></label>
369	<ul class="hf-unit-fields">
370	<li class="hf-unit-settings-field">
371	<input id="hf-field-border-radius-top" data-unit="px" type="number" name="hashform_styles[field][border_radius][top]" value="<?php echo esc_attr($hashform_styles['field']['border_radius']['top']); ?>" min="0">
372	<label><?php esc_html_e('Top', 'hash-form') ?></label>
373	</li>
374	<li class="hf-unit-settings-field">
375	<input id="hf-field-border-radius-right" data-unit="px" type="number" name="hashform_styles[field][border_radius][right]" value="<?php echo esc_attr($hashform_styles['field']['border_radius']['right']); ?>" min="0">
376	<label><?php esc_html_e('Right', 'hash-form') ?></label>
377	</li>
378	<li class="hf-unit-settings-field">
379	<input id="hf-field-border-radius-bottom" data-unit="px" type="number" name="hashform_styles[field][border_radius][bottom]" value="<?php echo esc_attr($hashform_styles['field']['border_radius']['bottom']); ?>" min="0">
380	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
381	</li>
382	<li class="hf-unit-settings-field">
383	<input id="hf-field-border-radius-left" data-unit="px" type="number" name="hashform_styles[field][border_radius][left]" value="<?php echo esc_attr($hashform_styles['field']['border_radius']['left']); ?>" min="0">
384	<label><?php esc_html_e('Left', 'hash-form') ?></label>
385	</li>
386	<li class="hf-unit-settings-field">
387	<div class="hf-link-button">
388	<span class="dashicons dashicons-admin-links hf-linked"></span>
389	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
390	</div>
391	</li>
392	</ul>
393	</div>
394
395	<div class="hf-settings-row">
396	<label class="hf-setting-label"><?php esc_html_e('Padding', 'hash-form') ?></label>
397	<ul class="hf-unit-fields">
398	<li class="hf-unit-settings-field">
399	<input id="hf-field-padding-top" data-unit="px" type="number" name="hashform_styles[field][padding][top]" value="<?php echo esc_attr($hashform_styles['field']['padding']['top']); ?>" min="0">
400	<label><?php esc_html_e('Top', 'hash-form') ?></label>
401	</li>
402	<li class="hf-unit-settings-field">
403	<input id="hf-field-padding-right" data-unit="px" type="number" name="hashform_styles[field][padding][right]" value="<?php echo esc_attr($hashform_styles['field']['padding']['right']); ?>" min="0">
404	<label><?php esc_html_e('Right', 'hash-form') ?></label>
405	</li>
406	<li class="hf-unit-settings-field">
407	<input id="hf-field-padding-bottom" data-unit="px" type="number" name="hashform_styles[field][padding][bottom]" value="<?php echo esc_attr($hashform_styles['field']['padding']['bottom']); ?>" min="0">
408	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
409	</li>
410	<li class="hf-unit-settings-field">
411	<input id="hf-field-padding-left" data-unit="px" type="number" name="hashform_styles[field][padding][left]" value="<?php echo esc_attr($hashform_styles['field']['padding']['left']); ?>" min="0">
412	<label><?php esc_html_e('Left', 'hash-form') ?></label>
413	</li>
414	<li class="hf-unit-settings-field">
415	<div class="hf-link-button">
416	<span class="dashicons dashicons-admin-links hf-linked"></span>
417	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
418	</div>
419	</li>
420	</ul>
421	</div>
422	</div>
423
424	<h2 class="hf-settings-heading"><?php esc_html_e('Upload Button', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
425	<div class="hf-form-settings">
426	<div class="hf-tab-container">
427	<ul class="hf-setting-tab">
428	<li data-tab="hf-tab-normal" class="hf-tab-active"><?php esc_html_e('Normal', 'hash-form'); ?></li>
429	<li data-tab="hf-tab-hover"><?php esc_html_e('Hover', 'hash-form'); ?></li>
430	</ul>
431
432	<div class="hf-setting-tab-panel">
433	<div class="hf-tab-normal hf-tab-content">
434	<div class="hf-settings-row">
435	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color', 'hash-form'); ?></label>
436	<div class="hf-setting-fields hf-color-input-field">
437	<input id="hf-upload-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][color_normal]" value="<?php echo esc_attr($hashform_styles['upload']['color_normal']); ?>">
438	</div>
439	</div>
440
441	<div class="hf-settings-row">
442	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color', 'hash-form'); ?></label>
443	<div class="hf-setting-fields hf-color-input-field">
444	<input id="hf-upload-bg-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][bg_color_normal]" value="<?php echo esc_attr($hashform_styles['upload']['bg_color_normal']); ?>">
445	</div>
446	</div>
447
448	<div class="hf-settings-row">
449	<label class="hf-setting-label"><?php esc_html_e('Box Shadow', 'hash-form') ?></label>
450	<div class="hf-setting-fields">
451	<ul class="hf-shadow-fields">
452	<li class="hf-shadow-settings-field">
453	<input id="hf-upload-shadow-normal-x" data-unit="px" type="number" name="hashform_styles[upload][shadow_normal][x]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_normal']['x']); ?>">
454	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
455	</li>
456	<li class="hf-shadow-settings-field">
457	<input id="hf-upload-shadow-normal-y" data-unit="px" type="number" name="hashform_styles[upload][shadow_normal][y]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_normal']['y']); ?>">
458	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
459	</li>
460	<li class="hf-shadow-settings-field">
461	<input id="hf-upload-shadow-normal-blur" data-unit="px" type="number" name="hashform_styles[upload][shadow_normal][blur]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_normal']['blur']); ?>">
462	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
463	</li>
464	<li class="hf-shadow-settings-field">
465	<input id="hf-upload-shadow-normal-spread" data-unit="px" type="number" name="hashform_styles[upload][shadow_normal][spread]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_normal']['spread']); ?>">
466	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
467	</li>
468	</ul>
469	<div class="hf-shadow-settings-field">
470	<div class="hf-color-input-field">
471	<input id="hf-upload-shadow-normal-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][shadow_normal][color]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_normal']['color']); ?>">
472	</div>
473	</div>
474	</div>
475	</div>
476
477	<div class="hf-settings-row">
478	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color', 'hash-form'); ?></label>
479	<div class="hf-setting-fields hf-color-input-field">
480	<input id="hf-upload-border-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][border_color_normal]" value="<?php echo esc_attr($hashform_styles['upload']['border_color_normal']); ?>">
481	</div>
482	</div>
483	</div>
484
485	<div class="hf-tab-hover hf-tab-content" style="display: none;">
486	<div class="hf-settings-row">
487	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color (Hover)', 'hash-form'); ?></label>
488	<div class="hf-setting-fields hf-color-input-field">
489	<input id="hf-upload-color-hover" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][color_hover]" value="<?php echo esc_attr($hashform_styles['upload']['color_hover']); ?>">
490	</div>
491	</div>
492
493	<div class="hf-settings-row">
494	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color (Hover)', 'hash-form'); ?></label>
495	<div class="hf-setting-fields hf-color-input-field">
496	<input id="hf-upload-bg-color-hover" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][bg_color_hover]" value="<?php echo esc_attr($hashform_styles['upload']['bg_color_hover']); ?>">
497	</div>
498	</div>
499
500	<div class="hf-settings-row">
501	<label class="hf-setting-label"><?php esc_html_e('Box Shadow (Hover)', 'hash-form') ?></label>
502	<div class="hf-setting-fields">
503	<ul class="hf-shadow-fields">
504	<li class="hf-shadow-settings-field">
505	<input id="hf-upload-shadow-hover-x" data-unit="px" type="number" name="hashform_styles[upload][shadow_hover][x]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_hover']['x']); ?>">
506	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
507	</li>
508	<li class="hf-shadow-settings-field">
509	<input id="hf-upload-shadow-hover-y" data-unit="px" type="number" name="hashform_styles[upload][shadow_hover][y]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_hover']['y']); ?>">
510	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
511	</li>
512	<li class="hf-shadow-settings-field">
513	<input id="hf-upload-shadow-hover-blur" data-unit="px" type="number" name="hashform_styles[upload][shadow_hover][blur]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_hover']['blur']); ?>">
514	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
515	</li>
516	<li class="hf-shadow-settings-field">
517	<input id="hf-upload-shadow-hover-spread" data-unit="px" type="number" name="hashform_styles[upload][shadow_hover][spread]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_hover']['spread']); ?>">
518	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
519	</li>
520	</ul>
521	<div class="hf-shadow-settings-field">
522	<div class="hf-color-input-field">
523	<input id="hf-upload-shadow-hover-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][shadow_hover][color]" value="<?php echo esc_attr($hashform_styles['upload']['shadow_hover']['color']); ?>">
524	</div>
525	</div>
526	</div>
527	</div>
528
529	<div class="hf-settings-row">
530	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color (Hover)', 'hash-form'); ?></label>
531	<div class="hf-setting-fields hf-color-input-field">
532	<input id="hf-upload-border-color-hover" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[upload][border_color_hover]" value="<?php echo esc_attr($hashform_styles['upload']['border_color_hover']); ?>">
533	</div>
534	</div>
535	</div>
536	</div>
537	</div>
538
539	<div class="hf-settings-row">
540	<label class="hf-setting-label"><?php esc_html_e('Border Width', 'hash-form') ?></label>
541	<ul class="hf-unit-fields">
542	<li class="hf-unit-settings-field">
543	<input id="hf-upload-border-top" data-unit="px" type="number" name="hashform_styles[upload][border][top]" value="<?php echo esc_attr($hashform_styles['upload']['border']['top']); ?>" min="0">
544	<label><?php esc_html_e('Top', 'hash-form') ?></label>
545	</li>
546	<li class="hf-unit-settings-field">
547	<input id="hf-upload-border-right" data-unit="px" type="number" name="hashform_styles[upload][border][right]" value="<?php echo esc_attr($hashform_styles['upload']['border']['right']); ?>" min="0">
548	<label><?php esc_html_e('Right', 'hash-form') ?></label>
549	</li>
550	<li class="hf-unit-settings-field">
551	<input id="hf-upload-border-bottom" data-unit="px" type="number" name="hashform_styles[upload][border][bottom]" value="<?php echo esc_attr($hashform_styles['upload']['border']['bottom']); ?>" min="0">
552	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
553	</li>
554	<li class="hf-unit-settings-field">
555	<input id="hf-upload-border-left" data-unit="px" type="number" name="hashform_styles[upload][border][left]" value="<?php echo esc_attr($hashform_styles['upload']['border']['left']); ?>" min="0">
556	<label><?php esc_html_e('Left', 'hash-form') ?></label>
557	</li>
558	<li class="hf-unit-settings-field">
559	<div class="hf-link-button">
560	<span class="dashicons dashicons-admin-links hf-linked"></span>
561	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
562	</div>
563	</li>
564	</ul>
565	</div>
566
567	<div class="hf-settings-row">
568	<label class="hf-setting-label"><?php esc_html_e('Border Radius', 'hash-form') ?></label>
569	<ul class="hf-unit-fields">
570	<li class="hf-unit-settings-field">
571	<input id="hf-upload-border-radius-top" data-unit="px" type="number" name="hashform_styles[upload][border_radius][top]" value="<?php echo esc_attr($hashform_styles['upload']['border_radius']['top']); ?>" min="0">
572	<label><?php esc_html_e('Top', 'hash-form') ?></label>
573	</li>
574	<li class="hf-unit-settings-field">
575	<input id="hf-upload-border-radius-right" data-unit="px" type="number" name="hashform_styles[upload][border_radius][right]" value="<?php echo esc_attr($hashform_styles['upload']['border_radius']['right']); ?>" min="0">
576	<label><?php esc_html_e('Right', 'hash-form') ?></label>
577	</li>
578	<li class="hf-unit-settings-field">
579	<input id="hf-upload-border-radius-bottom" data-unit="px" type="number" name="hashform_styles[upload][border_radius][bottom]" value="<?php echo esc_attr($hashform_styles['upload']['border_radius']['bottom']); ?>" min="0">
580	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
581	</li>
582	<li class="hf-unit-settings-field">
583	<input id="hf-upload-border-radius-left" data-unit="px" type="number" name="hashform_styles[upload][border_radius][left]" value="<?php echo esc_attr($hashform_styles['upload']['border_radius']['left']); ?>" min="0">
584	<label><?php esc_html_e('Left', 'hash-form') ?></label>
585	</li>
586	<li class="hf-unit-settings-field">
587	<div class="hf-link-button">
588	<span class="dashicons dashicons-admin-links hf-linked"></span>
589	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
590	</div>
591	</li>
592	</ul>
593	</div>
594
595	<div class="hf-settings-row">
596	<label class="hf-setting-label"><?php esc_html_e('Padding', 'hash-form') ?></label>
597	<ul class="hf-unit-fields">
598	<li class="hf-unit-settings-field">
599	<input id="hf-upload-padding-top" data-unit="px" type="number" name="hashform_styles[upload][padding][top]" value="<?php echo esc_attr($hashform_styles['upload']['padding']['top']); ?>" min="0">
600	<label><?php esc_html_e('Top', 'hash-form') ?></label>
601	</li>
602	<li class="hf-unit-settings-field">
603	<input id="hf-upload-padding-right" data-unit="px" type="number" name="hashform_styles[upload][padding][right]" value="<?php echo esc_attr($hashform_styles['upload']['padding']['right']); ?>" min="0">
604	<label><?php esc_html_e('Right', 'hash-form') ?></label>
605	</li>
606	<li class="hf-unit-settings-field">
607	<input id="hf-upload-padding-bottom" data-unit="px" type="number" name="hashform_styles[upload][padding][bottom]" value="<?php echo esc_attr($hashform_styles['upload']['padding']['bottom']); ?>" min="0">
608	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
609	</li>
610	<li class="hf-unit-settings-field">
611	<input id="hf-upload-padding-left" data-unit="px" type="number" name="hashform_styles[upload][padding][left]" value="<?php echo esc_attr($hashform_styles['upload']['padding']['left']); ?>" min="0">
612	<label><?php esc_html_e('Left', 'hash-form') ?></label>
613	</li>
614	<li class="hf-unit-settings-field">
615	<div class="hf-link-button">
616	<span class="dashicons dashicons-admin-links hf-linked"></span>
617	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
618	</div>
619	</li>
620	</ul>
621	</div>
622	</div>
623
624	<h2 class="hf-settings-heading"><?php esc_html_e('Submit Button', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
625	<div class="hf-form-settings">
626	<div class="hf-settings-row">
627	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
628	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'button', array('color')); ?>
629	</div>
630
631	<div class="hf-tab-container">
632	<ul class="hf-setting-tab">
633	<li data-tab="hf-tab-normal" class="hf-tab-active"><?php esc_html_e('Normal', 'hash-form'); ?></li>
634	<li data-tab="hf-tab-hover"><?php esc_html_e('Hover', 'hash-form'); ?></li>
635	</ul>
636
637	<div class="hf-setting-tab-panel">
638	<div class="hf-tab-normal hf-tab-content">
639	<div class="hf-settings-row">
640	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color', 'hash-form'); ?></label>
641	<div class="hf-setting-fields hf-color-input-field">
642	<input id="hf-button-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][color_normal]" value="<?php echo esc_attr($hashform_styles['button']['color_normal']); ?>">
643	</div>
644	</div>
645
646	<div class="hf-settings-row">
647	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color', 'hash-form'); ?></label>
648	<div class="hf-setting-fields hf-color-input-field">
649	<input id="hf-button-bg-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][bg_color_normal]" value="<?php echo esc_attr($hashform_styles['button']['bg_color_normal']); ?>">
650	</div>
651	</div>
652
653	<div class="hf-settings-row">
654	<label class="hf-setting-label"><?php esc_html_e('Box Shadow', 'hash-form') ?></label>
655	<div class="hf-setting-fields">
656	<ul class="hf-shadow-fields">
657	<li class="hf-shadow-settings-field">
658	<input id="hf-button-shadow-normal-x" data-unit="px" type="number" name="hashform_styles[button][shadow_normal][x]" value="<?php echo esc_attr($hashform_styles['button']['shadow_normal']['x']); ?>">
659	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
660	</li>
661	<li class="hf-shadow-settings-field">
662	<input id="hf-button-shadow-normal-y" data-unit="px" type="number" name="hashform_styles[button][shadow_normal][y]" value="<?php echo esc_attr($hashform_styles['button']['shadow_normal']['y']); ?>">
663	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
664	</li>
665	<li class="hf-shadow-settings-field">
666	<input id="hf-button-shadow-normal-blur" data-unit="px" type="number" name="hashform_styles[button][shadow_normal][blur]" value="<?php echo esc_attr($hashform_styles['button']['shadow_normal']['blur']); ?>">
667	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
668	</li>
669	<li class="hf-shadow-settings-field">
670	<input id="hf-button-shadow-normal-spread" data-unit="px" type="number" name="hashform_styles[button][shadow_normal][spread]" value="<?php echo esc_attr($hashform_styles['button']['shadow_normal']['spread']); ?>">
671	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
672	</li>
673	</ul>
674	<div class="hf-shadow-settings-field">
675	<div class="hf-color-input-field">
676	<input id="hf-button-shadow-normal-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][shadow_normal][color]" value="<?php echo esc_attr($hashform_styles['button']['shadow_normal']['color']); ?>">
677	</div>
678	</div>
679	</div>
680	</div>
681
682	<div class="hf-settings-row">
683	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color', 'hash-form'); ?></label>
684	<div class="hf-setting-fields hf-color-input-field">
685	<input id="hf-button-border-color-normal" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][border_color_normal]" value="<?php echo esc_attr($hashform_styles['button']['border_color_normal']); ?>">
686	</div>
687	</div>
688	</div>
689
690	<div class="hf-tab-hover hf-tab-content" style="display: none;">
691	<div class="hf-settings-row">
692	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color (Hover)', 'hash-form'); ?></label>
693	<div class="hf-setting-fields hf-color-input-field">
694	<input id="hf-button-color-hover" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][color_hover]" value="<?php echo esc_attr($hashform_styles['button']['color_hover']); ?>">
695	</div>
696	</div>
697
698	<div class="hf-settings-row">
699	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Background Color (Hover)', 'hash-form'); ?></label>
700	<div class="hf-setting-fields hf-color-input-field">
701	<input id="hf-button-bg-color-hover" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][bg_color_hover]" value="<?php echo esc_attr($hashform_styles['button']['bg_color_hover']); ?>">
702	</div>
703	</div>
704
705	<div class="hf-settings-row">
706	<label class="hf-setting-label"><?php esc_html_e('Box Shadow (Hover)', 'hash-form') ?></label>
707	<div class="hf-setting-fields">
708	<ul class="hf-shadow-fields">
709	<li class="hf-shadow-settings-field">
710	<input id="hf-button-shadow-hover-x" data-unit="px" type="number" name="hashform_styles[button][shadow_hover][x]" value="<?php echo esc_attr($hashform_styles['button']['shadow_hover']['x']); ?>">
711	<label><?php echo esc_html_x('H', 'Horizontal', 'hash-form'); ?></label>
712	</li>
713	<li class="hf-shadow-settings-field">
714	<input id="hf-button-shadow-hover-y" data-unit="px" type="number" name="hashform_styles[button][shadow_hover][y]" value="<?php echo esc_attr($hashform_styles['button']['shadow_hover']['y']); ?>">
715	<label><?php echo esc_html_x('V', 'Vertical', 'hash-form'); ?></label>
716	</li>
717	<li class="hf-shadow-settings-field">
718	<input id="hf-button-shadow-hover-blur" data-unit="px" type="number" name="hashform_styles[button][shadow_hover][blur]" value="<?php echo esc_attr($hashform_styles['button']['shadow_hover']['blur']); ?>">
719	<label><?php esc_html_e('Blur', 'hash-form') ?></label>
720	</li>
721	<li class="hf-shadow-settings-field">
722	<input id="hf-button-shadow-hover-spread" data-unit="px" type="number" name="hashform_styles[button][shadow_hover][spread]" value="<?php echo esc_attr($hashform_styles['button']['shadow_hover']['spread']); ?>">
723	<label><?php esc_html_e('Spread', 'hash-form') ?></label>
724	</li>
725	</ul>
726	<div class="hf-shadow-settings-field">
727	<div class="hf-color-input-field">
728	<input id="hf-button-shadow-hover-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][shadow_hover][color]" value="<?php echo esc_attr($hashform_styles['button']['shadow_hover']['color']); ?>">
729	</div>
730	</div>
731	</div>
732	</div>
733
734	<div class="hf-settings-row">
735	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Border Color (Hover)', 'hash-form'); ?></label>
736	<div class="hf-setting-fields hf-color-input-field">
737	<input id="hf-button-border-color-hover" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[button][border_color_hover]" value="<?php echo esc_attr($hashform_styles['button']['border_color_hover']); ?>">
738	</div>
739	</div>
740	</div>
741	</div>
742	</div>
743
744	<div class="hf-settings-row">
745	<label class="hf-setting-label"><?php esc_html_e('Border Width', 'hash-form') ?></label>
746	<ul class="hf-unit-fields">
747	<li class="hf-unit-settings-field">
748	<input id="hf-button-border-top" data-unit="px" type="number" name="hashform_styles[button][border][top]" value="<?php echo esc_attr($hashform_styles['button']['border']['top']); ?>" min="0">
749	<label><?php esc_html_e('Top', 'hash-form') ?></label>
750	</li>
751	<li class="hf-unit-settings-field">
752	<input id="hf-button-border-right" data-unit="px" type="number" name="hashform_styles[button][border][right]" value="<?php echo esc_attr($hashform_styles['button']['border']['right']); ?>" min="0">
753	<label><?php esc_html_e('Right', 'hash-form') ?></label>
754	</li>
755	<li class="hf-unit-settings-field">
756	<input id="hf-button-border-bottom" data-unit="px" type="number" name="hashform_styles[button][border][bottom]" value="<?php echo esc_attr($hashform_styles['button']['border']['bottom']); ?>" min="0">
757	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
758	</li>
759	<li class="hf-unit-settings-field">
760	<input id="hf-button-border-left" data-unit="px" type="number" name="hashform_styles[button][border][left]" value="<?php echo esc_attr($hashform_styles['button']['border']['left']); ?>" min="0">
761	<label><?php esc_html_e('Left', 'hash-form') ?></label>
762	</li>
763	<li class="hf-unit-settings-field">
764	<div class="hf-link-button">
765	<span class="dashicons dashicons-admin-links hf-linked"></span>
766	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
767	</div>
768	</li>
769	</ul>
770	</div>
771
772	<div class="hf-settings-row">
773	<label class="hf-setting-label"><?php esc_html_e('Border Radius', 'hash-form') ?></label>
774	<ul class="hf-unit-fields">
775	<li class="hf-unit-settings-field">
776	<input id="hf-button-border-radius-top" data-unit="px" type="number" name="hashform_styles[button][border_radius][top]" value="<?php echo esc_attr($hashform_styles['button']['border_radius']['top']); ?>" min="0">
777	<label><?php esc_html_e('Top', 'hash-form') ?></label>
778	</li>
779	<li class="hf-unit-settings-field">
780	<input id="hf-button-border-radius-right" data-unit="px" type="number" name="hashform_styles[button][border_radius][right]" value="<?php echo esc_attr($hashform_styles['button']['border_radius']['right']); ?>" min="0">
781	<label><?php esc_html_e('Right', 'hash-form') ?></label>
782	</li>
783	<li class="hf-unit-settings-field">
784	<input id="hf-button-border-radius-bottom" data-unit="px" type="number" name="hashform_styles[button][border_radius][bottom]" value="<?php echo esc_attr($hashform_styles['button']['border_radius']['bottom']); ?>" min="0">
785	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
786	</li>
787	<li class="hf-unit-settings-field">
788	<input id="hf-button-border-radius-left" data-unit="px" type="number" name="hashform_styles[button][border_radius][left]" value="<?php echo esc_attr($hashform_styles['button']['border_radius']['left']); ?>" min="0">
789	<label><?php esc_html_e('Left', 'hash-form') ?></label>
790	</li>
791	<li class="hf-unit-settings-field">
792	<div class="hf-link-button">
793	<span class="dashicons dashicons-admin-links hf-linked"></span>
794	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
795	</div>
796	</li>
797	</ul>
798	</div>
799
800	<div class="hf-settings-row">
801	<label class="hf-setting-label"><?php esc_html_e('Padding', 'hash-form') ?></label>
802	<ul class="hf-unit-fields">
803	<li class="hf-unit-settings-field">
804	<input id="hf-button-padding-top" data-unit="px" type="number" name="hashform_styles[button][padding][top]" value="<?php echo esc_attr($hashform_styles['button']['padding']['top']); ?>" min="0">
805	<label><?php esc_html_e('Top', 'hash-form') ?></label>
806	</li>
807	<li class="hf-unit-settings-field">
808	<input id="hf-button-padding-right" data-unit="px" type="number" name="hashform_styles[button][padding][right]" value="<?php echo esc_attr($hashform_styles['button']['padding']['right']); ?>" min="0">
809	<label><?php esc_html_e('Right', 'hash-form') ?></label>
810	</li>
811	<li class="hf-unit-settings-field">
812	<input id="hf-button-padding-bottom" data-unit="px" type="number" name="hashform_styles[button][padding][bottom]" value="<?php echo esc_attr($hashform_styles['button']['padding']['bottom']); ?>" min="0">
813	<label><?php esc_html_e('Bottom', 'hash-form') ?></label>
814	</li>
815	<li class="hf-unit-settings-field">
816	<input id="hf-button-padding-left" data-unit="px" type="number" name="hashform_styles[button][padding][left]" value="<?php echo esc_attr($hashform_styles['button']['padding']['left']); ?>" min="0">
817	<label><?php esc_html_e('Left', 'hash-form') ?></label>
818	</li>
819	<li class="hf-unit-settings-field">
820	<div class="hf-link-button">
821	<span class="dashicons dashicons-admin-links hf-linked"></span>
822	<span class="dashicons dashicons-editor-unlink hf-unlinked"></span>
823	</div>
824	</li>
825	</ul>
826	</div>
827	</div>
828
829
830	<h2 class="hf-settings-heading"><?php esc_html_e('Validation', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
831	<div class="hf-form-settings">
832	<div class="hf-settings-row">
833	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
834	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'validation'); ?>
835	</div>
836
837	<div class="hf-settings-row">
838	<label class="hf-setting-label"><?php esc_html_e('Top Spacing', 'hash-form'); ?></label>
839	<div class="hf-setting-fields hf-range-slider-wrap">
840	<div class="hf-range-slider"></div>
841	<input data-unit="px" id="hf-validation-spacing" class="hf-range-input-selector" type="number" name="hashform_styles[validation][spacing]" value="<?php echo is_numeric($hashform_styles['validation']['spacing']) ? intval($hashform_styles['validation']['spacing']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
842	</div>
843	</div>
844
845	<div class="hf-settings-row">
846	<label class="hf-setting-label"><?php esc_html_e('Text Align', 'hash-form') ?></label>
847	<select id="hf-validation-textalign" name="hashform_styles[validation][textalign]">
848	<option value="left" <?php selected($hashform_styles['validation']['textalign'], 'left'); ?>><?php esc_html_e('Left', 'hash-form'); ?></option>
849	<option value="center" <?php selected($hashform_styles['validation']['textalign'], 'center'); ?>><?php esc_html_e('Center', 'hash-form'); ?></option>
850	<option value="right" <?php selected($hashform_styles['validation']['textalign'], 'right'); ?>><?php esc_html_e('Right', 'hash-form'); ?></option>
851	</select>
852	</div>
853	</div>
854
855
856	<h2 class="hf-settings-heading"><?php esc_html_e('Form Title', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
857	<div class="hf-form-settings">
858	<div class="hf-settings-row">
859	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
860	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'form_title'); ?>
861	</div>
862
863	<div class="hf-settings-row">
864	<label class="hf-setting-label"><?php esc_html_e('Bottom Spacing', 'hash-form'); ?></label>
865	<div class="hf-setting-fields hf-range-slider-wrap">
866	<div class="hf-range-slider"></div>
867	<input data-unit="px" id="hf-form-title-spacing" class="hf-range-input-selector" type="number" name="hashform_styles[form_title][spacing]" value="<?php echo is_numeric($hashform_styles['form_title']['spacing']) ? intval($hashform_styles['form_title']['spacing']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
868	</div>
869	</div>
870	</div>
871
872
873	<h2 class="hf-settings-heading"><?php esc_html_e('Form Description', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
874	<div class="hf-form-settings">
875	<div class="hf-settings-row">
876	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
877	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'form_desc'); ?>
878	</div>
879
880	<div class="hf-settings-row">
881	<label class="hf-setting-label"><?php esc_html_e('Bottom Spacing', 'hash-form'); ?></label>
882	<div class="hf-setting-fields hf-range-slider-wrap">
883	<div class="hf-range-slider"></div>
884	<input data-unit="px" id="hf-form-desc-spacing" class="hf-range-input-selector" type="number" name="hashform_styles[form_desc][spacing]" value="<?php echo is_numeric($hashform_styles['form_desc']['spacing']) ? intval($hashform_styles['form_desc']['spacing']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
885	</div>
886	</div>
887	</div>
888
889
890	<h2 class="hf-settings-heading"><?php esc_html_e('Heading', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
891	<div class="hf-form-settings">
892	<div class="hf-settings-row">
893	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
894	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'heading'); ?>
895	</div>
896	</div>
897
898	<h2 class="hf-settings-heading"><?php esc_html_e('Paragraph', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
899	<div class="hf-form-settings">
900	<div class="hf-settings-row">
901	<label class="hf-setting-label"><?php esc_html_e('Typography', 'hash-form'); ?></label>
902	<?php self::get_typography_fields('hashform_styles', $hashform_styles, 'paragraph'); ?>
903	</div>
904	</div>
905
906	<h2 class="hf-settings-heading"><?php esc_html_e('Divider', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
907	<div class="hf-form-settings">
908	<div class="hf-settings-row">
909	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color', 'hash-form'); ?></label>
910	<div class="hf-setting-fields hf-color-input-field">
911	<input id="hf-divider-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[divider_color]" value="<?php echo esc_attr($hashform_styles['divider_color']); ?>">
912	</div>
913	</div>
914	</div>
915
916	<h2 class="hf-settings-heading"><?php esc_html_e('Star', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
917	<div class="hf-form-settings">
918	<div class="hf-settings-row">
919	<label class="hf-setting-label"><?php esc_html_e('Size', 'hash-form'); ?></label>
920	<div class="hf-setting-fields hf-range-slider-wrap">
921	<div class="hf-range-slider"></div>
922	<input data-unit="px" id="hf-star-size" class="hf-range-input-selector" type="number" name="hashform_styles[star][size]" value="<?php echo is_numeric($hashform_styles['star']['size']) ? intval($hashform_styles['star']['size']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
923	</div>
924	</div>
925	<div class="hf-settings-row">
926	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color', 'hash-form'); ?></label>
927	<div class="hf-setting-fields hf-color-input-field">
928	<input id="hf-star-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[star][color]" value="<?php echo esc_attr($hashform_styles['star']['color']); ?>">
929	</div>
930	</div>
931	<div class="hf-settings-row">
932	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Color (Active)', 'hash-form'); ?></label>
933	<div class="hf-setting-fields hf-color-input-field">
934	<input id="hf-star-color-active" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[star][color_active]" value="<?php echo esc_attr($hashform_styles['star']['color_active']); ?>">
935	</div>
936	</div>
937	</div>
938
939	<h2 class="hf-settings-heading"><?php esc_html_e('Range Slider', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
940	<div class="hf-form-settings">
941	<div class="hf-settings-row">
942	<label class="hf-setting-label"><?php esc_html_e('Height', 'hash-form'); ?></label>
943	<div class="hf-setting-fields hf-range-slider-wrap">
944	<div class="hf-range-slider"></div>
945	<input data-unit="px" id="hf-range-height" class="hf-range-input-selector" type="number" name="hashform_styles[range][height]" value="<?php echo is_numeric($hashform_styles['range']['height']) ? intval($hashform_styles['range']['height']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
946	</div>
947	</div>
948	<div class="hf-settings-row">
949	<label class="hf-setting-label"><?php esc_html_e('Handle Size', 'hash-form'); ?></label>
950	<div class="hf-setting-fields hf-range-slider-wrap">
951	<div class="hf-range-slider"></div>
952	<input data-unit="px" id="hf-range-handle-size" class="hf-range-input-selector" type="number" name="hashform_styles[range][handle_size]" value="<?php echo is_numeric($hashform_styles['range']['handle_size']) ? intval($hashform_styles['range']['handle_size']) : ''; ?>" min="0" max="100" step="1"><span class="hf-range-input-unit">px</span>
953	</div>
954	</div>
955	<div class="hf-settings-row">
956	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Bar Color', 'hash-form'); ?></label>
957	<div class="hf-setting-fields hf-color-input-field">
958	<input id="hf-range-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[range][color]" value="<?php echo esc_attr($hashform_styles['range']['color']); ?>">
959	</div>
960	</div>
961	<div class="hf-settings-row">
962	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Bar Color (Active)', 'hash-form'); ?></label>
963	<div class="hf-setting-fields hf-color-input-field">
964	<input id="hf-range-color-active" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[range][color_active]" value="<?php echo esc_attr($hashform_styles['range']['color_active']); ?>">
965	</div>
966	</div>
967	<div class="hf-settings-row">
968	<label class="hf-setting-label hf-color-input-label"><?php esc_html_e('Handle Color', 'hash-form'); ?></label>
969	<div class="hf-setting-fields hf-color-input-field">
970	<input id="hf-range-handle-color" type="text" class="color-picker hf-color-picker" data-alpha-enabled="true" data-alpha-custom-width="30px" data-alpha-color-type="hex" name="hashform_styles[range][handle_color]" value="<?php echo esc_attr($hashform_styles['range']['handle_color']); ?>">
971	</div>
972	</div>
973	</div>
974
975	<?php do_action('hashform_styles_settings', $hashform_styles); ?>
976
977
978	<h2 class="hf-settings-heading"><?php esc_html_e('Import/Export', 'hash-form'); ?><span class="mdi mdi-chevron-down"></span></h2>
979	<div class="hf-form-settings">
980	<p>
981	<?php esc_html_e("You can export the form styles and then import the form styles in the same or different website.", "hash-form"); ?>
982	</p>
983
984	<div class="hf-settings-row">
985	<label class="hf-setting-label"><?php esc_html_e('Export', 'hash-form'); ?></label>
986	<div class="hf-setting-fields">
987	<form method="post"></form>
988	<form method="post">
989	<input type="hidden" name="hashform_imex_action" value="export_style" />
990	<input type="hidden" name="hashform_style_id" value="<?php echo esc_attr($id); ?>" />
991	<?php wp_nonce_field("hashform_imex_export_nonce", "hashform_imex_export_nonce"); ?>
992	<button class="button button-primary" id="hashform_export" name="hashform_export"><span class="mdi mdi-tray-arrow-down"></span> <?php esc_html_e("Export Style", "hash-form") ?></button>
993	</form>
994	</div>
995	</div>
996
997	<div class="hf-settings-row">
998	<label class="hf-setting-label"><?php esc_html_e('Import', 'hash-form'); ?></label>
999	<div class="hf-setting-fields">
1000	<form method="post" enctype="multipart/form-data">
1001	<div class="hf-preview-zone hidden">
1002	<div class="hf-box hf-box-solid">
1003	<div class="hf-box-body"></div>
1004	<button type="button" class="button hf-remove-preview">
1005	<span class="mdi mdi-window-close"></span>
1006	</button>
1007	</div>
1008	</div>
1009	<div class="hf-dropzone-wrapper">
1010	<div class="hf-dropzone-desc">
1011	<span class="mdi mdi-file-image-plus-outline"></span>
1012	<p><?php esc_html_e("Choose an json file or drag it here", "hash-form"); ?></p>
1013	</div>
1014	<input type="file" name="hashform_import_file" class="hf-dropzone">
1015	</div>
1016	<?php // icofont is not among the plugin's icon fonts, so the old <i> rendered nothing. ?>
1017	<button class="button button-primary" id="hashform_import" type="submit" name="hashform_import"><span class="mdi mdi-tray-arrow-up" aria-hidden="true"></span> <?php esc_html_e("Import", "hash-form") ?></button>
1018	<input type="hidden" name="hashform_imex_action" value="import_style" />
1019	<input type="hidden" name="hashform_style_id" value="<?php echo esc_attr($id); ?>" />
1020	<?php wp_nonce_field("hashform_imex_import_nonce", "hashform_imex_import_nonce"); ?>
1021	</form>
1022	</div>
1023	</div>
1024	</div>
1025