weforms / assets / js-templates / form-components.php

form-components.php in weForms – Easy Drag & Drop Contact Form Builder For WordPress 1.1.0, at assets/js-templates/form-components.php

449 lines 18.1 KB

Raw Download Zip

1	<script type="text/x-template" id="tmpl-wpuf-field-name">
2	<div>
3	<div class="panel-field-opt panel-field-name clearfix">
4
5	<label>
6	<?php _e( 'First Name', 'weforms' ); ?>
7	</label>
8
9	<div class="name-field-placeholder">
10	<input type="text" v-model="editing_form_field.first_name.placeholder">
11	<label><?php _e( 'Placeholder', 'weforms' ); ?></label>
12	</div>
13
14	<div class="name-field-value">
15	<input type="text" v-model="editing_form_field.first_name.default">
16	<label><?php _e( 'Default Value', 'weforms' ); ?></label>
17	</div>
18	</div>
19
20	<div class="panel-field-opt panel-field-name clearfix" v-if="editing_form_field.format !== 'first-last'">
21
22	<label>
23	<?php _e( 'Middle Name', 'weforms' ); ?>
24	</label>
25
26	<div class="name-field-placeholder">
27	<input type="text" v-model="editing_form_field.middle_name.placeholder">
28	<label><?php _e( 'Placeholder', 'weforms' ); ?></label>
29	</div>
30
31	<div class="name-field-value">
32	<input type="text" v-model="editing_form_field.middle_name.default">
33	<label><?php _e( 'Default Value', 'weforms' ); ?></label>
34	</div>
35	</div>
36
37	<div class="panel-field-opt panel-field-name clearfix">
38
39	<label>
40	<?php _e( 'Last Name', 'weforms' ); ?>
41	</label>
42
43	<div class="name-field-placeholder">
44	<input type="text" v-model="editing_form_field.last_name.placeholder">
45	<label><?php _e( 'Placeholder', 'weforms' ); ?></label>
46	</div>
47
48	<div class="name-field-value">
49	<input type="text" v-model="editing_form_field.last_name.default">
50	<label><?php _e( 'Default Value', 'weforms' ); ?></label>
51	</div>
52	</div>
53	</div></script>
54
55	<script type="text/x-template" id="tmpl-wpuf-form-name_field">
56	<div class="wpuf-fields">
57
58	<div :class="['wpuf-name-field-wrap', 'format-' + field.format]">
59	<div class="wpuf-name-field-first-name">
60	<input
61	type="text"
62	:class="class_names('textfield')"
63	:placeholder="field.first_name.placeholder"
64	:value="field.first_name.default"
65	:size="field.size"
66	>
67	<label class="wpuf-form-sub-label" v-if="!field.hide_subs">{{ field.first_name.sub }}</label>
68	</div>
69
70	<div class="wpuf-name-field-middle-name">
71	<input
72	type="text"
73	:class="class_names('textfield')"
74	:placeholder="field.middle_name.placeholder"
75	:value="field.middle_name.default"
76	:size="field.size"
77	>
78	<label class="wpuf-form-sub-label" v-if="!field.hide_subs">{{ field.middle_name.sub }}</label>
79	</div>
80
81	<div class="wpuf-name-field-last-name">
82	<input
83	type="text"
84	:class="class_names('textfield')"
85	:placeholder="field.last_name.placeholder"
86	:value="field.last_name.default"
87	:size="field.size"
88	>
89	<label class="wpuf-form-sub-label" v-if="!field.hide_subs">{{ field.last_name.sub }}</label>
90	</div>
91	</div>
92
93	<span v-if="field.help" class="wpuf-help">{{ field.help }}</span>
94	</div>
95	</script>
96
97	<script type="text/x-template" id="tmpl-wpuf-integration">
98	<div class="wpuf-integrations-wrap">
99
100	<template v-if="hasIntegrations">
101	<div :class="['wpuf-integration', isAvailable(integration.id) ? '' : 'collapsed']" v-for="integration in integrations">
102	<div class="wpuf-integration-header">
103	<div class="wpuf-integration-header-toggle">
104	<span :class="['wpuf-toggle-switch', 'big', isActive(integration.id) ? 'checked' : '']" v-on:click="toggleState(integration.id, $event.target)"></span>
105	</div>
106	<div class="wpuf-integration-header-label">
107	<img class="icon" :src="integration.icon" :alt="integration.title">
108	{{ integration.title }} <span class="label-premium" v-if="!isAvailable(integration.id)"><?php _e( 'Premium Feature', 'best-contact-form' ); ?></span>
109	</div>
110
111	<div class="wpuf-integration-header-actions">
112	<button type="button" class="toggle-area" v-on:click="showHide($event.target)">
113	<span class="screen-reader-text"><?php _e( 'Toggle panel', 'best-contact-form' ); ?></span>
114	<span class="toggle-indicator"></span>
115	</button>
116	</div>
117	</div>
118
119	<div class="wpuf-integration-settings">
120
121	<div v-if="isAvailable(integration.id)">
122	<component :is="'wpuf-integration-' + integration.id" :id="integration.id"></component>
123	</div>
124	<div v-else>
125	<?php _e( 'This feature is available on the premium version only.', 'best-contact-form' ); ?>
126	<a class="button" :href="pro_link" target="_blank"><?php _e( 'Upgrade to Pro', 'best-contact-form' ); ?></a>
127	</div>
128
129	</div>
130	</div>
131	</template>
132
133	<div v-else>
134	<?php _e( 'No integration found.', 'best-contact-form' ); ?>
135	</div>
136	</div></script>
137
138	<script type="text/x-template" id="tmpl-wpuf-integration-erp">
139	<div>
140
141	<?php if ( !function_exists( 'erp_crm_get_contact_groups' ) ) : ?>
142
143	<p>
144	<?php printf( __( '<a href="%s" target="_blank">WP ERP</a> plugin is not installed. Please install the plugin first.', 'weforms' ), 'https://wordpress.org/plugins/erp/' ); ?>
145	</p>
146
147	<?php else : ?>
148	<?php
149	$erp_contact_groups = erp_crm_get_contact_groups( array(
150	'number' => -1,
151	'orderby' => 'name',
152	'order' => 'ASC',
153	) );
154	?>
155
156	<div class="wpuf-int-form-row">
157	<div class="wpuf-int-field-label">
158	<label for="erp-group-id"><?php _e( 'Contact Group', 'weforms' ); ?></label>
159	</div>
160	<div class="wpuf-int-field">
161	<ul style="margin: 0;">
162	<?php foreach ( $erp_contact_groups as $group ): ?>
163	<li>
164	<label>
165	<input type="checkbox" v-model="settings.group" class="checkbox" value="<?php echo $group->id; ?>">
166	<?php echo $group->name; ?>
167	</label>
168	</li>
169	<?php endforeach; ?>
170	</ul>
171	</div>
172	</div>
173
174	<div class="wpuf-int-form-row">
175	<div class="wpuf-int-field-label">
176	<label for="erp-group-id"><?php _e( 'Life Stage', 'weforms' ); ?></label>
177	</div>
178	<div class="wpuf-int-field">
179	<select v-model="settings.stage">
180	<?php echo erp_crm_get_life_stages_dropdown(); ?>
181	</select>
182	</div>
183	</div>
184
185	<fieldset>
186	<legend><?php _e( 'Mapping Fields', 'weforms' ); ?></legend>
187
188	<p class="description" style="padding: 0 0 10px 0;">
189	<?php _e( 'Please map the form input fields with ERP required fields', 'weforms' ); ?>
190	</p>
191
192	<div class="wpuf-int-form-row mapping-fields">
193	<div class="wpuf-int-field-label">
194	<label><?php _e( 'Email Address', 'default' ); ?> <span class="required">*</span></label>
195	</div>
196	<div class="wpuf-int-field">
197	<div class="wpuf-int-field-small">
198	<input type="email" class="regular-text" v-model="settings.fields.email">
199	<wpuf-merge-tags filter="email_address" v-on:insert="insertValue" field="email"></wpuf-merge-tags>
200	</div>
201	</div>
202	</div>
203
204	<div class="wpuf-int-form-row">
205	<div class="wpuf-int-field-label">
206	<label><?php _e( 'First Name', 'default' ); ?></label>
207	</div>
208	<div class="wpuf-int-field">
209	<div class="wpuf-int-field-small">
210	<input type="text" class="regular-text" v-model="settings.fields.first_name">
211	<wpuf-merge-tags v-on:insert="insertValue" field="first_name"></wpuf-merge-tags>
212	</div>
213	</div>
214	</div>
215
216	<div class="wpuf-int-form-row">
217	<div class="wpuf-int-field-label">
218	<label><?php _e( 'Last Name', 'default' ); ?></label>
219	</div>
220	<div class="wpuf-int-field">
221	<div class="wpuf-int-field-small">
222	<input type="text" class="regular-text" v-model="settings.fields.last_name">
223	<wpuf-merge-tags v-on:insert="insertValue" field="last_name"></wpuf-merge-tags>
224	</div>
225	</div>
226	</div>
227	</fieldset>
228
229	<?php endif; ?>
230	</div></script>
231
232	<script type="text/x-template" id="tmpl-wpuf-integration-slack">
233	<div>
234	<div class="wpuf-int-form-row">
235	<div class="wpuf-int-field-label">
236	<label for="mailchimp-list-id"><?php _e( 'Slack Webhook URL', 'weforms' ); ?></label>
237	</div>
238	<div class="wpuf-int-field">
239	<input type="url" class="regular-text" v-model="settings.url" placeholder="https://hooks.slack.com/services/...">
240	<p class="help"><?php _e( 'Slack webhook URL to send our JSON payloads', 'weforms' ); ?></p>
241	</div>
242	</div>
243	</div></script>
244
245	<script type="text/x-template" id="tmpl-wpuf-merge-tags">
246	<div class="wpuf-merge-tag-wrap">
247	<a href="#" v-on:click.prevent="toggleFields($event)" class="merge-tag-link" title="<?php echo esc_attr( 'Click to toggle merge tags', 'wpuf' ); ?>"><span class="dashicons dashicons-editor-code"></span></a>
248
249	<!-- <pre>{{ form_fields.length }}</pre> -->
250
251	<div class="wpuf-merge-tags">
252	<div class="merge-tag-section">
253	<div class="merge-tag-head"><?php _e( 'Form Fields', 'wpuf' ); ?></div>
254
255	<ul>
256	<template v-if="form_fields.length">
257	<li v-for="field in form_fields">
258
259	<template v-if="field.template === 'name_field'">
260	<a href="#" v-on:click.prevent="insertField('name-full', field.name);">{{ field.label }}</a>
261	(
262	<a href="#" v-on:click.prevent="insertField('name-first', field.name);"><?php _e( 'first', 'wpuf' ); ?></a> \|
263	<a href="#" v-on:click.prevent="insertField('name-middle', field.name);"><?php _e( 'middle', 'wpuf' ); ?></a> \|
264	<a href="#" v-on:click.prevent="insertField('name-last', field.name);"><?php _e( 'last', 'wpuf' ); ?></a>
265	)
266	</template>
267
268	<template v-else-if="field.template === 'image_upload'">
269	<a href="#" v-on:click.prevent="insertField('image', field.name);">{{ field.label }}</a>
270	</template>
271
272	<template v-else-if="field.template === 'file_upload'">
273	<a href="#" v-on:click.prevent="insertField('file', field.name);">{{ field.label }}</a>
274	</template>
275
276	<a v-else href="#" v-on:click.prevent="insertField('field', field.name);">{{ field.label }} </a>
277
278	</li>
279	</template>
280	<li v-else><?php _e( 'No fields available', 'wpuf' ); ?></li>
281	</ul>
282	</div><!-- .merge-tag-section -->
283
284	<?php
285	if ( function_exists( 'weforms_get_merge_tags' ) ) {
286
287	$merge_tags = weforms_get_merge_tags();
288
289	foreach ($merge_tags as $section_key => $section) {
290	?>
291
292	<div class="merge-tag-section">
293	<div class="merge-tag-head"><?php echo $section['title'] ?></div>
294
295	<ul>
296	<?php foreach ($section['tags'] as $key => $value) { ?>
297	<li>
298	<a href="#" v-on:click.prevent="insertField('<?php echo $key; ?>');"><?php echo $value; ?></a>
299	</li>
300	<?php } ?>
301	</ul>
302	</div><!-- .merge-tag-section -->
303
304	<?php
305	}
306	}
307	?>
308	</div><!-- .merge-tags -->
309	</div></script>
310
311	<script type="text/x-template" id="tmpl-wpuf-modal">
312	<div>
313	<div :class="['wpuf-form-template-modal', show ? 'show' : 'hide' ]">
314
315	<span class="screen-reader-text"><?php _e( 'Modal window. Press escape to close.', 'wpuf' ); ?></span>
316	<a href="#" class="close" v-on:click.prevent="closeModal()">× <span class="screen-reader-text"><?php _e( 'Close modal window', 'wpuf' ); ?></span></a>
317
318	<header class="modal-header">
319	<slot name="header"></slot>
320	</header>
321
322	<div :class="['content-container', this.$slots.footer ? 'modal-footer' : 'no-footer']">
323	<div class="content">
324	<slot name="body"></slot>
325	</div>
326	</div>
327
328	<footer v-if="this.$slots.footer">
329	<slot name="footer"></slot>
330	</footer>
331	</div>
332	<div :class="['wpuf-form-template-modal-backdrop', show ? 'show' : 'hide' ]"></div>
333	</div>
334	</script>
335
336	<script type="text/x-template" id="tmpl-wpuf-template-modal">
337	<div class="wefroms-form-templates">
338	<wpuf-modal :show.sync="show" :onClose="onClose">
339	<h2 slot="header">
340	<?php _e( 'Select a Template', 'weforms' ); ?>
341	<small><?php printf( __( 'Select from a pre-defined template or from a <a href="#" %s>blank form</a>', 'weforms' ), '@click.prevent="blankForm()"' ); ?></small>
342
343	<span class="choose-form-categroy">
344	<?php _e( 'Select Category', 'weforms' ); ?>
345	<select v-model="category">
346	<option value="all">All</option>
347	<?php
348	$registry = weforms()->templates->get_templates();
349	$categories = weforms_get_form_template_categories();
350	$colors = weforms_get_flat_ui_colors();
351
352	foreach ( $categories as $key => $category ) {
353	printf( '<option value="%s">%s</option>', $key, $category['name'] );
354	}
355	?>
356	</select>
357	</span>
358	</h2>
359
360	<div slot="body">
361
362	<?php
363
364	// remove the blank form from index as it's handled separately
365	if ( array_key_exists( 'blank', $registry ) ) {
366	unset( $registry['blank'] );
367	}
368
369	foreach ($categories as $category_id => $category) {
370
371	?>
372	<div class="clearfix" v-if="category=='<?php echo $category_id; ?>' \|\| category=='all'">
373
374	<?php
375
376	printf( '<h2><i class="%s" style="color: %s"></i>   %s</h2> <ul class="clearfix">',$category['icon'], $colors[array_rand($colors)], $category['name'] );
377
378	if ( $category_id == 'default' ) {
379
380	?>
381
382	<li class="blank-form">
383	<h3><?php _e( 'Blank Form', 'weforms' ); ?></h3>
384
385	<div class="blank-form-text">
386	<span class="dashicons dashicons-plus"></span>
387	<div class="title"><?php _e( 'Blank Form', 'weforms' ); ?></div>
388	</div>
389
390	<div class="form-create-overlay">
391
392	<div class="title"><?php _e( 'Blank Form', 'weforms' ); ?></div>
393	<br>
394	<button class="button button-primary" @click.prevent="blankForm($event.target)" title="<?php echo esc_attr('Blank Form'); ?>">
395	<?php _e('Create Form', 'weforms' ); ?>
396	</button>
397	</div>
398	</li>
399
400	<?php
401	}
402
403	foreach ( $registry as $key => $template ) {
404
405	if ( $category_id !== $template->category ) {
406	continue;
407	}
408
409	$class = 'template-active';
410	$title = $template->title;
411	$image = $template->image ? $template->image : '';
412
413	if ( ! $template->is_enabled() ) {
414	$class = 'template-inactive';
415	$title = __( 'This integration is not installed.', 'weforms' );
416	}
417
418	?>
419
420	<li>
421	<h3><?php _e( $title, 'weforms' ); ?></h3>
422
423	<?php if ( $image ) { printf( '<img src="%s" alt="%s">', $image, $title ); } ?>
424
425	<div class="form-create-overlay">
426
427	<div class="title"><?php echo $template->get_title(); ?></div>
428	<div class="description"><?php echo $template->get_description(); ?></div>
429	<br>
430	<button class="button button-primary" @click.prevent="createForm('<?php echo $key; ?>', $event.target)" title="<?php echo esc_attr( $title ); ?>">
431	<?php _e('Create Form', 'weforms' ); ?>
432	</button>
433	</div>
434	</li>
435	<?php
436	}
437
438
439	?>
440
441	</ul></div>
442
443	<?php
444	}
445	?>
446	</div>
447	</wpuf-modal>
448	</div></script>
449