elementor / modules / atomic-widgets / elements / atomic-form / atomic-form.php

atomic-form.php in Elementor Website Builder – more than just a page builder 4.0.0-beta1, at modules/atomic-widgets/elements/atomic-form/atomic-form.php

360 lines 11.3 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Modules\AtomicWidgets\Elements\Atomic_Form;
3
4	use Elementor\Modules\AtomicWidgets\Controls\Section;
5	use Elementor\Modules\AtomicWidgets\Controls\Types\Chips_Control;
6	use Elementor\Modules\AtomicWidgets\Controls\Types\Email_Form_Action_Control;
7	use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control;
8	use Elementor\Modules\AtomicWidgets\Controls\Types\Toggle_Control;
9	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Paragraph\Atomic_Paragraph;
10	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Form_Success_Message\Form_Success_Message;
11	use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Form_Error_Message\Form_Error_Message;
12	use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Element_Base;
13	use Elementor\Modules\AtomicWidgets\Elements\Base\Element_Builder;
14	use Elementor\Modules\AtomicWidgets\Elements\Base\Has_Element_Template;
15	use Elementor\Modules\AtomicWidgets\Elements\Base\Widget_Builder;
16	use Elementor\Modules\AtomicWidgets\PropDependencies\Manager as Dependency_Manager;
17	use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type;
18	use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
19	use Elementor\Modules\AtomicWidgets\PropTypes\Email_Prop_Type;
20	use Elementor\Modules\AtomicWidgets\PropTypes\Key_Value_Prop_Type;
21	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Number_Prop_Type;
22	use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
23	use Elementor\Modules\AtomicWidgets\PropTypes\Html_V3_Prop_Type;
24	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Array_Prop_Type;
25	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
26	use Elementor\Modules\AtomicWidgets\Styles\Style_Definition;
27	use Elementor\Modules\AtomicWidgets\Styles\Style_Variant;
28	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
29
30	if ( ! defined( 'ABSPATH' ) ) {
31	exit; // Exit if accessed directly.
32	}
33
34	class Atomic_Form extends Atomic_Element_Base {
35	use Has_Element_Template;
36
37	const BASE_STYLE_KEY = 'base';
38
39	public const ACTION_COLLECT_SUBMISSIONS = 'collect-submissions';
40	public const METADATA_REMOTE_IP = 'remote_ip';
41	public const METADATA_USER_AGENT = 'user_agent';
42
43	public function __construct( $data = [], $args = null ) {
44	parent::__construct( $data, $args );
45	$this->meta( 'is_container', true );
46	}
47
48	public static function get_type() {
49	return 'e-form';
50	}
51
52	public static function get_element_type(): string {
53	return self::get_type();
54	}
55
56	public function get_title() {
57	return esc_html__( 'Atomic Form', 'elementor' );
58	}
59
60	public function get_keywords() {
61	return [ 'atomic', 'form' ];
62	}
63
64	public function get_icon() {
65	return 'eicon-atomic-form';
66	}
67
68	protected static function define_props_schema(): array {
69	$email_dependencies = Dependency_Manager::make()
70	->where( [
71	'operator' => 'contains',
72	'path' => [ 'actions-after-submit' ],
73	'value' => 'email',
74	'effect' => 'hide',
75	] )
76	->get();
77
78	$submissions_metadata_dependencies = Dependency_Manager::make()
79	->where( [
80	'operator' => 'contains',
81	'path' => [ 'actions-after-submit' ],
82	'value' => self::ACTION_COLLECT_SUBMISSIONS,
83	'effect' => 'hide',
84	] )
85	->get();
86
87	return [
88	'classes' => Classes_Prop_Type::make()
89	->default( [] ),
90	'form-name' => String_Prop_Type::make()
91	->default( __( 'Form', 'elementor' ) ),
92	'form-state' => String_Prop_Type::make()
93	->enum( [ 'default', 'success', 'error' ] )
94	->default( 'default' )
95	->meta( 'generates_class', 'form-state-{value}' ),
96	'actions-after-submit' => String_Array_Prop_Type::make()
97	->default( [ String_Prop_Type::generate( 'email' ) ] ),
98	'submissions_metadata' => String_Array_Prop_Type::make()
99	->set_dependencies( $submissions_metadata_dependencies )
100	->default( [
101	String_Prop_Type::generate( self::METADATA_REMOTE_IP ),
102	String_Prop_Type::generate( self::METADATA_USER_AGENT ),
103	] ),
104	'email' => Email_Prop_Type::make()
105	->set_dependencies( $email_dependencies )
106	->default( [] ),
107	'attributes' => Attributes_Prop_Type::make(),
108	];
109	}
110
111	protected function define_atomic_controls(): array {
112	$state_control = Toggle_Control::bind_to( 'form-state' )
113	->set_label( __( 'States', 'elementor' ) )
114	->set_meta( [ 'topDivider' => true ] );
115
116	if ( $state_control instanceof Toggle_Control ) {
117	$state_control
118	->add_options( [
119	'default' => [
120	'title' => __( 'Normal', 'elementor' ),
121	],
122	'success' => [
123	'title' => __( 'Success', 'elementor' ),
124	],
125	'error' => [
126	'title' => __( 'Error', 'elementor' ),
127	],
128	] )
129	->set_exclusive( true )
130	->set_convert_options( true )
131	->set_size( 'tiny' )
132	->set_full_width( true );
133	}
134
135	return [
136	Section::make()
137	->set_label( __( 'Content', 'elementor' ) )
138	->set_items( [
139	Text_Control::bind_to( 'form-name' )
140	->set_label( __( 'Form Name', 'elementor' ) ),
141	$state_control,
142	Chips_Control::bind_to( 'actions-after-submit' )
143	->set_label( __( 'Actions after submit', 'elementor' ) )
144	->set_meta( [ 'topDivider' => true ] )
145	->set_options( [
146	[
147	'label' => __( 'Collect submissions', 'elementor' ),
148	'value' => self::ACTION_COLLECT_SUBMISSIONS,
149	],
150	[
151	'label' => __( 'Email', 'elementor' ),
152	'value' => 'email',
153	],
154	] ),
155	Chips_Control::bind_to( 'submissions_metadata' )
156	->set_label( __( 'Include metadata', 'elementor' ) )
157	->set_meta( [ 'topDivider' => true ] )
158	->set_options( [
159	[
160	'label' => __( 'User IP', 'elementor' ),
161	'value' => self::METADATA_REMOTE_IP,
162	],
163	[
164	'label' => __( 'User Agent', 'elementor' ),
165	'value' => self::METADATA_USER_AGENT,
166	],
167	] ),
168	Email_Form_Action_Control::bind_to( 'email' )
169	->set_meta( [
170	'topDivider' => true,
171	] ),
172	] ),
173	Section::make()
174	->set_label( __( 'Settings', 'elementor' ) )
175	->set_id( 'settings' )
176	->set_items( [
177	Text_Control::bind_to( '_cssid' )
178	->set_label( __( 'ID', 'elementor' ) )
179	->set_meta( $this->get_css_id_control_meta() ),
180	] ),
181	];
182	}
183
184	protected function define_base_styles(): array {
185	return [
186	static::BASE_STYLE_KEY => Style_Definition::make()
187	->add_variant(
188	Style_Variant::make()
189	->set_breakpoint( Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP )
190	->add_prop( 'display', String_Prop_Type::generate( 'flex' ) )
191	->add_prop( 'flex', String_Prop_Type::generate( '1' ) )
192	->add_prop( 'flex-direction', String_Prop_Type::generate( 'row' ) )
193	->add_prop( 'flex-wrap', String_Prop_Type::generate( 'wrap' ) )
194	->add_prop( 'gap', Size_Prop_Type::generate( [
195	'size' => 10,
196	'unit' => 'px',
197	] ) )
198	->add_prop( 'padding', Size_Prop_Type::generate( [
199	'size' => 20,
200	'unit' => 'px',
201	] ) )
202	),
203	static::BASE_STYLE_KEY . ' .e-form-checkbox-row' => Style_Definition::make()
204	->add_variant(
205	Style_Variant::make()
206	->add_prop( 'align-items', String_Prop_Type::generate( 'center' ) )
207	->add_prop( 'gap', Size_Prop_Type::generate( [
208	'size' => 8,
209	'unit' => 'px',
210	] ) )
211	->add_prop( 'padding', Size_Prop_Type::generate( [
212	'size' => 0,
213	'unit' => 'px',
214	] ) )
215	),
216	];
217	}
218
219	protected function define_panel_categories(): array {
220	return [ 'atomic-form' ];
221	}
222
223	protected function define_default_html_tag() {
224	return 'form';
225	}
226
227	protected function define_default_children() {
228
229	$prefix = 'e-form-';
230
231	return [
232	$this->build_label( __( 'First name', 'elementor' ), $prefix . 'first-name' ),
233	$this->build_input( __( 'First name', 'elementor' ), 'text', $prefix . 'first-name' ),
234
235	$this->build_label( __( 'Last name', 'elementor' ), $prefix . 'last-name' ),
236	$this->build_input( __( 'Last name', 'elementor' ), 'text', $prefix . 'last-name' ),
237
238	$this->build_label( __( 'Email', 'elementor' ), $prefix . 'email' ),
239	$this->build_input( __( '[email protected]', 'elementor' ), 'email', $prefix . 'email' ),
240
241	$this->build_label( __( 'Message', 'elementor' ), $prefix . 'message' ),
242	$this->build_input( __( 'Your message', 'elementor' ), 'textarea', $prefix . 'message' ),
243
244	$this->build_checkbox_row( __( 'Checkbox', 'elementor' ), $prefix . 'checkbox' ),
245
246	Widget_Builder::make( 'e-form-submit-button' )
247	->settings( [
248	'text' => Html_V3_Prop_Type::generate( [
249	'content' => String_Prop_Type::generate( __( 'Submit', 'elementor' ) ),
250	'children' => [],
251	] ),
252	] )
253	->build(),
254	$this->build_status_message(
255	__( 'Great! We’ve received your information.', 'elementor' ),
256	'success',
257	__( 'Success message', 'elementor' )
258	),
259	$this->build_status_message(
260	__( 'We couldn’t process your submission. Please retry', 'elementor' ),
261	'error',
262	__( 'Error message', 'elementor' )
263	),
264	];
265	}
266
267	private function build_checkbox_row( string $label_text, string $checkbox_id ): array {
268	$checkbox = Widget_Builder::make( 'e-form-checkbox' )
269	->settings( [
270	'_cssid' => String_Prop_Type::generate( $checkbox_id ),
271	] )
272	->build();
273
274	$label = $this->build_label( $label_text, $checkbox_id );
275
276	return Element_Builder::make( 'e-flexbox' )
277	->children( [ $checkbox, $label ] )
278	->settings( [
279	'classes' => Classes_Prop_Type::generate( [ 'e-form-checkbox-row' ] ),
280	] )
281	->build();
282	}
283
284	private function build_label( string $text, string $input_id ): array {
285	return Widget_Builder::make( 'e-form-label' )
286	->settings( [
287	'text' => Html_V3_Prop_Type::generate( [
288	'content' => String_Prop_Type::generate( $text ),
289	'children' => [],
290	] ),
291	'input-id' => String_Prop_Type::generate( $input_id ),
292	] )
293	->build();
294	}
295
296	private function build_input( string $placeholder, string $type = 'text', $input_id = '' ): array {
297	if ( 'textarea' === $type ) {
298	return Widget_Builder::make( 'e-form-textarea' )
299	->settings( [
300	'placeholder' => String_Prop_Type::generate( $placeholder ),
301	'rows' => Number_Prop_Type::generate( 4 ),
302	'_cssid' => String_Prop_Type::generate( $input_id ),
303	] )
304	->build();
305	}
306
307	return Widget_Builder::make( 'e-form-input' )
308	->settings( [
309	'placeholder' => String_Prop_Type::generate( $placeholder ),
310	'type' => String_Prop_Type::generate( $type ),
311	'_cssid' => String_Prop_Type::generate( $input_id ),
312	] )
313	->build();
314	}
315
316	private function build_status_message( string $message, string $state, string $title ): array {
317	$paragraph_value = Html_V3_Prop_Type::generate( [
318	'content' => String_Prop_Type::generate( $message ),
319	'children' => [],
320	] );
321
322	$element_type = 'success' === $state
323	? Form_Success_Message::get_element_type()
324	: Form_Error_Message::get_element_type();
325
326	return Element_Builder::make( $element_type )
327	->settings( [
328	'attributes' => Attributes_Prop_Type::generate( [
329	Key_Value_Prop_Type::generate( [] ),
330	] ),
331	] )
332	->editor_settings( [
333	'title' => $title,
334	] )
335	->children( [
336	Widget_Builder::make( Atomic_Paragraph::get_element_type() )
337	->settings( [
338	'paragraph' => $paragraph_value,
339	] )
340	->build(),
341	] )
342	->is_locked( true )
343	->build();
344	}
345
346	protected function get_templates(): array {
347	return [
348	'elementor/elements/atomic-form' => __DIR__ . '/atomic-form.html.twig',
349	];
350	}
351
352	protected function build_template_context(): array {
353	$context = $this->build_base_template_context();
354
355	$context['form_state'] = 'default';
356
357	return $context;
358	}
359	}
360