Contact Form7 Widget For Elementor Page Builder - Version 1.1.3

Version Description

  • Fix: Compatiable with elementor 3.x.
  • Fix: Fix some js error with new version of wp and elementor.
Download this release

Release Info

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

Code changes from version 1.1.1 to 1.1.3

Files changed (6) hide show
  1. assets/css/void-cf7-admin.css +12 -12
  2. custom-editor/assets/js/void-cf7-elementor-editor.js +20 -7
  3. custom-editor/modal-editor.php +72 -74
  4. readme.txt +8 -3
  5. void-cf7-widget-elementor.php +11 -11
  6. widgets/void-section-cf7.php +3 -1
assets/css/void-cf7-admin.css CHANGED
@@ -20,33 +20,33 @@
20
  }
21
 
22
  /* notice css start */
23
- .void-query-promotion-notice{
24
  background: linear-gradient(to right, #4E40F1 0%, #ffccff 100%);
25
  border-left-color: linear-gradient(to bottom, #3F2BE2 20%, #0066ff 45%);
26
  }
27
- .void-query-promotion-notice .notice-dismiss:before{
28
  font-size: 22px;
29
  }
30
- .void-query-message-inner {
31
  display: flex;
32
  -webkit-box-align: center;
33
  align-items: center;
34
  }
35
- .void-query-message-icon,
36
- .void-query-message-icon > img{
37
  max-height: 200px;
38
  width: auto;
39
  }
40
- .void-query-message-content{
41
  padding: 0 20px;
42
  }
43
- .void-query-message-content p{
44
  padding: 0;
45
  margin: 0;
46
  font-size: 14px;
47
  color: #000;
48
  }
49
- .void-query-message-action{
50
  text-align: center;
51
  display: flex;
52
  -webkit-box-orient: vertical;
@@ -54,7 +54,7 @@
54
  flex-direction: column;
55
  margin-left: auto;
56
  }
57
- .void-query-message-action .void-query-button{
58
  background-color: #d30c5c;
59
  color: #fff;
60
  border-color: #7c1337;
@@ -69,16 +69,16 @@
69
  margin: 5px;
70
  font-size: 16px;
71
  }
72
- .void-query-message-action .void-query-button:hover{
73
  font-size: 18px;
74
  }
75
 
76
- .void-query-message-action .void-query-never-show{
77
  color: #D0A7FB;
78
  margin: 20px 20px 0 20px;
79
  }
80
 
81
- .void-query-message-action .void-query-never-show:hover{
82
  color: #D0A7FB;
83
  }
84
 
20
  }
21
 
22
  /* notice css start */
23
+ .cf7-widget-promotion-notice{
24
  background: linear-gradient(to right, #4E40F1 0%, #ffccff 100%);
25
  border-left-color: linear-gradient(to bottom, #3F2BE2 20%, #0066ff 45%);
26
  }
27
+ .cf7-widget-promotion-notice .notice-dismiss:before{
28
  font-size: 22px;
29
  }
30
+ .cf7-widget-message-inner {
31
  display: flex;
32
  -webkit-box-align: center;
33
  align-items: center;
34
  }
35
+ .cf7-widget-message-icon,
36
+ .cf7-widget-message-icon > img{
37
  max-height: 200px;
38
  width: auto;
39
  }
40
+ .cf7-widget-message-content{
41
  padding: 0 20px;
42
  }
43
+ .cf7-widget-message-content p{
44
  padding: 0;
45
  margin: 0;
46
  font-size: 14px;
47
  color: #000;
48
  }
49
+ .cf7-widget-message-action{
50
  text-align: center;
51
  display: flex;
52
  -webkit-box-orient: vertical;
54
  flex-direction: column;
55
  margin-left: auto;
56
  }
57
+ .cf7-widget-message-action .cf7-widget-button{
58
  background-color: #d30c5c;
59
  color: #fff;
60
  border-color: #7c1337;
69
  margin: 5px;
70
  font-size: 16px;
71
  }
72
+ .cf7-widget-message-action .cf7-widget-button:hover{
73
  font-size: 18px;
74
  }
75
 
76
+ .cf7-widget-message-action .cf7-widget-never-show{
77
  color: #D0A7FB;
78
  margin: 20px 20px 0 20px;
79
  }
80
 
81
+ .cf7-widget-message-action .cf7-widget-never-show:hover{
82
  color: #D0A7FB;
83
  }
84
 
custom-editor/assets/js/void-cf7-elementor-editor.js CHANGED
@@ -2,7 +2,6 @@
2
 
3
  // call the the functionality of add, edit form when elementor editor panel is open for edit
4
  elementor.hooks.addAction('panel/open_editor/widget/void-section-cf7', function (panel, model, view) {
5
-
6
  // declare some global variable to avaoid multiple searching on DOM
7
  var formId;
8
  var windowParent = window.parent;
@@ -11,6 +10,7 @@
11
  addEditHandler();
12
 
13
  function addEditHandler(){
 
14
  // current selected form by attr of form mark up
15
  formId = model.attributes.settings.attributes.cf7;
16
  // modal elementor selector
@@ -23,7 +23,7 @@
23
  // elementor update preview button selector
24
  elUpdatePreviewButton = $('.elementor-update-preview');
25
  // hide button from edit panel
26
- elUpdatePreviewButton.hide();
27
 
28
  // call initial form assign function for preventing data loose after switching widget
29
  addButtonFunction();
@@ -57,20 +57,33 @@
57
  modal.fadeOut(500);
58
  });
59
  });
 
60
  }
61
 
62
  //when moving from Advanced tab to content model variable is null so to pass it's data
63
- function pass_around_model(panel,model,view){
64
  // set timeout to load content tab's content
65
  setTimeout(function(){
66
  addEditHandler();
67
  }, 100);
68
- //addEditHandler();
69
  }
70
 
71
- //this ensures the data remains the same even after switching back from advanced tab to content tab
72
- $( '.elementor-tab-control-content a' ).on( 'click',function(event){
73
- pass_around_model(panel,model,view);
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  });
75
 
76
  function editButtonFunction(){
2
 
3
  // call the the functionality of add, edit form when elementor editor panel is open for edit
4
  elementor.hooks.addAction('panel/open_editor/widget/void-section-cf7', function (panel, model, view) {
 
5
  // declare some global variable to avaoid multiple searching on DOM
6
  var formId;
7
  var windowParent = window.parent;
10
  addEditHandler();
11
 
12
  function addEditHandler(){
13
+ //console.log('add edit handler call');
14
  // current selected form by attr of form mark up
15
  formId = model.attributes.settings.attributes.cf7;
16
  // modal elementor selector
23
  // elementor update preview button selector
24
  elUpdatePreviewButton = $('.elementor-update-preview');
25
  // hide button from edit panel
26
+ //elUpdatePreviewButton.hide();
27
 
28
  // call initial form assign function for preventing data loose after switching widget
29
  addButtonFunction();
57
  modal.fadeOut(500);
58
  });
59
  });
60
+
61
  }
62
 
63
  //when moving from Advanced tab to content model variable is null so to pass it's data
64
+ function cf7_data_pass_around_model(panel,model,view){
65
  // set timeout to load content tab's content
66
  setTimeout(function(){
67
  addEditHandler();
68
  }, 100);
 
69
  }
70
 
71
+ // this ensures the data remains the same even after switching back from advanced tab to content tab
72
+ $(".elementor-panel").mouseenter(function(){
73
+
74
+ $(".elementor-tab-control-content").mouseenter(function(){
75
+
76
+ // this ensures the data remains the same even after switching back from advanced tab to content tab
77
+ $( '.elementor-tab-control-content a' ).on( 'click', function(event){
78
+ cf7_data_pass_around_model(panel,model,view);
79
+ });
80
+ });
81
+
82
+ // fix datalose after switching control section
83
+ $(".elementor-control-section_content").on("click", function (event) {
84
+ cf7_data_pass_around_model(panel,model,view);
85
+ });
86
+
87
  });
88
 
89
  function editButtonFunction(){
custom-editor/modal-editor.php CHANGED
@@ -10,93 +10,91 @@
10
  </div>
11
  </div>
12
 
13
- <style>
14
 
15
- </style>
16
- <script>
17
- // menu hide wp admin menu function after onload iframe contants
18
- function voidCf7IframeOnLoad() {
19
- // select iframe
20
- var loader = document.getElementsByClassName("cf7-widget-elementor-modal-content-loader");
21
- var iframe = document.getElementsByClassName("cf7-widget-elementor-modal-iframe");
22
- iframe[0].style.opacity = 0;
23
 
24
- // check iframe found
25
- if(iframe != null && iframe.length > 0){
26
- // select wpadminbar, wpcontent, wpadmibar, wp-toolbar for modify it
27
- var adminBar = iframe[0].contentWindow.document.getElementById("wpadminbar");
28
- var wpToolBar = iframe[0].contentWindow.document.getElementsByClassName("wp-toolbar");
29
- var adminMenu = iframe[0].contentWindow.document.getElementById("adminmenumain");
30
- var wpContent = iframe[0].contentWindow.document.getElementById("wpcontent");
31
- var addNewButton = iframe[0].contentWindow.document.querySelectorAll('a.page-title-action');
32
-
33
- // remove add new button on editor
34
- if(addNewButton != null && addNewButton.length > 0){
35
- addNewButton[0].style.display = "none";
36
- }
37
- // wp admin bar hide
38
- if(adminBar != null){
39
- adminBar.style.display = "none";
40
- }
41
 
42
- // wp toolbar padding top remove
43
- if(wpToolBar !=null && wpToolBar.length > 0){
44
- wpToolBar[0].style.paddingTop = '0px';
45
- }
46
 
47
- // wp admin menu hide
48
- if(adminMenu != null){
49
- adminMenu.style.display = "none";
50
- }
51
 
52
- // wp content margin left hide
53
- if(wpContent != null){
54
- wpContent.style.marginLeft = "0px";
55
- // loader remove on modal after removing everything
56
- loader[0].classList.remove("loading");
57
- }
58
 
59
- // set opacity 1 to show iframe after hiding all the wp bars
60
- iframe[0].style.opacity = 1;
61
 
62
- // prevent flickering after save form
63
- var saveButton = iframe[0].contentWindow.document.querySelectorAll('input.button-primary[name=wpcf7-save]');
64
- saveButton.forEach(function(item, index){
65
- saveButton[index].onclick = function(){
66
- iframe[0].style.opacity = 0;
67
- if(loader != null && loader.length > 0){
68
- // loader add again on modal
69
- loader[0].classList.add("loading");
 
70
  }
71
- }
72
- });
73
 
74
- // prevent flickering after copy form
75
- var copyButton = iframe[0].contentWindow.document.querySelectorAll('input.copy.button[name=wpcf7-copy]');
76
- copyButton.forEach(function(item, index){
77
- copyButton[index].onclick = function(){
78
- iframe[0].style.opacity = 0;
79
- if(loader != null && loader.length > 0){
80
- // loader add again on modal
81
- loader[0].classList.add("loading");
 
82
  }
83
- }
84
- });
85
 
86
- // prevent flickering after delete form
87
- var deleteButton = iframe[0].contentWindow.document.querySelectorAll('input.delete.submitdelete[name=wpcf7-delete]');
88
- deleteButton.forEach(function(item, index){
89
- deleteButton[index].onclick = function(){
90
- iframe[0].style.opacity = 0;
91
- if(loader != null && loader.length > 0){
92
- // loader add again on modal
93
- loader[0].classList.remove("loading");
 
94
  }
95
- }
96
- });
97
 
98
- }
99
 
100
- }
101
 
102
  </script>
10
  </div>
11
  </div>
12
 
 
13
 
14
+ <script type="text/javascript">
15
+ // menu hide wp admin menu function after onload iframe contants
16
+ function voidCf7IframeOnLoad() {
17
+ // select iframe
18
+ var loader = document.getElementsByClassName("cf7-widget-elementor-modal-content-loader");
19
+ var iframe = document.getElementsByClassName("cf7-widget-elementor-modal-iframe");
20
+ iframe[0].style.opacity = 0;
 
21
 
22
+ // check iframe found
23
+ if(iframe != null && iframe.length > 0){
24
+ // select wpadminbar, wpcontent, wpadmibar, wp-toolbar for modify it
25
+ var adminBar = iframe[0].contentWindow.document.getElementById("wpadminbar");
26
+ var wpToolBar = iframe[0].contentWindow.document.getElementsByClassName("wp-toolbar");
27
+ var adminMenu = iframe[0].contentWindow.document.getElementById("adminmenumain");
28
+ var wpContent = iframe[0].contentWindow.document.getElementById("wpcontent");
29
+ var addNewButton = iframe[0].contentWindow.document.querySelectorAll('a.page-title-action');
30
+
31
+ // remove add new button on editor
32
+ if(addNewButton != null && addNewButton.length > 0){
33
+ addNewButton[0].style.display = "none";
34
+ }
35
+ // wp admin bar hide
36
+ if(adminBar != null){
37
+ adminBar.style.display = "none";
38
+ }
39
 
40
+ // wp toolbar padding top remove
41
+ if(wpToolBar !=null && wpToolBar.length > 0){
42
+ wpToolBar[0].style.paddingTop = '0px';
43
+ }
44
 
45
+ // wp admin menu hide
46
+ if(adminMenu != null){
47
+ adminMenu.style.display = "none";
48
+ }
49
 
50
+ // wp content margin left hide
51
+ if(wpContent != null){
52
+ wpContent.style.marginLeft = "0px";
53
+ // loader remove on modal after removing everything
54
+ loader[0].classList.remove("loading");
55
+ }
56
 
57
+ // set opacity 1 to show iframe after hiding all the wp bars
58
+ iframe[0].style.opacity = 1;
59
 
60
+ // prevent flickering after save form
61
+ var saveButton = iframe[0].contentWindow.document.querySelectorAll('input.button-primary[name=wpcf7-save]');
62
+ saveButton.forEach(function(item, index){
63
+ saveButton[index].onclick = function(){
64
+ iframe[0].style.opacity = 0;
65
+ if(loader != null && loader.length > 0){
66
+ // loader add again on modal
67
+ loader[0].classList.add("loading");
68
+ }
69
  }
70
+ });
 
71
 
72
+ // prevent flickering after copy form
73
+ var copyButton = iframe[0].contentWindow.document.querySelectorAll('input.copy.button[name=wpcf7-copy]');
74
+ copyButton.forEach(function(item, index){
75
+ copyButton[index].onclick = function(){
76
+ iframe[0].style.opacity = 0;
77
+ if(loader != null && loader.length > 0){
78
+ // loader add again on modal
79
+ loader[0].classList.add("loading");
80
+ }
81
  }
82
+ });
 
83
 
84
+ // prevent flickering after delete form
85
+ var deleteButton = iframe[0].contentWindow.document.querySelectorAll('input.delete.submitdelete[name=wpcf7-delete]');
86
+ deleteButton.forEach(function(item, index){
87
+ deleteButton[index].onclick = function(){
88
+ iframe[0].style.opacity = 0;
89
+ if(loader != null && loader.length > 0){
90
+ // loader add again on modal
91
+ loader[0].classList.remove("loading");
92
+ }
93
  }
94
+ });
 
95
 
96
+ }
97
 
98
+ }
99
 
100
  </script>
readme.txt CHANGED
@@ -2,8 +2,8 @@
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.4.2
6
- Stable tag: 1.1.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -31,7 +31,7 @@ For updates follow us on : [Facebook](https://www.facebook.com/voidcoders).
31
 
32
  Follow us on: [Github](https://github.com/soyket/cf7-widget-elementor/).
33
 
34
- Version 1.1 ( Edit/Add contact from inside Elementor )
35
  [youtube https://youtu.be/ZI0GMJoESaw]
36
 
37
  Latest Version Preview
@@ -77,6 +77,11 @@ Our Contact Form7 Widget For Elementor Page Builder adds a new section in the el
77
  Update the plugin either via wp dashboard or via FTP. After update make sure you clear your browser cache.
78
 
79
  == Changelog ==
 
 
 
 
 
80
  = 1.1.1 =
81
  * Fix: Js erros on frontend
82
  = 1.1.0 =
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.5.1
6
+ Stable tag: 1.1.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
31
 
32
  Follow us on: [Github](https://github.com/soyket/cf7-widget-elementor/).
33
 
34
+ New updates ( Edit/Add contact from inside Elementor )
35
  [youtube https://youtu.be/ZI0GMJoESaw]
36
 
37
  Latest Version Preview
77
  Update the plugin either via wp dashboard or via FTP. After update make sure you clear your browser cache.
78
 
79
  == Changelog ==
80
+ = 1.1.3 =
81
+ * Fix: Compatiable with elementor 3.x.
82
+ * Fix: Fix some js error with new version of wp and elementor.
83
+ = 1.1.2 =
84
+ * Fix: Editor panel data loose issue solved after comeback another control sections/ widgets.
85
  = 1.1.1 =
86
  * Fix: Js erros on frontend
87
  = 1.1.0 =
void-cf7-widget-elementor.php CHANGED
@@ -2,7 +2,7 @@
2
  /**
3
  * Plugin Name: Void Contact Form 7 Widget For Elementor Page Builder
4
  * Description: Adds Contact Form 7 widget element to Elementor page builder for easy drag & drop the created contact forms with CF7 (contact form 7).
5
- * Version: 1.1.1
6
  * Author: voidCoders
7
  * Plugin URI: https://demo.voidcoders.com/plugins/contact-form7-widget-for-elementor/
8
  * Author URI: https://voidcoders.com
@@ -11,7 +11,7 @@
11
 
12
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
13
 
14
- define('CF7_WIDGET_E_VERSION', '1.1.1');
15
  define('CF7_WIDGET_E_PLUGIN_URL', trailingslashit(plugin_dir_url( __FILE__ )));
16
  define('CF7_WIDGET_E_PLUGIN_DIR', trailingslashit(plugin_dir_path( __FILE__ )));
17
 
@@ -85,12 +85,12 @@ function void_cf7_widget_promotional_notice(){
85
  if($diff->days >= $conditional_days ):
86
  $url .= (($conditional_days == 15) ? '&discount=INSIDE10E' : '');
87
  ?>
88
- <div class="void-query-promotion-notice notice is-dismissible" data-notice="void-cf7-promotion-notice-ele-query" data-nonce="<?php echo wp_create_nonce('wp_rest'); ?>">
89
- <div class="void-query-message-inner">
90
- <div class="void-query-message-icon">
91
- <img class="void-query-notice-icon" src="https://elequerybuilder.com/wp-content/uploads/2020/05/EQ-Banner.png" alt="voidCoders promotional banner">
92
  </div>
93
- <div class="void-query-message-content">
94
  <?php if ($conditional_days == 15) :?>
95
  <p>Here is a Little gift for you!</p>
96
  <p>Get <strong>Ele Query Builder</strong> to build custom query without code with <strong>10% Discount</strong>. <strong>Use Coupon - INSIDE10E</strong></p>
@@ -100,10 +100,10 @@ function void_cf7_widget_promotional_notice(){
100
  <p>Woocommerce meta and events calendar with no CODE</p>
101
  <?php endif; ?>
102
  </div>
103
- <div class="void-query-message-action">
104
- <a class="void-query-button" target="__blank" href="<?php echo esc_url($url); ?>">Check Now</a>
105
- <!-- <a class="void-query-remind-later" href="#">Remind me later -> </a> -->
106
- <a class="void-query-never-show" href="#">Never show again -> </a>
107
  </div>
108
  </div>
109
  </div>
2
  /**
3
  * Plugin Name: Void Contact Form 7 Widget For Elementor Page Builder
4
  * Description: Adds Contact Form 7 widget element to Elementor page builder for easy drag & drop the created contact forms with CF7 (contact form 7).
5
+ * Version: 1.1.3
6
  * Author: voidCoders
7
  * Plugin URI: https://demo.voidcoders.com/plugins/contact-form7-widget-for-elementor/
8
  * Author URI: https://voidcoders.com
11
 
12
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
13
 
14
+ define('CF7_WIDGET_E_VERSION', '1.1.3');
15
  define('CF7_WIDGET_E_PLUGIN_URL', trailingslashit(plugin_dir_url( __FILE__ )));
16
  define('CF7_WIDGET_E_PLUGIN_DIR', trailingslashit(plugin_dir_path( __FILE__ )));
17
 
85
  if($diff->days >= $conditional_days ):
86
  $url .= (($conditional_days == 15) ? '&discount=INSIDE10E' : '');
87
  ?>
88
+ <div class="cf7-widget-promotion-notice notice is-dismissible" data-notice="void-cf7-promotion-notice-ele-query" data-nonce="<?php echo wp_create_nonce('wp_rest'); ?>">
89
+ <div class="cf7-widget-message-inner">
90
+ <div class="cf7-widget-message-icon">
91
+ <img class="cf7-widget-notice-icon" src="https://elequerybuilder.com/wp-content/uploads/2020/05/EQ-Banner.png" alt="voidCoders promotional banner">
92
  </div>
93
+ <div class="cf7-widget-message-content">
94
  <?php if ($conditional_days == 15) :?>
95
  <p>Here is a Little gift for you!</p>
96
  <p>Get <strong>Ele Query Builder</strong> to build custom query without code with <strong>10% Discount</strong>. <strong>Use Coupon - INSIDE10E</strong></p>
100
  <p>Woocommerce meta and events calendar with no CODE</p>
101
  <?php endif; ?>
102
  </div>
103
+ <div class="cf7-widget-message-action">
104
+ <a class="cf7-widget-button" target="__blank" href="<?php echo esc_url($url); ?>">Check Now</a>
105
+ <!-- <a class="cf7-widget-remind-later" href="#">Remind me later -> </a> -->
106
+ <a class="cf7-widget-never-show" href="#">Never show again -> </a>
107
  </div>
108
  </div>
109
  </div>
widgets/void-section-cf7.php CHANGED
@@ -57,6 +57,7 @@ protected function _register_controls() {
57
  'section_content',
58
  [
59
  'label' => esc_html__( 'Contact Form 7', 'void' ), //section name for controler view
 
60
  ]
61
  );
62
 
@@ -96,6 +97,7 @@ protected function _register_controls() {
96
  'section_stype',
97
  [
98
  'label' => esc_html__( 'Style Contact Form', 'void' ), //section name for controler view
 
99
  ]
100
  );
101
 
@@ -272,6 +274,7 @@ protected function _register_controls() {
272
  'section_redirect',
273
  [
274
  'label' => esc_html__( 'After Submit Redirect Setting', 'void' ), //section name for controler view
 
275
  ]
276
  );
277
 
@@ -334,6 +337,5 @@ protected function _register_controls() {
334
 
335
  <?php $v_veriable++;
336
  }
337
-
338
  }
339
  }
57
  'section_content',
58
  [
59
  'label' => esc_html__( 'Contact Form 7', 'void' ), //section name for controler view
60
+ 'tab' => Controls_Manager::TAB_CONTENT,
61
  ]
62
  );
63
 
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
 
274
  'section_redirect',
275
  [
276
  'label' => esc_html__( 'After Submit Redirect Setting', 'void' ), //section name for controler view
277
+ 'tab' => Controls_Manager::TAB_CONTENT,
278
  ]
279
  );
280
 
337
 
338
  <?php $v_veriable++;
339
  }
 
340
  }
341
  }