[Resolved] Toolset Form reCAPTCHA now showing

[Author]

Posts

[hemaK]

Tell us what you are trying to do?

On all Toolset Forms, the reCAPTCHA button is NOT showing
- On Toolset Settings -> Forms -> reCAPTCHA API - we have set the correct site and secret key. The same (i.e., reCAPTCHA v2 checkbox - values are set for "reCaptcha by BestWebSoft," and the reCAPATCHA option works fine on login and create account forms.
- On the form, we can see the reCapatcha field has been automatically added (see attached image)
- On the front-end form included on the elementor page, the reCapatcha field is NOT displayed (see attached image)

Is there any documentation that you are following?
https://toolset.com/course-lesson/protecting-forms-from-spam/

Is there a similar example that we can see?

What is the link to your site?
Website: hidden link
Page where the form is included: hidden link

[hemaK]

Please also note we have a WP-Rocket cache plugin. However, the related pages with the Toolset form have been marked as "never cache"

The below files have been added to WP Rocket: Excluded JavaScript Files (based on https://toolset.com/forums/topic/what-files-to-exclude-from-wp-rocket/)

/cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/validation.js
/cred-frontend-editor/vendor/toolset/toolset-common/visual-editor/res/js/codemirror/lib/codemirror.js
/cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/conditional.js
/cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/recaptcha-v2/api.js

Also, the below files excluded based on https://toolset.com/faq/how-to-use-optimization-plugins-with-toolset/
/cred-frontend-editor/public/js/frontend.js
/cred-frontend-editor/public/js/media_manager_basic.js
/cred-frontend-editor/public/js/select2_frontend.js

Still, the issue is NOT resolved.

[hemaK]

We are using Toolset Types, Views, Forms and Access (deactivated - because of conflict with Memberpress Downloads)

Below files have been added to WP Rocket: Excluded JavaScript Files

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)
/autoptimize/classes/external/js/lazysizes.min.js
/astra/assets/js/minified/frontend.min.js
/jquery-migrate(.min)?.js
/elementor/
/elementor-pro/
ElementorProFrontendConfig
elementorFrontendConfig
/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js
/elementor-pro/assets/js/preloaded-elements-handlers.min.js
google-analytics.com/analytics.js
ga\( '
ga\('
/gtag/js
gtag\(
/gtm.js
toolsetCommonEs.fontToHead
toolsetCommonEs.styleToHead
/toolset-blocks/vendor/toolset/blocks/public/js/frontend.js
/toolset-blocks/vendor/toolset/common-es/public/toolset-common-es-frontend.js
/toolset-blocks/public/js/views-frontend.js
/wp-includes/js/underscore.min.js
wpformsRecaptchaLoad
wpformsRecaptchaCallback
/cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/validation.js
/cred-frontend-editor/vendor/toolset/toolset-common/visual-editor/res/js/codemirror/lib/codemirror.js
/cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/conditional.js
/cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/recaptcha-v2/api.js
/cred-frontend-editor/public/js/frontend.js
/cred-frontend-editor/public/js/media_manager_basic.js
/cred-frontend-editor/public/js/select2_frontend.js

PLEASE LET US KNOW WHAT ADDITIONAL FILES WE SHOULD ADD or REMOVE for Toolset Types, Views, Forms, and Access (deactivated - because of conflict with Memberpress Downloads, we enable it temporarily when we need to set the roles and permissions for forms)

Below is the CSS added in the toolset form included on the page: hidden link
-----------------------------
.mce-btn button {
background: transparent !important;
}

input[type=email], input[type=number], input[type=password], input[type=reset], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
background-color: white;
}

textarea, select {
height: 700px;
}

.wp-core-ui .quicktags-toolbar input.button.button-small {
display: none;
}

ul.wpt-form-set-checkboxes li {
float: left;
margin-right: 15px;
list-style: none;
}

input[type="submit"], input[type="reset"] {
border-radius: 5px;
}

---------------------------------
IMPORTANT
We noticed that on another toolset form included on page: hidden link, "reCaptcha is displayed," but the field display is messed up e.g., there are 3 separate taxonomies (category, industries, telecom/media providers) all values are shown together instead of the separate header as in the hidden link (where reCaptcha is NOT displayed)

[Nigel]

Hi there

To clarify if this is an issue relating to caching or to your optimisation plugin and how it handles JS files, can you temporarily disable WP_Rocket and any similar optimisation plugins.

Does the reCaptcha then work? So that it really is just a question of identifying any files that must not be optimised...

[hemaK]

The issue was with the form editor (drag and drop fields). Though the Recaptcha was added, when checked in expert, there was no code for Recaptcha.

All the forms issues were resolved by editing the related issues in the expert mode.