Contact Form7 Widget For Elementor Page Builder - Version 1.1.1

Version Description

  • Fix: Js erros on frontend
Download this release

Release Info

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

Code changes from version 1.1.0 to 1.1.1

Files changed (9) hide show
  1. assets/screenshot-01.png +0 -0
  2. assets/screenshot-02.png +0 -0
  3. assets/screenshot-03.jpg +0 -0
  4. assets/screenshot-04.jpg +0 -0
  5. custom-editor/assets/js/void-cf7-elementor-editor.js +115 -96
  6. custom-editor/init.php +7 -7
  7. readme.txt +9 -6
  8. void-cf7-widget-elementor.php +3 -4
  9. widgets/void-section-cf7.php +9 -1
assets/screenshot-01.png DELETED
Binary file
assets/screenshot-02.png DELETED
Binary file
assets/screenshot-03.jpg DELETED
Binary file
assets/screenshot-04.jpg DELETED
Binary file
custom-editor/assets/js/void-cf7-elementor-editor.js CHANGED
@@ -1,33 +1,79 @@
1
  (function($) {
2
- // declare some global variable to avaoid multiple searching on DOM
3
- var formId;
4
- var windowParent = window.parent;
5
- var modal, modalContainer, close, iframe;
6
- // initialization function, some selector and variable initialize on first load
7
- var initializeFormInfo = function( $scope, $ ) {
8
- // form wrapper element
9
- let elForm = $scope.find( '.void-cf7-form-widget-wrapper' );
10
- // current selected form by attr of form mark up
11
- formId = elForm.data('void-cf7-contact-form-id');
12
- // modal elementor selector
13
- modal = windowParent.jQuery('#cf7_widget_elementor_contact_form_control_modal');
14
- modalContainer = modal.find('.cf7-widget-elementor-modal-content');
15
- modalLoading = modal.find('.cf7-widget-elementor-modal-content-loader');
16
- close = modal.find('.cf7-widget-elementor-modal-close');
17
- iframe = modal.find('.cf7-widget-elementor-modal-iframe');
18
- };
19
 
20
- // elementor edit panel call back function from hook
21
- var addEditActionFunction = function (panel, model, view) {
22
- // form edit button element selector
23
- let $elementEdit = panel.$el.find( '.void-cf7-edit-form-btn' ).find( '#void-cf7-edit-form-btn' );
24
- // elementor update preview button selector
25
- var elUpdatePreviewButton = panel.$el.find('.elementor-update-preview');
26
- // hide button from edit panel
27
- elUpdatePreviewButton.hide();
28
- // form edit button click event function
29
- $elementEdit.on('click', function(e){
30
- e.preventDefault();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  // loader add on modal
32
  modalLoading.addClass('loading');
33
  // insert src in iframe with edit link of selected form
@@ -43,77 +89,50 @@
43
  // modal modal after completed all the tasks
44
  modal.fadeOut(500);
45
  });
46
- });
47
 
48
- // form add new button element selector
49
- let $elementAdd = panel.$el.find( '.void-cf7-add-form-btn' ).find( '#void-cf7-add-form-btn' );
50
- // form add new button click event function
51
- $elementAdd.on('click', function(e){
52
- e.preventDefault();
53
- // loader add on modal
54
- modalLoading.addClass('loading');
55
- // insert src in iframe with edit link of selected form
56
- iframe.attr('src', voidCf7Admin.url+'admin.php?page=wpcf7-new');
57
- // set opacity 0 to hide iframe untill it's load contents, opacity will be 1 after it's load content from modal-editor.php scripts
58
- iframe.css('opacity', 0);
59
- // open modal with contact form add new url
60
- modal.show();
61
- // modal close button click event
62
- close.on('click', function(){
63
- // element selector of form selector select2 from panel to avoid multiple search on DOM
64
- var elCf7 = panel.$el.find('[data-setting="cf7"]');
65
- // ajax request to admin-ajax for getting all contact form 7 from database
66
- $.ajax({
67
- // url of ajax request, value of voidCf7Admin.ajaxUrl is localized during enqueue script
68
- url: voidCf7Admin.ajaxUrl,
69
- type: 'POST',
70
- data: {
71
- action: 'void_cf7_data'
72
- },
73
- // wp verify nonce automatically after sending nonce like this
74
- headers: {
75
- 'X-WP-Nonce': voidCf7Admin.wpRestNonce
76
- },
77
- dataType: 'json',
78
- // success function of ajax request
79
- success: function (output) {
80
- // clear corrent option from form select select2
81
- elCf7.empty();
82
- // running loop by all from data after gettings it from ajax request
83
- $.each(output, function(index, value){
84
- // add option to form select select2 with new created from
85
- elCf7.append('<option value="'+index+'">'+value+'</option>');
86
- });
87
- //set already selected value
88
- elCf7.val( model.attributes.settings.attributes.cf7);
89
 
90
- // disable select2 of form select if there was no data
91
- if( elCf7.has('option').length == 0 ) {
92
- elCf7.attr('disabled', 'disabled');
93
- }else{
94
- elCf7.removeAttr('disabled');
95
- }
96
- },
97
- // error function of ajax request
98
- error: function (e) {
99
- console.log(e);
100
- },
101
- });
102
- // hide after completed all the actions
103
- modal.fadeOut(500);
104
  });
105
- });
106
- };
107
-
108
- // inilialization of js hook on elementor frondend and editor panel
109
- $(window).on('elementor/frontend/init', function () {
110
-
111
- // call the initialization function after loading elementor editor
112
- elementorFrontend.hooks.addAction( 'frontend/element_ready/void-section-cf7.default', initializeFormInfo);
113
-
114
- // call the the functionality of add, edit form when elementor editor panel is open for edit
115
- elementor.hooks.addAction('panel/open_editor/widget/void-section-cf7', addEditActionFunction);
116
-
117
  });
118
 
119
  })(jQuery);
1
  (function($) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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;
9
+ var modal, modalContainer, close, iframe, elUpdatePreviewButton;
10
+
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
17
+ modal = windowParent.jQuery('#cf7_widget_elementor_contact_form_control_modal');
18
+ modalContainer = modal.find('.cf7-widget-elementor-modal-content');
19
+ modalLoading = modal.find('.cf7-widget-elementor-modal-content-loader');
20
+ close = modal.find('.cf7-widget-elementor-modal-close');
21
+ iframe = modal.find('.cf7-widget-elementor-modal-iframe');
22
+
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();
30
+
31
+ // form edit button element selector
32
+ var $elementEdit = $( '.void-cf7-edit-form-btn' ).find( '#void-cf7-edit-form-btn' );
33
+
34
+ // form edit button click event function
35
+ $elementEdit.on('click', function(e){
36
+ e.preventDefault();
37
+ editButtonFunction();
38
+ });
39
+
40
+ // form add new button element selector
41
+ var $elementAdd = $( '.void-cf7-add-form-btn' ).find( '#void-cf7-add-form-btn' );
42
+ // form add new button click event function
43
+ $elementAdd.on('click', function(e){
44
+ e.preventDefault();
45
+ // loader add on modal
46
+ modalLoading.addClass('loading');
47
+ // insert src in iframe with edit link of selected form
48
+ iframe.attr('src', voidCf7Admin.url+'admin.php?page=wpcf7-new');
49
+ // set opacity 0 to hide iframe untill it's load contents, opacity will be 1 after it's load content from modal-editor.php scripts
50
+ iframe.css('opacity', 0);
51
+ // open modal with contact form add new url
52
+ modal.show();
53
+ // modal close button click event
54
+ close.on('click', function(){
55
+ addButtonFunction();
56
+ // hide after completed all the actions
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(){
77
  // loader add on modal
78
  modalLoading.addClass('loading');
79
  // insert src in iframe with edit link of selected form
89
  // modal modal after completed all the tasks
90
  modal.fadeOut(500);
91
  });
92
+ }
93
 
94
+ function addButtonFunction() {
95
+ // element selector of form selector select2 from panel to avoid multiple search on DOM
96
+ var elCf7 = panel.$el.find('[data-setting="cf7"]');
97
+ // ajax request to admin-ajax for getting all contact form 7 from database
98
+ $.ajax({
99
+ // url of ajax request, value of voidCf7Admin.ajaxUrl is localized during enqueue script
100
+ url: voidCf7Admin.ajaxUrl,
101
+ type: 'POST',
102
+ data: {
103
+ action: 'void_cf7_data'
104
+ },
105
+ // wp verify nonce automatically after sending nonce like this
106
+ headers: {
107
+ 'X-WP-Nonce': voidCf7Admin.wpRestNonce
108
+ },
109
+ dataType: 'json',
110
+ // success function of ajax request
111
+ success: function (output) {
112
+ // clear corrent option from form select select2
113
+ elCf7.empty();
114
+ // running loop by all from data after gettings it from ajax request
115
+ $.each(output, function(index, value){
116
+ // add option to form select select2 with new created from
117
+ elCf7.append('<option value="'+index+'">'+value+'</option>');
118
+ });
119
+ //set already selected value
120
+ elCf7.val( model.attributes.settings.attributes.cf7);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
 
122
+ // disable select2 of form select if there was no data
123
+ if( elCf7.has('option').length == 0 ) {
124
+ elCf7.attr('disabled', 'disabled');
125
+ }else{
126
+ elCf7.removeAttr('disabled');
127
+ }
128
+ },
129
+ // error function of ajax request
130
+ error: function (e) {
131
+ console.log(e);
132
+ },
 
 
 
133
  });
134
+
135
+ }
 
 
 
 
 
 
 
 
 
 
136
  });
137
 
138
  })(jQuery);
custom-editor/init.php CHANGED
@@ -1,7 +1,7 @@
1
  <?php
2
 
3
  function void_cf7_elementor_js_load(){
4
- wp_enqueue_script( 'void-cf7-elementor-js', plugins_url('assets/js/void-cf7-elementor-editor.js', __FILE__ ), array('jquery'), '1.0.0', true );
5
  wp_localize_script('void-cf7-elementor-js', 'voidCf7Admin',
6
  [
7
  'ajaxUrl' => admin_url( 'admin-ajax.php' ),
@@ -11,16 +11,16 @@ function void_cf7_elementor_js_load(){
11
  );
12
  }
13
 
14
- add_action( 'elementor/frontend/before_enqueue_scripts', 'void_cf7_elementor_js_load');
15
 
16
- function void_cf7_elementor_css_load(){
17
- wp_enqueue_style( 'void-cf7-elementor-css', plugins_url('assets/css/void-cf7-elementor-editor.css', __FILE__ ), [], '1.0.0' );
18
- }
19
 
20
- add_action( 'elementor/frontend/before_enqueue_styles', 'void_cf7_elementor_css_load');
21
 
22
  function load_custom_editor_modal(){
23
- wp_enqueue_style( 'void-cf7-elementor-css', plugins_url('assets/css/void-cf7-elementor-editor.css', __FILE__ ), [], '1.0.0' );
24
  ?>
25
  <div class="void-cf7-custom-editor-modal">
26
  <?php include 'modal-editor.php'; ?>
1
  <?php
2
 
3
  function void_cf7_elementor_js_load(){
4
+ wp_enqueue_script( 'void-cf7-elementor-js', plugins_url('assets/js/void-cf7-elementor-editor.js', __FILE__ ), array('jquery'), CF7_WIDGET_E_VERSION, true );
5
  wp_localize_script('void-cf7-elementor-js', 'voidCf7Admin',
6
  [
7
  'ajaxUrl' => admin_url( 'admin-ajax.php' ),
11
  );
12
  }
13
 
14
+ add_action( 'elementor/editor/after_enqueue_scripts', 'void_cf7_elementor_js_load');
15
 
16
+ // function void_cf7_elementor_css_load(){
17
+ // wp_register_style( 'void-cf7-elementor-css', plugins_url('assets/css/void-cf7-elementor-editor.css', __FILE__ ), [], CF7_WIDGET_E_VERSION );
18
+ // }
19
 
20
+ // add_action( 'elementor/frontend/before_enqueue_styles', 'void_cf7_elementor_css_load');
21
 
22
  function load_custom_editor_modal(){
23
+ wp_enqueue_style( 'void-cf7-elementor-css', plugins_url('assets/css/void-cf7-elementor-editor.css', __FILE__ ), [], CF7_WIDGET_E_VERSION );
24
  ?>
25
  <div class="void-cf7-custom-editor-modal">
26
  <?php include 'modal-editor.php'; ?>
readme.txt CHANGED
@@ -3,7 +3,7 @@ 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.0
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -67,15 +67,18 @@ Our Contact Form7 Widget For Elementor Page Builder adds a new section in the el
67
 
68
  == Screenshots ==
69
 
70
- 1. /assets/screenshot-01.png
71
- 2. /assets/screenshot-02.png
72
- 3. /assets/screenshot-03.jpg
73
- 4. /assets/screenshot-04.jpg
 
74
 
75
  == Update Instructions ==
76
- Update the plugin either via WP dashboard or via FTP. After update make sure you clear your browser cache.
77
 
78
  == Changelog ==
 
 
79
  = 1.1.0 =
80
  * New: Add and Edit contact form without leaving elementor dashboard.
81
  = 1.0.9 =
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
 
67
 
68
  == Screenshots ==
69
 
70
+ 1. /assets/screenshot-4.png
71
+ 2. /assets/screenshot-5.png
72
+ 3. /assets/screenshot-1.jpg
73
+ 4. /assets/screenshot-2.jpg
74
+ 5. /assets/screenshot-3.jpg
75
 
76
  == Update Instructions ==
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 =
83
  * New: Add and Edit contact form without leaving elementor dashboard.
84
  = 1.0.9 =
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.0
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.0');
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
 
@@ -32,6 +32,7 @@ function void_cf7_widget() {
32
 
33
  // Require the main plugin file
34
  require( __DIR__ . '/plugin.php' ); //loading the main plugin
 
35
  // helper file for this plugin. currently used for gettings all contact form of cf7. also used for ajax request handle
36
  require __DIR__ . '/helper/helper.php';
37
 
@@ -177,5 +178,3 @@ function void_cf7_admin_css(){
177
  }
178
  }
179
  add_action( 'admin_enqueue_scripts', 'void_cf7_admin_css' );
180
-
181
- include CF7_WIDGET_E_PLUGIN_DIR.'custom-editor/init.php';
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
 
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
 
32
 
33
  // Require the main plugin file
34
  require( __DIR__ . '/plugin.php' ); //loading the main plugin
35
+ include CF7_WIDGET_E_PLUGIN_DIR.'custom-editor/init.php';
36
  // helper file for this plugin. currently used for gettings all contact form of cf7. also used for ajax request handle
37
  require __DIR__ . '/helper/helper.php';
38
 
178
  }
179
  }
180
  add_action( 'admin_enqueue_scripts', 'void_cf7_admin_css' );
 
 
widgets/void-section-cf7.php CHANGED
@@ -16,7 +16,15 @@ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
16
  * @since 1.0.0
17
  */
18
 
19
- class void_cf7 extends Widget_Base { //this name is added to plugin.php of the root folder
 
 
 
 
 
 
 
 
20
 
21
  public function get_name() {
22
  return 'void-section-cf7';
16
  * @since 1.0.0
17
  */
18
 
19
+ class void_cf7 extends Widget_Base {
20
+
21
+ // public function __construct( $data = [], $args = null ) {
22
+ // parent::__construct( $data, $args );
23
+ // $this->add_style_depends('void-cf7-elementor-js');
24
+ // $this->add_script_depends('void-cf7-elementor-css');
25
+ // }
26
+
27
+ //this name is added to plugin.php of the root folder
28
 
29
  public function get_name() {
30
  return 'void-section-cf7';