diff --git a/Lib/WeDevs_Settings_API.php b/Lib/WeDevs_Settings_API.php
index eac841279..9f3098aa8 100644
--- a/Lib/WeDevs_Settings_API.php
+++ b/Lib/WeDevs_Settings_API.php
@@ -710,7 +710,6 @@ function(){
// disable the pro preview checkboxes
$('span.pro-icon-title').siblings('input[type="checkbox"]').prop('disabled', true);
-
var fields = $('table.form-table input, table.form-table select, table.form-table textarea');
// iterate over each field and check if it depends on another field
diff --git a/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js
new file mode 100644
index 000000000..1de5a8a4b
--- /dev/null
+++ b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/index.js
@@ -0,0 +1,36 @@
+/**
+ * Field template: Cloudflare Turnstile
+ */
+Vue.component('form-cloudflare_turnstile', {
+ template: '#tmpl-wpuf-form-cloudflare_turnstile',
+
+ mixins: [
+ wpuf_mixins.form_field_mixin
+ ],
+
+ computed: {
+ has_turnstile_api_keys: function () {
+ return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+ },
+
+ no_api_keys_msg: function () {
+ return wpuf_form_builder.field_settings.turnstile.validator.msg;
+ },
+
+ turnstile_image: function () {
+ var base_url = wpuf_form_builder.asset_url + '/images/cloudflare-placeholder-';
+
+ if (this.field.turnstile_theme === 'dark') {
+ base_url += 'dark';
+ } else {
+ base_url += 'light';
+ }
+
+ if (this.field.turnstile_size === 'compact') {
+ base_url += '-compact';
+ }
+
+ return base_url + '.png';
+ }
+ }
+});
diff --git a/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php
new file mode 100644
index 000000000..6eb749161
--- /dev/null
+++ b/admin/form-builder/assets/js/components/form-cloudflare_turnstile/template.php
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
diff --git a/admin/form-builder/assets/js/mixins/global.js b/admin/form-builder/assets/js/mixins/global.js
index 60ecffd03..0482a6834 100644
--- a/admin/form-builder/assets/js/mixins/global.js
+++ b/admin/form-builder/assets/js/mixins/global.js
@@ -44,6 +44,10 @@ Vue.mixin({
return (wpuf_form_builder.recaptcha_site && wpuf_form_builder.recaptcha_secret) ? true : false;
},
+ has_turnstile_api_keys: function () {
+ return wpuf_form_builder.turnstile_site && wpuf_form_builder.turnstile_secret;
+ },
+
containsField: function(field_name) {
var self = this,
i = 0;
diff --git a/assets/images/cloudflare-placeholder-dark-compact.png b/assets/images/cloudflare-placeholder-dark-compact.png
new file mode 100644
index 000000000..ed8eae746
Binary files /dev/null and b/assets/images/cloudflare-placeholder-dark-compact.png differ
diff --git a/assets/images/cloudflare-placeholder-dark.png b/assets/images/cloudflare-placeholder-dark.png
new file mode 100644
index 000000000..417250f0e
Binary files /dev/null and b/assets/images/cloudflare-placeholder-dark.png differ
diff --git a/assets/images/cloudflare-placeholder-light-compact.png b/assets/images/cloudflare-placeholder-light-compact.png
new file mode 100644
index 000000000..be7012d1c
Binary files /dev/null and b/assets/images/cloudflare-placeholder-light-compact.png differ
diff --git a/assets/images/cloudflare-placeholder-light.png b/assets/images/cloudflare-placeholder-light.png
new file mode 100644
index 000000000..b63cd087c
Binary files /dev/null and b/assets/images/cloudflare-placeholder-light.png differ
diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php
index ca68db439..93414ac83 100644
--- a/assets/js-templates/form-components.php
+++ b/assets/js-templates/form-components.php
@@ -438,6 +438,21 @@ class="option-chooser-radio"
+
+
+
+ 'has_turnstile_api_keys',
+ 'button_class' => 'button-faded',
+ 'msg_title' => __( 'Site key and Secret key', 'wp-user-frontend' ),
+ 'msg' => sprintf(
+ // translators: %s: settings url
+ __( 'You need to set Site key and Secret key in Settings in order to use "Cloudflare Turnstile" field. Click here to get the these key.', 'wp-user-frontend' ),
+ admin_url( 'admin.php?page=wpuf-settings' ),
+ 'https://developers.cloudflare.com/turnstile/'
+ ),
+ ];
+ }
+
+ /**
+ * Get field options setting
+ *
+ * @since WPUF_SINCE
+ *
+ * @return array
+ */
+ public function get_options_settings() {
+ $settings = [
+ [
+ 'name' => 'label',
+ 'title' => __( 'Title', 'wp-user-frontend' ),
+ 'type' => 'text',
+ 'section' => 'basic',
+ 'priority' => 10,
+ 'help_text' => __( 'Title of the section', 'wp-user-frontend' ),
+ ],
+ [
+ 'name' => 'turnstile_theme',
+ 'title' => 'Turnstile Theme',
+ 'type' => 'radio',
+ 'options' => [
+ 'light' => __( 'Light', 'wp-user-frontend' ),
+ 'dark' => __( 'Dark', 'wp-user-frontend' ),
+ ],
+ 'default' => 'light',
+ 'section' => 'basic',
+ 'priority' => 12,
+ 'help_text' => __( 'Select turnstile theme', 'wp-user-frontend' ),
+ ],
+ [
+ 'name' => 'turnstile_size',
+ 'title' => 'Turnstile Size',
+ 'type' => 'radio',
+ 'options' => [
+ 'normal' => __( 'Normal [Width: 300px, Height: 65px]', 'wp-user-frontend' ),
+ 'flexible' => __( 'Flexible [Width: 100% (min: 300px), Height: 65px]', 'wp-user-frontend' ),
+ 'compact' => __( 'Compact [Width: 150px, Height: 140px]', 'wp-user-frontend' ),
+ ],
+ 'default' => 'normal',
+ 'section' => 'basic',
+ 'priority' => 13,
+ 'help_text' => __( 'Select turnstile size', 'wp-user-frontend' ),
+ ],
+ [
+ 'name' => 'turnstile_type',
+ 'title' => 'Turnstile type',
+ 'type' => 'radio',
+ 'options' => [
+ 'managed' => __( 'Managed (recommended)', 'wp-user-frontend' ),
+ 'non_interactive' => __( 'Non-Interactive', 'wp-user-frontend' ),
+ 'invisible' => __( 'Invisible', 'wp-user-frontend' ),
+ ],
+ 'default' => 'managed',
+ 'section' => 'advanced',
+ 'priority' => 11,
+ 'help_text' => __( 'Select turnstile type', 'wp-user-frontend' ),
+ ],
+ ];
+
+ return $settings;
+ }
+
+ /**
+ * Get the field props
+ *
+ * @since WPUF_SINCE
+ *
+ * @return array
+ */
+ public function get_field_props() {
+
+ $props = [
+ 'input_type' => 'turnstile',
+ 'template' => $this->get_type(),
+ 'label' => '',
+ 'turnstile_type' => 'managed',
+ 'turnstile_theme' => 'light',
+ 'turnstile_size' => 'normal',
+ 'is_meta' => 'yes',
+ 'id' => 0,
+ 'wpuf_cond' => null,
+ ];
+
+ return $props;
+ }
+}