wp-commerce7 / includes / elementor / elementor-form.php

elementor-form.php in Commerce7 for WordPress trunk, at includes/elementor/elementor-form.php

274 lines 7.6 KB

Raw Download Zip

1	<?php
2	/**
3	* Elementor widget: Marketing Form
4	*
5	* Created Date: Wednesday September 2nd 2020
6	* Author: Michael Bourne
7	* -----
8	* Last Modified: Thursday, January 9th 2025, 1:51:33 pm
9	* Modified By: Michael Bourne
10	* -----
11	* Copyright (c) 2020 URSA6
12	*
13	* @package wp-commerce7
14	* @author Michael Bourne
15	* @license GPL3
16	* @link https://ursa6.com
17	* @since 1.0.8
18	*/
19
20	if ( ! defined( 'ABSPATH' ) ) {
21	return;
22	}
23
24
25	/**
26	* Widget class
27	*/
28	class C7WP_Elementor_Form extends \Elementor\Widget_Base {
29
30
31	/**
32	* Get widget name.
33	*
34	* Retrieve Commerce7 widget name.
35	*
36	* @since 1.0.0
37	* @access public
38	*
39	* @return string Widget name.
40	*/
41	public function get_name() {
42	return 'commerce7-form';
43	}
44
45	/**
46	* Get widget title.
47	*
48	* Retrieve Commerce7 widget title.
49	*
50	* @since 1.0.0
51	* @access public
52	*
53	* @return string Widget title.
54	*/
55	public function get_title() {
56	return __( 'Marketing Form', 'wp-commerce7' );
57	}
58
59	/**
60	* Get widget icon.
61	*
62	* Retrieve Commerce7 widget icon.
63	*
64	* @since 1.0.0
65	* @access public
66	*
67	* @return string Widget icon.
68	*/
69	public function get_icon() {
70	return 'c7icon-c7sm';
71	}
72
73	/**
74	* Get widget categories.
75	*
76	* Retrieve the list of categories the widget belongs to.
77	*
78	* @since 1.0.0
79	* @access public
80	*
81	* @return array Widget categories.
82	*/
83	public function get_categories() {
84	return [ 'commerce7' ];
85	}
86
87	/**
88	* Retrieve widget keywords.
89	*
90	* @since 1.0.0
91	* @access public
92	*
93	* @return array Widget keywords.
94	*/
95	public function get_keywords() {
96	return [ 'commerce7', 'form' ];
97	}
98
99	/**
100	* Register widget controls.
101	*
102	* Adds different input fields to allow the user to change and customize the widget settings.
103	*
104	* @since 1.0.0
105	* @access protected
106	*/
107	protected function register_controls() { // phpcs:ignore
108
109	$this->start_controls_section(
110	'content_section',
111	[
112	'label' => __( 'Settings', 'wp-commerce7' ),
113	'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
114	]
115	);
116
117	$this->add_control(
118	'preview_notice',
119	[
120	'type' => \Elementor\Controls_Manager::RAW_HTML,
121	'raw' => '<div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 10px; border-radius: 4px; margin-bottom: 15px;"><strong>Preview Notice:</strong> The preview shown in your editor is for example purposes only, it does not reflect the form you provide nor is it interactive.</div>',
122	'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
123	]
124	);
125
126	$this->add_control(
127	'data',
128	[
129	'label' => __( 'Form Slug', 'wp-commerce7' ),
130	'type' => \Elementor\Controls_Manager::TEXT,
131	'placeholder' => __( 'contact-us', 'wp-commerce7' ),
132	]
133	);
134
135	$this->end_controls_section();
136
137	}
138
139	/**
140	* Render Commerce widget output on the frontend.
141	*
142	* Written in PHP and used to generate the final HTML.
143	*
144	* @since 1.0.0
145	* @access protected
146	*/
147	protected function render() {
148
149	$settings = $this->get_settings_for_display();
150
151	$data = esc_attr( $settings['data'] );
152
153	// Show preview in Elementor editor, shortcode on frontend
154	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() \|\| \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
155	$slugProvided = !empty( $data );
156	?>
157	<div class="c7-custom-form-placeholder" data-form-code="<?php echo esc_attr( $data ); ?>">
158	<?php if ( $slugProvided ) : ?>
159	<form class="c7-form">
160	<fieldset>
161	<legend class="c7-sr-only">Contact Us</legend>
162	<div class="c7-form__field">
163	<label class="c7-required">First & Last Name</label>
164	<input name="fullName" type="text" value="" disabled tabindex="-1">
165	</div>
166	<div class="c7-form__field">
167	<label class="c7-required">Country</label>
168	<select name="countryCode" disabled tabindex="-1">
169	<option value="CA">Canada</option>
170	<option value="US">United States</option>
171	</select>
172	</div>
173	<div class="c7-form__field">
174	<label>Phone</label>
175	<input name="phone" type="tel" value="" disabled tabindex="-1">
176	</div>
177	<div class="c7-form__field">
178	<label class="c7-required">Email</label>
179	<input name="email" type="email" value="" disabled tabindex="-1">
180	</div>
181	<div class="c7-form__field">
182	<label class="c7-required">Questions/Comments</label>
183	<textarea name="questions-comments" rows="3" disabled tabindex="-1"></textarea>
184	</div>
185	</fieldset>
186	<div class="c7-form__buttons">
187	<button type="submit" class="c7-btn c7-btn--primary" disabled tabindex="-1">
188	<span>Submit</span>
189	</button>
190	</div>
191	</form>
192	<?php else : ?>
193	<div class="c7-message c7-message--alert-error" role="presentation">
194	<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
195	<circle cx="12" cy="12" r="10"></circle>
196	<line x1="12" y1="8" x2="12" y2="12"></line>
197	<line x1="12" y1="16" x2="12.01" y2="16"></line>
198	</svg>
199	Please enter a form slug in the widget settings
200	</div>
201	<?php endif; ?>
202	</div>
203	<?php
204	} else {
205	// Frontend - show actual shortcode
206	echo do_shortcode( '[c7wp type="form" data="' . $data . '"]' );
207	}
208
209	}
210
211	/**
212	* Render widget output in the editor.
213	*
214	* Written as a Backbone JavaScript template and used to generate the live preview.
215	*
216	* @since 1.0.0
217	* @access protected
218	*/
219	protected function content_template() {
220	?>
221	<#
222	var slugProvided = settings.data && settings.data.length > 0;
223	#>
224	<div class="c7-custom-form-placeholder" data-form-code="{{{ settings.data }}}">
225	<# if (slugProvided) { #>
226	<form class="c7-form">
227	<fieldset>
228	<legend class="c7-sr-only">Contact Us</legend>
229	<div class="c7-form__field">
230	<label class="c7-required">First & Last Name</label>
231	<input name="fullName" type="text" value="" disabled tabindex="-1">
232	</div>
233	<div class="c7-form__field">
234	<label class="c7-required">Country</label>
235	<select name="countryCode" disabled tabindex="-1">
236	<option value="CA">Canada</option>
237	<option value="US">United States</option>
238	</select>
239	</div>
240	<div class="c7-form__field">
241	<label>Phone</label>
242	<input name="phone" type="tel" value="" disabled tabindex="-1">
243	</div>
244	<div class="c7-form__field">
245	<label class="c7-required">Email</label>
246	<input name="email" type="email" value="" disabled tabindex="-1">
247	</div>
248	<div class="c7-form__field">
249	<label class="c7-required">Questions/Comments</label>
250	<textarea name="questions-comments" rows="3" disabled tabindex="-1"></textarea>
251	</div>
252	</fieldset>
253	<div class="c7-form__buttons">
254	<button type="submit" class="c7-btn c7-btn--primary" disabled tabindex="-1">
255	<span>Submit</span>
256	</button>
257	</div>
258	</form>
259	<# } else { #>
260	<div class="c7-message c7-message--alert-error" role="presentation">
261	<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
262	<circle cx="12" cy="12" r="10"></circle>
263	<line x1="12" y1="8" x2="12" y2="12"></line>
264	<line x1="12" y1="16" x2="12.01" y2="16"></line>
265	</svg>
266	Please enter a form slug in the widget settings
267	</div>
268	<# } #>
269	</div>
270	<?php
271	}
272	public function render_plain_content( $instance = [] ) {}
273
274	}