Support for WordPress Plugin Ninjaforms?

[pixelpublic]

Hello! Due to GDPR rules it's not recommended to continue ReCaptcha Use. We use Ninja Forms for most of our WordPress website and support for Friendly Captcha would be very nice. Any plans here?

[pixelpublic]

Hello! It's been over two month since I made that post ... would like to ask if there is a chance to get this integration?

[pixelpublic]

Hey @merlinfuchs - I recognized that you've assigned this request to yourself - could you give me an update here, please?

[merlinfuchs]

I haven't looked into it yet. I'm planning to make an integration for Ninja Forms at some point.

[pbov]

Any new plans here? Would be great as NinjaForms only supports ReCaptcha

[tinytim84]

@pixelpublic @pbov I wrote this to implement Friendly Captcha on Ninja Forms, if it helps.

document.addEventListener('DOMContentLoaded', function () {
  var formRendered = Marionette.Object.extend({
    initialize: function () {
      this.listenTo(
        nfRadio.channel('form'),
        'render:view',
        this.initFriendlyCaptcha
      );
    },

    initFriendlyCaptcha: function (view) {
      const fcDiv = document.createElement('div');
      fcDiv.className = 'wp-nf-frc';

      const formContent = document.querySelector('.nf-form-content');

      formContent.appendChild(fcDiv);

      const friendlyCaptchaElement = formContent.querySelector('.wp-nf-frc');

      if (friendlyCaptchaElement) {
        const submitButton = formContent.querySelector(
          'nf-field .submit-container .nf-field-element input[type="submit"]'
        );

        if (submitButton) {
          submitButton.disabled = true;
        }

        if (window.friendlyChallenge) {
          new window.friendlyChallenge.WidgetInstance(friendlyCaptchaElement, {
            doneCallback: this.fcDone,
            sitekey: '<YOUR_SITE_KEY>',
            startMode: 'auto',
          });
        }
      }
    },

    fcDone: function () {
      const submitButtons = Array.from(
        document.querySelectorAll(
          'nf-field .submit-container .nf-field-element input[type="submit"]'
        )
      );

      for (const submitButton of submitButtons) {
        submitButton.disabled = false;
      }
    },
  });

  new formRendered();
});

You just need to enqueue the Friendly Captcha widget script and then enqueue this with a dependency on the Friendly Captcha script so it loads in the right order.

I also added some CSS to make it fit better with my form styles.

[pixelpublic]

@pixelpublic @pbov I wrote this to implement Friendly Captcha on Ninja Forms, if it helps.

document.addEventListener('DOMContentLoaded', function () {
  var formRendered = Marionette.Object.extend({
    initialize: function () {
      this.listenTo(
        nfRadio.channel('form'),
        'render:view',
        this.initFriendlyCaptcha
      );
    },

    initFriendlyCaptcha: function (view) {
      const fcDiv = document.createElement('div');
      fcDiv.className = 'wp-nf-frc';

      const formContent = document.querySelector('.nf-form-content');

      formContent.appendChild(fcDiv);

      const friendlyCaptchaElement = formContent.querySelector('.wp-nf-frc');

      if (friendlyCaptchaElement) {
        const submitButton = formContent.querySelector(
          'nf-field .submit-container .nf-field-element input[type="submit"]'
        );

        if (submitButton) {
          submitButton.disabled = true;
        }

        if (window.friendlyChallenge) {
          new window.friendlyChallenge.WidgetInstance(friendlyCaptchaElement, {
            doneCallback: this.fcDone,
            sitekey: '<YOUR_SITE_KEY>',
            startMode: 'auto',
          });
        }
      }
    },

    fcDone: function () {
      const submitButtons = Array.from(
        document.querySelectorAll(
          'nf-field .submit-container .nf-field-element input[type="submit"]'
        )
      );

      for (const submitButton of submitButtons) {
        submitButton.disabled = false;
      }
    },
  });

  new formRendered();
});

You just need to enqueue the Friendly Captcha widget script and then enqueue this with a dependency on the Friendly Captcha script so it loads in the right order.

I also added some CSS to make it fit better with my form styles.

Hey! Thank you! Did not had chance yet to test it but I will try it! Great!

[merlinfuchs]

Hey @tinytim84,

thanks a lot for providing the code snippet to enable Friendly Captcha in Ninjaforms. I think this can be a good workaround while there is no official support for it!

Just keep in mind that to fully integrate Friendly Captcha you need some server-side code to call the verification endpoint and validate the captcha solutions. Without that potential attackers can bypass the Captcha. The client-side-only solution you provided will still stop some basic bots, but it might not be sufficient.

We understand that an official integration for Ninjaforms is needed and will try to provide it soon!