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-dev4, at modules/atomic-widgets/elements/atomic-form/atomic-form.php

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