Add “Start Mode” setting to Friendly Captcha

src/integrations/captchas/FriendlyCaptcha.php

@@ -20,6 +20,7 @@ class FriendlyCaptcha extends Captcha
     public ?string $secretKey = null;
     public ?string $siteKey = null;
     public string $language = 'en';
+    public string $startMode = 'none';
 
 
     // Public Methods
@@ -74,6 +75,7 @@ public function getFrontEndJsVariables(Form $form, $page = null): ?array
             'siteKey' => App::parseEnv($this->siteKey),
             'formId' => $form->getFormId(),
             'language' => $this->_getMatchedLanguageId() ?? 'en',
+            'startMode' => $this->startMode ?? 'none',
         ];
 
         $src = Craft::$app->getAssetManager()->getPublishedUrl('@verbb/formie/web/assets/frontend/dist/', true, 'js/captchas/friendly-captcha.js');

src/templates/integrations/captchas/friendly-captcha/_plugin-settings.html

@@ -26,4 +26,17 @@
     value: integration.settings.language ?? 'auto',
     options: languageOptions,
     warning: macros.configWarning('language', 'formie'),
+}) }}
+
+{{ forms.selectField({
+    label: 'Start Mode' | t('formie'),
+    instructions: 'Specify when the captcha should start solving a puzzle. Refer to [docs](https://docs.friendlycaptcha.com/#/widget_api?id=data-start-attribute).' | t('formie'),
+    name: 'startMode',
+    value: integration.settings.startMode ?? 'auto',
+    options: [
+        { label: 'Auto' | t('formie'), value: 'auto' },
+        { label: 'Focus' | t('formie'), value: 'focus' },
+        { label: 'None' | t('formie'), value: 'none' },
+    ],
+    warning: macros.configWarning('startMode', 'formie'),
 }) }}

src/web/assets/frontend/src/js/captchas/friendly-captcha.js

@@ -11,6 +11,7 @@ export class FormieFriendlyCaptcha extends FormieCaptchaProvider {
         this.form = this.$form.form;
         this.siteKey = settings.siteKey;
         this.language = settings.language;
+        this.startMode = settings.startMode;
 
         // We can have multiple captchas per form, so store them and render only when we need
         this.$placeholders = this.$form.querySelectorAll('[data-friendly-captcha-placeholder]');
@@ -80,7 +81,7 @@ export class FormieFriendlyCaptcha extends FormieCaptchaProvider {
         // Render the captcha inside the placeholder
         this.widget = new WidgetInstance(this.createInput(), {
             sitekey: this.siteKey,
-            startMode: 'none',
+            startMode: this.startMode,
             language: this.language,
             doneCallback: this.onVerify.bind(this),
             errorCallback: this.onError.bind(this),