Contact Form7 Widget For Elementor Page Builder - Version 2.0

Version Description

  • New: Added many style option in Style tab
Download this release

Release Info

Developer voidcoders
Plugin Icon 128x128 Contact Form7 Widget For Elementor Page Builder
Version 2.0
Comparing to
See all releases

Code changes from version 1.1.9 to 2.0

Files changed (3) hide show
  1. readme.txt +15 -6
  2. void-cf7-widget-elementor.php +2 -2
  3. widgets/void-section-cf7.php +1346 -1
readme.txt CHANGED
@@ -1,9 +1,9 @@
1
  === Void Contact Form 7 Widget For Elementor Page Builder ===
2
  Contributors: voidthemes,voidcoders,soyket,shawon786
3
- Tags: page-builder, elementor, cf7, contact-form-7, contact-form-7 widget, widget, elementor add on, email, contact, form
4
  Requires at least: 4.4
5
  Tested up to: 5.8.2
6
- Stable tag: 1.1.9
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -17,7 +17,8 @@ You must have [Contact form 7](https://wordpress.org/plugins/contact-form-7/) in
17
  This plugin adds new element / widget to Elementor Page Builder which helps you to easily drag and drop contact form 7 forms from a drop down list. No need of going in cf7 & copying the shortcode and addding to shortcode widget of elementor anymore !!
18
 
19
  * Check out our new feature to edit and create contact form from elementor editor. You don't need to leave elementor editor to modify or create contact form 7. boom!
20
- * Now only Drag and drop the widget inside elementor builder & choose your contact form ! Done !
 
21
  * Want to define style for input, lable, send button, success ? No problem ! This plugin let's you do those directly from elementor screen!
22
  * Want to add custom page to redirect to when the form is submitted ? That is also possible now !
23
  Yet this is just a simple plugin for simple users :)
@@ -28,14 +29,20 @@ For more details :[VOID CF7 Elementor Widget](https://voidcoders.com/product/con
28
  For our other elementor & WP works visit : [VOID CODERS](https://voidcoders.com).
29
 
30
  For updates follow us on : [Facebook](https://www.facebook.com/voidcoders).
 
 
 
31
  <h3>Need to design Contact form 7 Emails with Elementor? </h3> 👉[Check Elemailer - A drag & drop email builder for WordPress](https://elemailer.com?utm_source=void-cf7-repo&utm_medium=wordpressrepo&utm_id=cf7-org).
32
 
33
- New updates ( Edit/Add contact from inside Elementor )
 
 
34
 
 
35
 
36
  [youtube https://youtu.be/ZI0GMJoESaw]
37
 
38
- Latest Version Preview
39
  [youtube https://youtu.be/MlzrZ0zXM24]
40
 
41
  Older Version Preview
@@ -63,7 +70,7 @@ Note: This plugin is an addon of Elementor Page Builder (https://wordpress.org/p
63
 
64
  = Where can to find the new element added =
65
 
66
- Our Contact Form7 Widget For Elementor Page Builder adds a new section in the elementor live page builder named : VOID ELEMENTS. There you will see the widget called -Void Contact form 7- which you can drag and drop and config settings
67
 
68
 
69
  == Screenshots ==
@@ -78,6 +85,8 @@ Our Contact Form7 Widget For Elementor Page Builder adds a new section in the el
78
  Update the plugin either via wp dashboard or via FTP. After update make sure you clear your browser cache.
79
 
80
  == Changelog ==
 
 
81
  = 1.1.9 =
82
  * Fix: Tweak for banner
83
  * Fix: Compatiblity with latest Elementor & Elementor pro
1
  === Void Contact Form 7 Widget For Elementor Page Builder ===
2
  Contributors: voidthemes,voidcoders,soyket,shawon786
3
+ Tags: contact form, elementor, cf7, contact-form-7, contact-form-7 widget, page-builder, widget, elementor add on, email, contact, form
4
  Requires at least: 4.4
5
  Tested up to: 5.8.2
6
+ Stable tag: 2.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
17
  This plugin adds new element / widget to Elementor Page Builder which helps you to easily drag and drop contact form 7 forms from a drop down list. No need of going in cf7 & copying the shortcode and addding to shortcode widget of elementor anymore !!
18
 
19
  * Check out our new feature to edit and create contact form from elementor editor. You don't need to leave elementor editor to modify or create contact form 7. boom!
20
+ * Now only Drag and drop the widget inside elementor builder & choose your contact form.
21
+ * Multiple style options, hover, focus and even custom css option if you are into it.
22
  * Want to define style for input, lable, send button, success ? No problem ! This plugin let's you do those directly from elementor screen!
23
  * Want to add custom page to redirect to when the form is submitted ? That is also possible now !
24
  Yet this is just a simple plugin for simple users :)
29
  For our other elementor & WP works visit : [VOID CODERS](https://voidcoders.com).
30
 
31
  For updates follow us on : [Facebook](https://www.facebook.com/voidcoders).
32
+
33
+ Missing a feature or Found a bug? : [Feature Request / Bug Report](https://feedback.userreport.com/87deacdd-b91b-43cb-a92d-b53a10b7f6e2/#ideas/recent).
34
+
35
  <h3>Need to design Contact form 7 Emails with Elementor? </h3> 👉[Check Elemailer - A drag & drop email builder for WordPress](https://elemailer.com?utm_source=void-cf7-repo&utm_medium=wordpressrepo&utm_id=cf7-org).
36
 
37
+ Version 2.0 Preview ( New Style controls with hover, focus, gradient etc )
38
+
39
+ [youtube https://youtu.be/_vMHL6doikw]
40
 
41
+ Edit/Add contact from inside Elementor
42
 
43
  [youtube https://youtu.be/ZI0GMJoESaw]
44
 
45
+ Another Preview
46
  [youtube https://youtu.be/MlzrZ0zXM24]
47
 
48
  Older Version Preview
70
 
71
  = Where can to find the new element added =
72
 
73
+ Our Contact Form7 Widget For Elementor Page Builder adds a new widget category in the elementor live page builder named : VOID ELEMENTS. There you will see the widget called -Void Contact form 7- which you can drag and drop and config settings
74
 
75
 
76
  == Screenshots ==
85
  Update the plugin either via wp dashboard or via FTP. After update make sure you clear your browser cache.
86
 
87
  == Changelog ==
88
+ = 2.0 =
89
+ * New: Added many style option in Style tab
90
  = 1.1.9 =
91
  * Fix: Tweak for banner
92
  * Fix: Compatiblity with latest Elementor & Elementor pro
void-cf7-widget-elementor.php CHANGED
@@ -3,7 +3,7 @@
3
  /**
4
  * Plugin Name: Void Contact Form 7 Widget For Elementor Page Builder
5
  * Description: Adds Contact Form 7 widget element to Elementor page builder for easy drag & drop the created contact forms with Contact Form 7
6
- * Version: 1.1.9
7
  * Author: voidCoders
8
  * Plugin URI: https://voidcoders.com/product/contact-form7-widget-for-elementor-free/
9
  * Author URI: https://voidcoders.com
@@ -16,7 +16,7 @@ use Account\AccountDataFactory;
16
 
17
  if (!defined('ABSPATH')) exit; // Exit if accessed directly
18
 
19
- define('CF7_WIDGET_E_VERSION', '1.1.9');
20
  define('CF7_WIDGET_E_PLUGIN_URL', trailingslashit(plugin_dir_url(__FILE__)));
21
  define('CF7_WIDGET_E_PLUGIN_DIR', trailingslashit(plugin_dir_path(__FILE__)));
22
 
3
  /**
4
  * Plugin Name: Void Contact Form 7 Widget For Elementor Page Builder
5
  * Description: Adds Contact Form 7 widget element to Elementor page builder for easy drag & drop the created contact forms with Contact Form 7
6
+ * Version: 2.0
7
  * Author: voidCoders
8
  * Plugin URI: https://voidcoders.com/product/contact-form7-widget-for-elementor-free/
9
  * Author URI: https://voidcoders.com
16
 
17
  if (!defined('ABSPATH')) exit; // Exit if accessed directly
18
 
19
+ define('CF7_WIDGET_E_VERSION', '2.0');
20
  define('CF7_WIDGET_E_PLUGIN_URL', trailingslashit(plugin_dir_url(__FILE__)));
21
  define('CF7_WIDGET_E_PLUGIN_DIR', trailingslashit(plugin_dir_path(__FILE__)));
22
 
widgets/void-section-cf7.php CHANGED
@@ -5,6 +5,9 @@ use Elementor\Widget_Base;
5
  use Elementor\Controls_Manager;
6
  use Elementor\Group_Control_Image_Size;
7
  use Elementor\Utils;
 
 
 
8
 
9
 
10
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
@@ -41,6 +44,16 @@ class void_cf7 extends Widget_Base {
41
  public function get_categories() {
42
  return [ 'void-elements' ]; // category of the widget
43
  }
 
 
 
 
 
 
 
 
 
 
44
 
45
  public function is_reload_preview_required() {
46
  return true;
@@ -96,10 +109,22 @@ protected function _register_controls() {
96
  $this->start_controls_section(
97
  'section_stype',
98
  [
99
- 'label' => esc_html__( 'Style Contact Form', 'void' ), //section name for controler view
 
100
  'tab' => Controls_Manager::TAB_CONTENT,
101
  ]
102
  );
 
 
 
 
 
 
 
 
 
 
 
103
 
104
  $this->add_control(
105
  'cf7_direct_css',
@@ -307,6 +332,1326 @@ protected function _register_controls() {
307
 
308
 
309
  $this->end_controls_section();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
310
  }
311
 
312
 
5
  use Elementor\Controls_Manager;
6
  use Elementor\Group_Control_Image_Size;
7
  use Elementor\Utils;
8
+ use Elementor\Core\Schemes\Color as Scheme_Color;
9
+ use Elementor\Core\Schemes\Typography as Scheme_Typography;
10
+
11
 
12
 
13
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
44
  public function get_categories() {
45
  return [ 'void-elements' ]; // category of the widget
46
  }
47
+ public function get_keywords()
48
+ {
49
+ return [
50
+ 'contact form',
51
+ 'form styler',
52
+ 'cf7',
53
+ 'void',
54
+ 'void contact form 7',
55
+ ];
56
+ }
57
 
58
  public function is_reload_preview_required() {
59
  return true;
109
  $this->start_controls_section(
110
  'section_stype',
111
  [
112
+ 'label' => esc_html__( 'Advanced Style (legacy)', 'void' ), //section name for controler view
113
+ 'description' => esc_html__( 'This area is intended for developers who knows CSS or for users who already have used this feature before. You should move to Style tab and use given controls to do the style more easily', 'void' ),
114
  'tab' => Controls_Manager::TAB_CONTENT,
115
  ]
116
  );
117
+
118
+
119
+ $this->add_control(
120
+ 'vcf7_depri',
121
+ [
122
+ 'type' => \Elementor\Controls_Manager::RAW_HTML,
123
+ 'raw' => __('This area is intended for developers who knows CSS or for users who already have used this feature before. You should move to Style tab and use given controls to do the style more easily','void'),
124
+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
125
+ ]
126
+ );
127
+
128
 
129
  $this->add_control(
130
  'cf7_direct_css',
332
 
333
 
334
  $this->end_controls_section();
335
+
336
+ $this->start_controls_section(
337
+ 'vcf7_section_email',
338
+ [
339
+ 'label' => esc_html__( 'Design Email', 'void' ), //section name for controler view
340
+ 'tab' => Controls_Manager::TAB_CONTENT,
341
+ ]
342
+ );
343
+
344
+ $this->add_control(
345
+ 'vcf7_elemailer_promo',
346
+ [
347
+ 'type' => \Elementor\Controls_Manager::RAW_HTML,
348
+ 'raw' => 'Drag & Drop Elementor Email builder for contact form 7 for free with <a target="_blank" href="https://elemailer.com/now-you-can-edit-your-contact-form-7-email-using-elementor/">Elemailer Lite </a><br><br>
349
+ ✨Elemailer Gives you more✨ <br><br>
350
+ <ul>
351
+ <li>🔥Subscriber</li>
352
+ <li>🔥Campaign</li>
353
+ <li>🔥Lists</li>
354
+ <li>🔥Woocommerce emails(coming..)</li>
355
+ <li>🔥Campaign</li>
356
+ <li>🔥Welcome emails</li>
357
+ <li>🔥Many more..</li>
358
+ </ul><br>
359
+ <a target="_blank" href="https://elemailer.com?utm_source=site&utm_medium=editor&utm_campaign=editor_inside&utm_id=cf7elemailer"><img src="https://elemailer.com/wp-content/uploads/2021/11/element_02.png"></a>. <br>',
360
+ ]
361
+ );
362
+
363
+
364
+ $this->end_controls_section();
365
+
366
+
367
+ // Our style tab
368
+ $this->start_controls_section(
369
+ 'vcf7_form_section_style',
370
+ [
371
+ 'label' => __( 'General Style', 'void' ),
372
+ 'tab' => Controls_Manager::TAB_STYLE,
373
+ ]
374
+ );
375
+
376
+
377
+ $this->add_responsive_control(
378
+ 'vcf7_form_section_align',
379
+ [
380
+ 'label' => __( 'Alignment', 'void' ),
381
+ 'type' => Controls_Manager::CHOOSE,
382
+ 'options' => [
383
+ 'left' => [
384
+ 'title' => __( 'Left', 'void' ),
385
+ 'icon' => 'eicon-text-align-left',
386
+ ],
387
+ 'center' => [
388
+ 'title' => __( 'Center', 'void' ),
389
+ 'icon' => 'eicon-text-align-center',
390
+ ],
391
+ 'right' => [
392
+ 'title' => __( 'Right', 'void' ),
393
+ 'icon' => 'eicon-text-align-right',
394
+ ],
395
+ 'justify' => [
396
+ 'title' => __( 'Justified', 'void' ),
397
+ 'icon' => 'eicon-text-align-justify',
398
+ ],
399
+ ],
400
+ 'selectors' => [
401
+ '{{WRAPPER}}' => 'text-align: {{VALUE}};',
402
+ ],
403
+ 'separator' =>'before',
404
+ ]
405
+ );
406
+
407
+ $this->end_controls_section();
408
+
409
+ // Input Field style tab start
410
+ $this->start_controls_section(
411
+ 'vcf7_vcf7_input_style',
412
+ [
413
+ 'label' => __( 'Input', 'void' ),
414
+ 'tab' => Controls_Manager::TAB_STYLE,
415
+ ]
416
+ );
417
+
418
+
419
+ $this->start_controls_tabs('input_style_tabs'); //start input area Normal/focus tabs
420
+
421
+ // Input Normal tab start
422
+ $this->start_controls_tab(
423
+ 'input_style_normal_tab',
424
+ [
425
+ 'label' => __( 'Normal', 'void' ),
426
+ ]
427
+ );
428
+
429
+ $this->add_responsive_control(
430
+ 'vcf7_input_box_height',
431
+ [
432
+ 'label' => __( 'Height', 'void' ),
433
+ 'type' => Controls_Manager::SLIDER,
434
+ 'size_units' => [ 'px', 'vh', 'vw' ],
435
+ 'range' => [
436
+ 'px' => [
437
+ 'max' => 400,
438
+ ],
439
+ ],
440
+
441
+
442
+ 'selectors' => [
443
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]' => 'height: {{SIZE}}{{UNIT}};',
444
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]' => 'height: {{SIZE}}{{UNIT}};',
445
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]' => 'height: {{SIZE}}{{UNIT}};',
446
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]' => 'height: {{SIZE}}{{UNIT}};',
447
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]' => 'height: {{SIZE}}{{UNIT}};',
448
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]' => 'height: {{SIZE}}{{UNIT}};',
449
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'height: {{SIZE}}{{UNIT}};',
450
+ ],
451
+ ]
452
+ );
453
+
454
+ $this->add_responsive_control(
455
+ 'vcf7_input_box_width',
456
+ [
457
+ 'label' => __( 'Width', 'void' ),
458
+ 'type' => Controls_Manager::SLIDER,
459
+ 'size_units' => [ 'px', 'vw', 'vh' ],
460
+ 'range' => [
461
+ 'px' => [
462
+ 'max' => 2000,
463
+ ],
464
+ ],
465
+
466
+
467
+ 'selectors' => [
468
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]' => 'width: {{SIZE}}{{UNIT}};',
469
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]' => 'width: {{SIZE}}{{UNIT}};',
470
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]' => 'width: {{SIZE}}{{UNIT}};',
471
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]' => 'width: {{SIZE}}{{UNIT}};',
472
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]' => 'width: {{SIZE}}{{UNIT}};',
473
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]' => 'width: {{SIZE}}{{UNIT}};',
474
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'width: {{SIZE}}{{UNIT}};',
475
+ ],
476
+ ]
477
+ );
478
+
479
+ $this->add_group_control(
480
+ \Elementor\Group_Control_Background::get_type(),
481
+ [
482
+ 'name' => 'vcf7_input_box_bg_grd',
483
+ 'types' => [ 'classic', 'gradient'],
484
+ 'label' => esc_html__( 'Background', 'void' ),
485
+ 'selector' =>
486
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"],
487
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"],
488
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"],
489
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"],
490
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"],
491
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"],
492
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select',
493
+
494
+ ]
495
+ );
496
+
497
+ $this->add_control(
498
+ 'vcf7_input_box_text_color',
499
+ [
500
+ 'label' => __( 'Text Color', 'void' ),
501
+ 'type' => Controls_Manager::COLOR,
502
+ 'selectors' => [
503
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]' => 'color: {{VALUE}};',
504
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]' => 'color: {{VALUE}};',
505
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]' => 'color: {{VALUE}};',
506
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]' => 'color: {{VALUE}};',
507
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]' => 'color: {{VALUE}};',
508
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]' => 'color: {{VALUE}};',
509
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'color: {{VALUE}};',
510
+ ],
511
+ ]
512
+ );
513
+
514
+ $this->add_group_control(
515
+ \Elementor\Group_Control_Border::get_type(),
516
+ [
517
+ 'name' => 'vcf7_input_box_border',
518
+ 'label' => __( 'Border', 'void' ),
519
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select',
520
+ ]
521
+ );
522
+
523
+ $this->add_responsive_control(
524
+ 'vcf7_input_box_border_radius',
525
+ [
526
+ 'label' => __( 'Border Radius', 'void' ),
527
+ 'type' => Controls_Manager::DIMENSIONS,
528
+ 'selectors' => [
529
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
530
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
531
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
532
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
533
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
534
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
535
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
536
+ ],
537
+ 'separator' =>'after',
538
+ ]
539
+ );
540
+
541
+ $this->end_controls_tab(); // input Normal tab end
542
+
543
+ // Input Focus tab start
544
+ $this->start_controls_tab(
545
+ 'input_style_focus_tab',
546
+ [
547
+ 'label' => __( 'Focus', 'void' ),
548
+ ]
549
+ );
550
+
551
+ $this->add_responsive_control(
552
+ 'vcf7_input_box_height_f',
553
+ [
554
+ 'label' => __( 'Height', 'void' ),
555
+ 'type' => Controls_Manager::SLIDER,
556
+ 'size_units' => [ 'px', 'vh', 'vw' ],
557
+ 'range' => [
558
+ 'px' => [
559
+ 'max' => 400,
560
+ ],
561
+ ],
562
+
563
+
564
+ 'selectors' => [
565
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:focus' => 'height: {{SIZE}}{{UNIT}};',
566
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:focus' => 'height: {{SIZE}}{{UNIT}};',
567
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:focus' => 'height: {{SIZE}}{{UNIT}};',
568
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:focus' => 'height: {{SIZE}}{{UNIT}};',
569
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:focus' => 'height: {{SIZE}}{{UNIT}};',
570
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:focus' => 'height: {{SIZE}}{{UNIT}};',
571
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select:focus' => 'height: {{SIZE}}{{UNIT}};',
572
+ ],
573
+ ]
574
+ );
575
+
576
+ $this->add_responsive_control(
577
+ 'vcf7_input_box_width_f',
578
+ [
579
+ 'label' => __( 'Width', 'void' ),
580
+ 'type' => Controls_Manager::SLIDER,
581
+ 'size_units' => [ 'px', 'vw', 'vh' ],
582
+ 'range' => [
583
+ 'px' => [
584
+ 'max' => 2000,
585
+ ],
586
+ ],
587
+
588
+
589
+ 'selectors' => [
590
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:focus' => 'width: {{SIZE}}{{UNIT}};',
591
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:focus' => 'width: {{SIZE}}{{UNIT}};',
592
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:focus' => 'width: {{SIZE}}{{UNIT}};',
593
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:focus' => 'width: {{SIZE}}{{UNIT}};',
594
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:focus' => 'width: {{SIZE}}{{UNIT}};',
595
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:focus' => 'width: {{SIZE}}{{UNIT}};',
596
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select:focus' => 'width: {{SIZE}}{{UNIT}};',
597
+ ],
598
+ ]
599
+ );
600
+
601
+ $this->add_group_control(
602
+ \Elementor\Group_Control_Background::get_type(),
603
+ [
604
+ 'name' => 'vcf7_input_box_bg_grd_f',
605
+ 'types' => [ 'classic', 'gradient'],
606
+ 'label' => esc_html__( 'Background', 'plugin-name' ),
607
+ 'selector' =>
608
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:focus,
609
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:focus,
610
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:focus,
611
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:focus,
612
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:focus,
613
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:focus,
614
+ {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select:focus',
615
+
616
+ ]
617
+ );
618
+
619
+ $this->add_control(
620
+ 'vcf7_input_box_text_color_f',
621
+ [
622
+ 'label' => __( 'Text Color', 'void' ),
623
+ 'type' => Controls_Manager::COLOR,
624
+ 'selectors' => [
625
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:focus' => 'color: {{VALUE}};',
626
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:focus' => 'color: {{VALUE}};',
627
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:focus' => 'color: {{VALUE}};',
628
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:focus' => 'color: {{VALUE}};',
629
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:focus' => 'color: {{VALUE}};',
630
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:focus' => 'color: {{VALUE}};',
631
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select:focus' => 'color: {{VALUE}};',
632
+ ],
633
+ ]
634
+ );
635
+
636
+ $this->add_group_control(
637
+ \Elementor\Group_Control_Border::get_type(),
638
+ [
639
+ 'name' => 'vcf7_input_box_border_f',
640
+ 'label' => __( 'Border', 'void' ),
641
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:focus, {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:focus, {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:focus, {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:focus, {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:focus, {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:focus, {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select:focus',
642
+ ]
643
+ );
644
+
645
+ $this->add_responsive_control(
646
+ 'vcf7_input_box_border_radius_f',
647
+ [
648
+ 'label' => __( 'Border Radius', 'void' ),
649
+ 'type' => Controls_Manager::DIMENSIONS,
650
+ 'selectors' => [
651
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
652
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
653
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
654
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
655
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
656
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
657
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
658
+ ],
659
+ ]
660
+ );
661
+
662
+ $this->add_control(
663
+ 'vcf7_input_transition',
664
+ [
665
+ 'label' => __( 'Transition Control', 'void' ),
666
+ 'type' => Controls_Manager::TEXT,
667
+ 'placeholder' => 'width .35s ease-in-out',
668
+ 'description' => __( 'input your desired transition effect for focus. Remember one single line can set all types of transition values. <a target="_blank" href="https://css-tricks.com/almanac/properties/t/transition/">Example</a>', 'void' ),
669
+ 'selectors' => [
670
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' =>'transition:{{VALUE}};-webkit-transition:{{VALUE}};-o-transition:{{VALUE}}',
671
+
672
+
673
+ ],
674
+ 'separator' =>'after',
675
+
676
+ ]
677
+ );
678
+
679
+ $this->end_controls_tab(); // input Focus tab end
680
+
681
+ $this->end_controls_tabs(); // end text area Normal/focus tabs
682
+
683
+
684
+ $this->add_group_control(
685
+ \Elementor\Group_Control_Typography::get_type(),
686
+ [
687
+ 'name' => 'vcf7_input_box_typography',
688
+
689
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"], {{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select',
690
+ ]
691
+ );
692
+
693
+
694
+ $this->add_control(
695
+ 'vcf7_input_box_placeholder_color',
696
+ [
697
+ 'label' => __( 'Placeholder Color', 'void' ),
698
+ 'type' => Controls_Manager::COLOR,
699
+ 'selectors' => [
700
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]::-webkit-input-placeholder' => 'color: {{VALUE}};',
701
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]::-moz-placeholder' => 'color: {{VALUE}};',
702
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]:-ms-input-placeholder' => 'color: {{VALUE}};',
703
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]::-webkit-input-placeholder' => 'color: {{VALUE}};',
704
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]::-moz-placeholder' => 'color: {{VALUE}};',
705
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]:-ms-input-placeholder' => 'color: {{VALUE}};',
706
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]::-webkit-input-placeholder' => 'color: {{VALUE}};',
707
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]::-moz-placeholder' => 'color: {{VALUE}};',
708
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]:-ms-input-placeholder' => 'color: {{VALUE}};',
709
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]::-webkit-input-placeholder' => 'color: {{VALUE}};',
710
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]::-moz-placeholder' => 'color: {{VALUE}};',
711
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]:-ms-input-placeholder' => 'color: {{VALUE}};',
712
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]::-webkit-input-placeholder' => 'color: {{VALUE}};',
713
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]::-moz-placeholder' => 'color: {{VALUE}};',
714
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]:-ms-input-placeholder' => 'color: {{VALUE}};',
715
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]::-webkit-input-placeholder' => 'color: {{VALUE}};',
716
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]::-moz-placeholder' => 'color: {{VALUE}};',
717
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]:-ms-input-placeholder' => 'color: {{VALUE}};',
718
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'color: {{VALUE}};',
719
+ ],
720
+ ]
721
+ );
722
+
723
+
724
+ $this->add_responsive_control(
725
+ 'vcf7_input_box_padding',
726
+ [
727
+ 'label' => __( 'Padding', 'void' ),
728
+ 'type' => Controls_Manager::DIMENSIONS,
729
+ 'size_units' => [ 'px', '%', 'em' ],
730
+ 'selectors' => [
731
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
732
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
733
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
734
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
735
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
736
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
737
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
738
+ ],
739
+ 'separator' =>'before',
740
+ ]
741
+ );
742
+
743
+ $this->add_responsive_control(
744
+ 'vcf7_input_box_margin',
745
+ [
746
+ 'label' => __( 'Margin', 'void' ),
747
+ 'type' => Controls_Manager::DIMENSIONS,
748
+ 'size_units' => [ 'px', '%', 'em' ],
749
+ 'selectors' => [
750
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="text"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
751
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="email"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
752
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="url"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
753
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="number"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
754
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="tel"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
755
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap input[type*="date"]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
756
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap .wpcf7-select' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
757
+ ],
758
+ 'separator' =>'before',
759
+ ]
760
+ );
761
+
762
+ $this->end_controls_section(); // Input Field style tab end
763
+
764
+ // Textarea style tab start
765
+ $this->start_controls_section(
766
+ 'vcf7_textarea_style',
767
+ [
768
+ 'label' => __( 'Textarea', 'void' ),
769
+ 'tab' => Controls_Manager::TAB_STYLE,
770
+ ]
771
+ );
772
+
773
+ $this->start_controls_tabs('textarea_style_tabs'); //start text area Normal/focus tabs
774
+
775
+ // Input Normal tab start
776
+ $this->start_controls_tab(
777
+ 'text_normal_tab',
778
+ [
779
+ 'label' => __( 'Normal', 'void' ),
780
+ ]
781
+ );
782
+
783
+ $this->add_responsive_control(
784
+ 'vcf7_textarea_box_height',
785
+ [
786
+ 'label' => __( 'Height', 'void' ),
787
+ 'type' => Controls_Manager::SLIDER,
788
+ 'size_units' => [ 'px', 'vh', 'vw' ],
789
+ 'range' => [
790
+ 'px' => [
791
+ 'max' => 900,
792
+ ],
793
+ ],
794
+
795
+ 'selectors' => [
796
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' => 'height: {{SIZE}}{{UNIT}};',
797
+ ],
798
+ ]
799
+ );
800
+ $this->add_responsive_control(
801
+ 'vcf7_textarea_box_width',
802
+ [
803
+ 'label' => __( 'Width', 'void' ),
804
+ 'type' => Controls_Manager::SLIDER,
805
+ 'size_units' => [ 'px', 'vw', 'vh' ],
806
+ 'range' => [
807
+ 'px' => [
808
+ 'max' => 2000,
809
+ ],
810
+ ],
811
+
812
+ 'selectors' => [
813
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' => 'width: {{SIZE}}{{UNIT}};',
814
+ ],
815
+ ]
816
+
817
+ );
818
+
819
+ $this->add_group_control(
820
+ \Elementor\Group_Control_Background::get_type(),
821
+ [
822
+ 'name' => 'vcf7_textarea_box_bg_grd',
823
+ 'types' => [ 'classic', 'gradient'],
824
+ 'label' => esc_html__( 'Background', 'void' ),
825
+ 'selector' =>
826
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea',
827
+ ]
828
+
829
+ );
830
+
831
+ $this->add_control(
832
+ 'vcf7_textarea_box_text_color',
833
+ [
834
+ 'label' => __( 'Text Color', 'void' ),
835
+ 'type' => Controls_Manager::COLOR,
836
+ 'selectors' => [
837
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' => 'color: {{VALUE}};',
838
+ ],
839
+ ]
840
+ );
841
+
842
+ $this->add_group_control(
843
+ \Elementor\Group_Control_Border::get_type(),
844
+ [
845
+ 'name' => 'vcf7_textarea_box_border',
846
+ 'label' => __( 'Border', 'void' ),
847
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea',
848
+ ]
849
+ );
850
+
851
+ $this->add_responsive_control(
852
+ 'vcf7_textarea_box_border_radius',
853
+ [
854
+ 'label' => __( 'Border Radius', 'void' ),
855
+ 'type' => Controls_Manager::DIMENSIONS,
856
+ 'selectors' => [
857
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
858
+ ],
859
+ 'separator' =>'after',
860
+ ]
861
+ );
862
+
863
+
864
+ $this->end_controls_tab(); // Textarea Normal tab end
865
+
866
+
867
+ // Input Focus tab start
868
+ $this->start_controls_tab(
869
+ 'text_focus_tab',
870
+ [
871
+ 'label' => __( 'Focus', 'void' ),
872
+ ]
873
+ );
874
+ $this->add_responsive_control(
875
+ 'vcf7_textarea_box_height_f',
876
+ [
877
+ 'label' => __( 'Height', 'void' ),
878
+ 'type' => Controls_Manager::SLIDER,
879
+ 'size_units' => [ 'px', 'vh', 'vw' ],
880
+ 'range' => [
881
+ 'px' => [
882
+ 'max' => 900,
883
+ ],
884
+ ],
885
+
886
+ 'selectors' => [
887
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:focus' => 'height: {{SIZE}}{{UNIT}};',
888
+ ],
889
+ ]
890
+ );
891
+ $this->add_responsive_control(
892
+ 'vcf7_textarea_box_width_f',
893
+ [
894
+ 'label' => __( 'Width', 'void' ),
895
+ 'type' => Controls_Manager::SLIDER,
896
+ 'size_units' => [ 'px', 'vw', 'vh' ],
897
+ 'range' => [
898
+ 'px' => [
899
+ 'max' => 2000,
900
+ ],
901
+ ],
902
+
903
+ 'selectors' => [
904
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:focus' => 'width: {{SIZE}}{{UNIT}};',
905
+ ],
906
+ ]
907
+
908
+ );
909
+
910
+ $this->add_group_control(
911
+ \Elementor\Group_Control_Background::get_type(),
912
+ [
913
+ 'name' => 'vcf7_textarea_box_bg_grd_f',
914
+ 'types' => [ 'classic', 'gradient'],
915
+ 'label' => esc_html__( 'Background', 'void' ),
916
+ 'selector' =>
917
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:focus',
918
+ ]
919
+
920
+ );
921
+
922
+ $this->add_control(
923
+ 'vcf7_textarea_box_text_color_f',
924
+ [
925
+ 'label' => __( 'Text Color', 'void' ),
926
+ 'type' => Controls_Manager::COLOR,
927
+ 'selectors' => [
928
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:focus' => 'color: {{VALUE}};',
929
+ ],
930
+ ]
931
+ );
932
+
933
+ $this->add_group_control(
934
+ \Elementor\Group_Control_Border::get_type(),
935
+ [
936
+ 'name' => 'vcf7_textarea_box_border_f',
937
+ 'label' => __( 'Border', 'void' ),
938
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:focus',
939
+ ]
940
+ );
941
+
942
+ $this->add_responsive_control(
943
+ 'vcf7_textarea_box_border_radius_f',
944
+ [
945
+ 'label' => __( 'Border Radius', 'void' ),
946
+ 'type' => Controls_Manager::DIMENSIONS,
947
+ 'selectors' => [
948
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:focus' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
949
+ ],
950
+ 'separator' =>'after',
951
+ ]
952
+ );
953
+
954
+ $this->add_control(
955
+ 'vcf7_textarea_transition',
956
+ [
957
+ 'label' => __( 'Transition Control', 'void' ),
958
+ 'type' => Controls_Manager::TEXT,
959
+ 'placeholder' => 'width .35s ease-in-out',
960
+ 'description' => __( 'input your desired transition effect for focus. Remember one single line can set all types of transition values. <a target="_blank" href="https://css-tricks.com/almanac/properties/t/transition/">Example</a>', 'void' ),
961
+ 'selectors' => [
962
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' =>'transition:{{VALUE}};-webkit-transition:{{VALUE}}',
963
+
964
+
965
+ ],
966
+ 'separator' =>'after',
967
+
968
+ ]
969
+ );
970
+
971
+ $this->end_controls_tab(); // Textarea Focus tab end
972
+
973
+ $this->end_controls_tabs(); //end text area Normal/focus tabs
974
+
975
+
976
+ $this->add_group_control(
977
+ \Elementor\Group_Control_Typography::get_type(),
978
+ [
979
+ 'name' => 'vcf7_textarea_box_typography',
980
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea',
981
+ ]
982
+ );
983
+
984
+
985
+
986
+ $this->add_control(
987
+ 'vcf7_textarea_box_placeholder_color',
988
+ [
989
+ 'label' => __( 'Placeholder Color', 'void' ),
990
+ 'type' => Controls_Manager::COLOR,
991
+ 'selectors' => [
992
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea::-webkit-input-placeholder' => 'color: {{VALUE}};',
993
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea::-moz-placeholder' => 'color: {{VALUE}};',
994
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea:-ms-input-placeholder' => 'color: {{VALUE}};',
995
+ ],
996
+ ]
997
+ );
998
+
999
+
1000
+ $this->add_responsive_control(
1001
+ 'vcf7_textarea_box_padding',
1002
+ [
1003
+ 'label' => __( 'Padding', 'void' ),
1004
+ 'type' => Controls_Manager::DIMENSIONS,
1005
+ 'size_units' => [ 'px', '%', 'em' ],
1006
+ 'selectors' => [
1007
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1008
+ ],
1009
+ 'separator' =>'before',
1010
+ ]
1011
+ );
1012
+
1013
+ $this->add_responsive_control(
1014
+ 'vcf7_textarea_box_margin',
1015
+ [
1016
+ 'label' => __( 'Margin', 'void' ),
1017
+ 'type' => Controls_Manager::DIMENSIONS,
1018
+ 'size_units' => [ 'px', '%', 'em' ],
1019
+ 'selectors' => [
1020
+ '{{WRAPPER}} .wpcf7-form .wpcf7-form-control-wrap textarea' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1021
+ ],
1022
+ 'separator' =>'before',
1023
+ ]
1024
+ );
1025
+
1026
+ $this->end_controls_section(); // Textarea style tab end
1027
+
1028
+ // Label style tab start
1029
+ $this->start_controls_section(
1030
+ 'vcf7_cf7_label_style',
1031
+ [
1032
+ 'label' => __( 'Label', 'void' ),
1033
+ 'tab' => Controls_Manager::TAB_STYLE,
1034
+ ]
1035
+ );
1036
+
1037
+ $this->add_control(
1038
+ 'vcf7_label_background',
1039
+ [
1040
+ 'label' => __( 'Background Color', 'void' ),
1041
+ 'type' => Controls_Manager::COLOR,
1042
+ 'selectors' => [
1043
+ '{{WRAPPER}} form.wpcf7-form label' => 'background-color: {{VALUE}};',
1044
+ ],
1045
+ ]
1046
+ );
1047
+
1048
+ $this->add_control(
1049
+ 'vcf7_label_text_color',
1050
+ [
1051
+ 'label' => __( 'Text Color', 'void' ),
1052
+ 'type' => Controls_Manager::COLOR,
1053
+ 'selectors' => [
1054
+ '{{WRAPPER}} form.wpcf7-form label' => 'color: {{VALUE}};',
1055
+ ],
1056
+ ]
1057
+ );
1058
+
1059
+ $this->add_group_control(
1060
+ \Elementor\Group_Control_Typography::get_type(),
1061
+ [
1062
+ 'name' => 'vcf7_label_typography',
1063
+ 'selector' => '{{WRAPPER}} form.wpcf7-form label',
1064
+ ]
1065
+ );
1066
+
1067
+ $this->add_group_control(
1068
+ \Elementor\Group_Control_Border::get_type(),
1069
+ [
1070
+ 'name' => 'vcf7_label_border',
1071
+ 'label' => __( 'Border', 'void' ),
1072
+ 'selector' => '{{WRAPPER}} form.wpcf7-form label',
1073
+ ]
1074
+ );
1075
+
1076
+ $this->add_responsive_control(
1077
+ 'vcf7_label_border_radius',
1078
+ [
1079
+ 'label' => __( 'Border Radius', 'void' ),
1080
+ 'type' => Controls_Manager::DIMENSIONS,
1081
+ 'selectors' => [
1082
+ '{{WRAPPER}} form.wpcf7-form label' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
1083
+ ],
1084
+ 'separator' =>'before',
1085
+ ]
1086
+ );
1087
+
1088
+ $this->add_responsive_control(
1089
+ 'vcf7_label_padding',
1090
+ [
1091
+ 'label' => __( 'Padding', 'void' ),
1092
+ 'type' => Controls_Manager::DIMENSIONS,
1093
+ 'size_units' => [ 'px', '%', 'em' ],
1094
+ 'selectors' => [
1095
+ '{{WRAPPER}} form.wpcf7-form label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1096
+ ],
1097
+ 'separator' =>'before',
1098
+ ]
1099
+ );
1100
+
1101
+ $this->add_responsive_control(
1102
+ 'vcf7_label_margin',
1103
+ [
1104
+ 'label' => __( 'Margin', 'void' ),
1105
+ 'type' => Controls_Manager::DIMENSIONS,
1106
+ 'size_units' => [ 'px', '%', 'em' ],
1107
+ 'selectors' => [
1108
+ '{{WRAPPER}} form.wpcf7-form label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1109
+ ],
1110
+ 'separator' =>'before',
1111
+ ]
1112
+ );
1113
+
1114
+ $this->end_controls_section(); //
1115
+ // Label style tab end
1116
+
1117
+ // Input submit button style tab start
1118
+ $this->start_controls_section(
1119
+ 'vcf7_inputsubmit_style',
1120
+ [
1121
+ 'label' => __( 'Button', 'void' ),
1122
+ 'tab' => Controls_Manager::TAB_STYLE,
1123
+ ]
1124
+ );
1125
+
1126
+
1127
+ $this->add_responsive_control(
1128
+ 'vcf7_button_text_align',
1129
+ [
1130
+ 'label' => __( 'Text Alignment', 'void' ),
1131
+ 'type' => Controls_Manager::CHOOSE,
1132
+ 'options' => [
1133
+ 'left' => [
1134
+ 'title' => __( 'Left', 'void' ),
1135
+ 'icon' => 'eicon-text-align-left',
1136
+ ],
1137
+ 'center' => [
1138
+ 'title' => __( 'Center', 'void' ),
1139
+ 'icon' => 'eicon-text-align-center',
1140
+ ],
1141
+ 'right' => [
1142
+ 'title' => __( 'Right', 'void' ),
1143
+ 'icon' => 'eicon-text-align-right',
1144
+ ],
1145
+ 'justify' => [
1146
+ 'title' => __( 'Justified', 'void' ),
1147
+ 'icon' => 'eicon-text-align-justify',
1148
+ ],
1149
+ ],
1150
+ 'selectors' => [
1151
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'text-align: {{VALUE}};',
1152
+ ],
1153
+ 'separator' =>'before',
1154
+ ]
1155
+ );
1156
+
1157
+
1158
+ $this->add_responsive_control(
1159
+ 'vcf7_button_align',
1160
+ [
1161
+ 'label' => __( 'Button Float', 'void' ),
1162
+ 'type' => Controls_Manager::CHOOSE,
1163
+ 'options' => [
1164
+ 'left' => [
1165
+ 'title' => __( 'Left', 'void' ),
1166
+ 'icon' => 'eicon-text-align-left',
1167
+ ],
1168
+
1169
+ 'right' => [
1170
+ 'title' => __( 'Right', 'void' ),
1171
+ 'icon' => 'eicon-text-align-right',
1172
+ ],
1173
+ ],
1174
+ 'selectors' => [
1175
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'float: {{VALUE}};',
1176
+ ],
1177
+ 'separator' =>'after',
1178
+ ]
1179
+ );
1180
+
1181
+ $this->start_controls_tabs('submit_style_tabs');
1182
+
1183
+ // Button Normal tab start
1184
+ $this->start_controls_tab(
1185
+ 'submit_style_normal_tab',
1186
+ [
1187
+ 'label' => __( 'Normal', 'void' ),
1188
+ ]
1189
+ );
1190
+
1191
+ $this->add_responsive_control(
1192
+ 'input_submit_height',
1193
+ [
1194
+ 'label' => __( 'Height', 'void' ),
1195
+ 'type' => Controls_Manager::SLIDER,
1196
+ 'size_units' => [ 'px', 'vh', 'vw' ],
1197
+ 'range' => [
1198
+ 'px' => [
1199
+ 'max' => 900,
1200
+ ],
1201
+ ],
1202
+
1203
+ 'selectors' => [
1204
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'height: {{SIZE}}{{UNIT}};',
1205
+ ],
1206
+ ]
1207
+ );
1208
+ $this->add_responsive_control(
1209
+ 'input_submit_width',
1210
+ [
1211
+ 'label' => __( 'Width', 'void' ),
1212
+ 'type' => Controls_Manager::SLIDER,
1213
+ 'size_units' => [ '%','px', 'vw' ],
1214
+ 'range' => [
1215
+ 'px' => [
1216
+ 'max' => 1000,
1217
+ ],
1218
+ ],
1219
+
1220
+ 'selectors' => [
1221
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'width: {{SIZE}}{{UNIT}};',
1222
+ ],
1223
+ ]
1224
+ );
1225
+
1226
+ $this->add_group_control(
1227
+ \Elementor\Group_Control_Typography::get_type(),
1228
+ [
1229
+ 'name' => 'input_submit_typography',
1230
+ 'selector' => '{{WRAPPER}} .wpcf7-form .wpcf7-submit',
1231
+ ]
1232
+ );
1233
+
1234
+ $this->add_control(
1235
+ 'input_submit_text_color',
1236
+ [
1237
+ 'label' => __( 'Text Color', 'void' ),
1238
+ 'type' => Controls_Manager::COLOR,
1239
+ 'selectors' => [
1240
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'color: {{VALUE}};',
1241
+ ],
1242
+ ]
1243
+ );
1244
+
1245
+
1246
+
1247
+ $this->add_group_control(
1248
+ \Elementor\Group_Control_Background::get_type(),
1249
+ [
1250
+ 'name' => 'input_submit_bg_grd',
1251
+ 'types' => [ 'classic', 'gradient'],
1252
+ 'label' => esc_html__( 'Background', 'void' ),
1253
+ 'selector' =>
1254
+ '{{WRAPPER}} .wpcf7-form input[type=submit]',
1255
+ ]
1256
+ );
1257
+
1258
+ $this->add_responsive_control(
1259
+ 'input_submit_padding',
1260
+ [
1261
+ 'label' => __( 'Padding', 'void' ),
1262
+ 'type' => Controls_Manager::DIMENSIONS,
1263
+ 'size_units' => [ 'px', '%', 'em' ],
1264
+ 'selectors' => [
1265
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1266
+ ],
1267
+ 'separator' =>'before',
1268
+ ]
1269
+ );
1270
+
1271
+ $this->add_responsive_control(
1272
+ 'input_submit_margin',
1273
+ [
1274
+ 'label' => __( 'Margin', 'void' ),
1275
+ 'type' => Controls_Manager::DIMENSIONS,
1276
+ 'size_units' => [ 'px', '%', 'em' ],
1277
+ 'selectors' => [
1278
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1279
+ ],
1280
+ 'separator' =>'before',
1281
+ ]
1282
+ );
1283
+
1284
+ $this->add_group_control(
1285
+ \Elementor\Group_Control_Border::get_type(),
1286
+ [
1287
+ 'name' => 'input_submit_border',
1288
+ 'label' => __( 'Border', 'void' ),
1289
+ 'selector' => '{{WRAPPER}} .wpcf7-form input[type=submit]',
1290
+ ]
1291
+ );
1292
+
1293
+ $this->add_responsive_control(
1294
+ 'input_submit_border_radius',
1295
+ [
1296
+ 'label' => __( 'Border Radius', 'void' ),
1297
+ 'type' => Controls_Manager::DIMENSIONS,
1298
+ 'selectors' => [
1299
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
1300
+ ],
1301
+ 'separator' =>'before',
1302
+ ]
1303
+ );
1304
+
1305
+ $this->add_group_control(
1306
+ \Elementor\Group_Control_Box_Shadow::get_type(),
1307
+ [
1308
+ 'name' => 'vcf7_input_submit_box_shadow',
1309
+ 'label' => __( 'Box Shadow', 'void' ),
1310
+ 'selector' => '{{WRAPPER}} .wpcf7-form input[type=submit]',
1311
+ ]
1312
+ );
1313
+
1314
+ $this->end_controls_tab(); // Button Normal tab end
1315
+
1316
+ // Button Hover tab start
1317
+ $this->start_controls_tab(
1318
+ 'submit_style_hover_tab',
1319
+ [
1320
+ 'label' => __( 'Hover', 'void' ),
1321
+ ]
1322
+ );
1323
+
1324
+ $this->add_responsive_control(
1325
+ 'input_submit_height_h',
1326
+ [
1327
+ 'label' => __( 'Height', 'void' ),
1328
+ 'type' => Controls_Manager::SLIDER,
1329
+ 'size_units' => [ 'px', 'vh', 'vw' ],
1330
+ 'range' => [
1331
+ 'px' => [
1332
+ 'max' => 900,
1333
+ ],
1334
+ ],
1335
+
1336
+ 'selectors' => [
1337
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover' => 'height: {{SIZE}}{{UNIT}};',
1338
+ ],
1339
+ ]
1340
+ );
1341
+ $this->add_responsive_control(
1342
+ 'input_submit_width_h',
1343
+ [
1344
+ 'label' => __( 'Width', 'void' ),
1345
+ 'type' => Controls_Manager::SLIDER,
1346
+ 'size_units' => [ '%','px', 'vw' ],
1347
+ 'range' => [
1348
+ 'px' => [
1349
+ 'max' => 1000,
1350
+ ],
1351
+ ],
1352
+
1353
+ 'selectors' => [
1354
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover' => 'width: {{SIZE}}{{UNIT}};',
1355
+ ],
1356
+ ]
1357
+ );
1358
+
1359
+ $this->add_group_control(
1360
+ \Elementor\Group_Control_Typography::get_type(),
1361
+ [
1362
+ 'name' => 'input_submit_typography_h',
1363
+ 'selector' => '{{WRAPPER}} .wpcf7-form input[type=submit]:hover',
1364
+ ]
1365
+ );
1366
+
1367
+ $this->add_control(
1368
+ 'input_submit_text_color_h',
1369
+ [
1370
+ 'label' => __( 'Text Color', 'void' ),
1371
+ 'type' => Controls_Manager::COLOR,
1372
+ 'selectors' => [
1373
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover' => 'color: {{VALUE}};',
1374
+ ],
1375
+ ]
1376
+ );
1377
+
1378
+
1379
+
1380
+ $this->add_group_control(
1381
+ \Elementor\Group_Control_Background::get_type(),
1382
+ [
1383
+ 'name' => 'input_submit_bg_grd_h',
1384
+ 'types' => [ 'classic', 'gradient'],
1385
+ 'label' => esc_html__( 'Background', 'void' ),
1386
+ 'selector' =>
1387
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover',
1388
+ ]
1389
+ );
1390
+
1391
+ $this->add_responsive_control(
1392
+ 'input_submit_padding_h',
1393
+ [
1394
+ 'label' => __( 'Padding', 'void' ),
1395
+ 'type' => Controls_Manager::DIMENSIONS,
1396
+ 'size_units' => [ 'px', '%', 'em' ],
1397
+ 'selectors' => [
1398
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1399
+ ],
1400
+ 'separator' =>'before',
1401
+ ]
1402
+ );
1403
+
1404
+ $this->add_responsive_control(
1405
+ 'input_submit_margin_h',
1406
+ [
1407
+ 'label' => __( 'Margin', 'void' ),
1408
+ 'type' => Controls_Manager::DIMENSIONS,
1409
+ 'size_units' => [ 'px', '%', 'em' ],
1410
+ 'selectors' => [
1411
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1412
+ ],
1413
+ 'separator' =>'before',
1414
+ ]
1415
+ );
1416
+
1417
+ $this->add_group_control(
1418
+ \Elementor\Group_Control_Border::get_type(),
1419
+ [
1420
+ 'name' => 'input_submit_border_h',
1421
+ 'label' => __( 'Border', 'void' ),
1422
+ 'selector' => '{{WRAPPER}} .wpcf7-form input[type=submit]:hover',
1423
+ ]
1424
+ );
1425
+
1426
+ $this->add_responsive_control(
1427
+ 'input_submit_border_radius_h',
1428
+ [
1429
+ 'label' => __( 'Border Radius', 'void' ),
1430
+ 'type' => Controls_Manager::DIMENSIONS,
1431
+ 'selectors' => [
1432
+ '{{WRAPPER}} .wpcf7-form input[type=submit]:hover' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
1433
+ ],
1434
+ 'separator' =>'before',
1435
+ ]
1436
+ );
1437
+
1438
+ $this->add_group_control(
1439
+ \Elementor\Group_Control_Box_Shadow::get_type(),
1440
+ [
1441
+ 'name' => 'vcf7_input_submit_box_shadow_h',
1442
+ 'label' => __( 'Box Shadow', 'void' ),
1443
+ 'selector' => '{{WRAPPER}} .wpcf7-form input[type=submit]:hover',
1444
+ ]
1445
+ );
1446
+
1447
+ $this->add_control(
1448
+ 'vcf7_button_h_animation',
1449
+ [
1450
+ 'label' => __( 'Hover Animation', 'void' ),
1451
+ 'type' => Controls_Manager::TEXT,
1452
+ 'placeholder' => 'all .25s linear 0s',
1453
+ 'default' => 'all .25s linear 0s',
1454
+ 'description' => __( 'input your desired transition effect for focus. Remember one single line can set all types of transition values. <a target="_blank" href="https://css-tricks.com/almanac/properties/t/transition/">Example</a>', 'void' ),
1455
+ 'selectors' => [
1456
+ '{{WRAPPER}} .wpcf7-form input[type=submit]' =>'transition:{{VALUE}};-webkit-transition:{{VALUE}};-o-transition:{{VALUE}}',
1457
+ ],
1458
+ 'separator' =>'after',
1459
+
1460
+ ]
1461
+ );
1462
+
1463
+ $this->end_controls_tab(); // Button Hover tab end
1464
+
1465
+ $this->end_controls_tabs(); //ens submit style tabs
1466
+
1467
+ $this->end_controls_section();
1468
+ // end out style tab
1469
+
1470
+ // After submit styles
1471
+
1472
+ $this->start_controls_section(
1473
+ 'vcf7_section_after_submit',
1474
+ [
1475
+ 'label' => __('After Submit message', 'void'),
1476
+ 'tab' => Controls_Manager::TAB_STYLE,
1477
+ ]
1478
+ );
1479
+
1480
+ $this->start_controls_tabs('vcf7_after_s_style_tabs');
1481
+ // Success tab start
1482
+ $this->start_controls_tab(
1483
+ 'vcf7_after_submit_su_tab',
1484
+ [
1485
+ 'label' => __( 'Success', 'void' ),
1486
+ ]
1487
+ );
1488
+
1489
+ $this->add_control(
1490
+ 'contact_form_after_submit_s_color',
1491
+ [
1492
+ 'label' => __('Success Text Color', 'void'),
1493
+ 'type' => Controls_Manager::COLOR,
1494
+ 'selectors' => [
1495
+ '{{WRAPPER}} .wpcf7 form.sent .wpcf7-response-output' => 'color: {{VALUE}}',
1496
+ ],
1497
+ ]
1498
+ );
1499
+
1500
+ $this->add_group_control(
1501
+ \Elementor\Group_Control_Background::get_type(),
1502
+ [
1503
+ 'name' => 'vcf7_after_submit_background',
1504
+ 'label' => __('Background', 'void'),
1505
+ 'types' => ['classic', 'gradient'],
1506
+ 'selector' => '{{WRAPPER}} .wpcf7 form.sent .wpcf7-response-output',
1507
+ ]
1508
+ );
1509
+
1510
+ $this->add_group_control(
1511
+ \Elementor\Group_Control_Border::get_type(),
1512
+ [
1513
+ 'name' => 'vcf7_after_submit_border',
1514
+ 'label' => __('Border', 'void'),
1515
+ 'placeholder' => '1px',
1516
+ 'default' => '1px',
1517
+ 'selector' => '{{WRAPPER}} .wpcf7 form.sent .wpcf7-response-output',
1518
+ ]
1519
+ );
1520
+
1521
+ $this->add_responsive_control(
1522
+ 'vcf7_after_submit_border_radius',
1523
+ [
1524
+ 'label' => esc_html__('Radius', 'void'),
1525
+ 'type' => Controls_Manager::SLIDER,
1526
+ 'size_units' => ['px', 'em', '%'],
1527
+ 'range' => [
1528
+ 'px' => [
1529
+ 'min' => 10,
1530
+ 'max' => 1500,
1531
+ ],
1532
+ 'em' => [
1533
+ 'min' => 1,
1534
+ 'max' => 80,
1535
+ ],
1536
+ ],
1537
+ 'selectors' => [
1538
+ '{{WRAPPER}} .wpcf7 form.sent .wpcf7-response-output' => 'border-radius: {{SIZE}}{{UNIT}};',
1539
+ ],
1540
+ 'separator' =>'after',
1541
+
1542
+ ]
1543
+ );
1544
+ $this->end_controls_tab();
1545
+
1546
+ // Fail tab start
1547
+ $this->start_controls_tab(
1548
+ 'vcf7_after_submit_fa_tab',
1549
+ [
1550
+ 'label' => __( 'Failed', 'void' ),
1551
+ ]
1552
+ );
1553
+
1554
+ $this->add_control(
1555
+ 'contact_form_after_submit_n_color',
1556
+ [
1557
+ 'label' => __('Fail Text Color', 'void'),
1558
+ 'type' => Controls_Manager::COLOR,
1559
+ 'selectors' => [
1560
+ '{{WRAPPER}} .wpcf7 form.invalid .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.unaccepted .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.payment-required .wpcf7-response-output' => 'color: {{VALUE}}',
1561
+ ],
1562
+ ]
1563
+ );
1564
+
1565
+ $this->add_group_control(
1566
+ \Elementor\Group_Control_Background::get_type(),
1567
+ [
1568
+ 'name' => 'vcf7_after_submit_er_background',
1569
+ 'label' => __('Background', 'void'),
1570
+ 'types' => ['classic', 'gradient'],
1571
+ 'selector' => '.wpcf7 form.invalid .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.unaccepted .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.payment-required .wpcf7-response-output',
1572
+ ]
1573
+ );
1574
+
1575
+ $this->add_group_control(
1576
+ \Elementor\Group_Control_Border::get_type(),
1577
+ [
1578
+ 'name' => 'vcf7_after_submit_er_border',
1579
+ 'label' => __('Border', 'void'),
1580
+ 'placeholder' => '1px',
1581
+ 'default' => '1px',
1582
+ 'selector' => '.wpcf7 form.invalid .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.unaccepted .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.payment-required .wpcf7-response-output',
1583
+ ]
1584
+ );
1585
+
1586
+ $this->add_responsive_control(
1587
+ 'vcf7_after_submit_er_border_radius',
1588
+ [
1589
+ 'label' => esc_html__('Radius', 'void'),
1590
+ 'type' => Controls_Manager::SLIDER,
1591
+ 'size_units' => ['px', 'em', '%'],
1592
+ 'range' => [
1593
+ 'px' => [
1594
+ 'min' => 10,
1595
+ 'max' => 1500,
1596
+ ],
1597
+ 'em' => [
1598
+ 'min' => 1,
1599
+ 'max' => 80,
1600
+ ],
1601
+ ],
1602
+ 'selectors' => [
1603
+ '.wpcf7 form.invalid .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.unaccepted .wpcf7-response-output, {{WRAPPER}} .wpcf7 form.payment-required .wpcf7-response-output' => 'border-radius: {{SIZE}}{{UNIT}};',
1604
+ ],
1605
+ 'separator' =>'after',
1606
+
1607
+ ]
1608
+ );
1609
+
1610
+ $this->end_controls_tab();
1611
+
1612
+ $this->end_controls_tabs();
1613
+
1614
+ $this->add_group_control(
1615
+ \Elementor\Group_Control_Typography::get_type(),
1616
+ [
1617
+ 'name' => 'vcf7_after_submit_typography',
1618
+ 'label' => __('Typography', 'void'),
1619
+ 'selector' => '{{WRAPPER}} .wpcf7-mail-sent-ng, {{WRAPPER}} .wpcf7-mail-sent-ok, {{WRAPPER}} .wpcf7-response-output',
1620
+ 'separator' => 'before',
1621
+ ]
1622
+ );
1623
+
1624
+ $this->add_responsive_control(
1625
+ 'vcf7_after_submit_margin',
1626
+ [
1627
+ 'label' => esc_html__('Margin', 'void'),
1628
+ 'type' => Controls_Manager::DIMENSIONS,
1629
+ 'size_units' => ['px', 'em', '%'],
1630
+ 'selectors' => [
1631
+ '{{WRAPPER}} .wpcf7-mail-sent-ng' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1632
+ '{{WRAPPER}} wpcf7-mail-sent-ok' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1633
+ '{{WRAPPER}} .wpcf7-response-output' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1634
+ ],
1635
+ ]
1636
+ );
1637
+
1638
+ $this->add_responsive_control(
1639
+ 'vcf7_after_submit_padding',
1640
+ [
1641
+ 'label' => esc_html__('Padding', 'void'),
1642
+ 'type' => Controls_Manager::DIMENSIONS,
1643
+ 'size_units' => ['px', 'em', '%'],
1644
+ 'selectors' => [
1645
+ '{{WRAPPER}} .wpcf7-mail-sent-ng' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1646
+ '{{WRAPPER}} .wpcf7-mail-sent-ok' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1647
+ '{{WRAPPER}} .wpcf7-response-output' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1648
+ ],
1649
+ ]
1650
+ );
1651
+
1652
+ $this->end_controls_section();
1653
+
1654
+
1655
  }
1656
 
1657