Anti-Spam with reCAPTCHA

Integrating reCAPTCHA with the Form Builder in Breakdance

In this guide, learn how to use reCAPTCHA with your Form Builder forms in Breakdance. This process involves selecting your form builder element, configuring reCAPTCHA settings, and obtaining API keys from the Google Cloud Console.

Setting Up reCAPTCHA in Form Builder

Selecting the Form Builder Element

1. First, select your Form Builder element in Breakdance.
2. In the properties panel, scroll down to the ‘Advanced’ section.
3. Expand the ‘Advanced’ accordion to access more settings.

Configuring reCAPTCHA Settings

1. Open the reCAPTCHA popover within the Advanced settings.
2. Enable reCAPTCHA by toggling the option on.
3. Choose to use the default key or opt to use a custom key under the ‘Custom’ tab.

Obtaining the reCAPTCHA API Key

1. Visit the Google Cloud Console at console.cloud.google.com. Note that you’ll need to create an account if you haven’t already.
2. In the main menu, navigate to Security > Detections and Controls > reCAPTCHA Enterprise.
3. Enable the reCAPTCHA Enterprise API.
4. Create a new key and specify the platform type as ‘website’.
5. Add your domain and click ‘Done’.
6. After creating the key, use the ‘Use Legacy Key’ link to get your actual API key.

Applying the API Key to Your Form

1. Return to your Breakdance form builder.
2. Insert the secret key obtained from the Google Cloud Console into the appropriate field.
3. Also, retrieve the site key from the Google Cloud Console and add it to the ‘Site Key’ field in Breakdance.
4. Once both keys are entered, reCAPTCHA is set and ready to use.

Verifying reCAPTCHA on the Frontend

After saving your settings in the form builder, you can verify the activation of reCAPTCHA by viewing the form on the frontend. Look for the reCAPTCHA badge near the bottom right of the page, indicating that reCAPTCHA is active.

Lazy-Load reCAPTCHA

By default, Breakdance loads reCAPTCHA via wp_enqueue_script. However, it is possible to lazy-load reCAPTCHA with some custom code.

<?php
// Disable Breakdance reCAPTCHA enqueue
add_filter('breakdance_load_recaptcha_script', '__return_false');

// Load reCAPTCHA script on first scroll
add_action('wp_footer', function() {
    $apiKey = \Breakdance\APIKeys\getKey('recaptcha_site_key'); // The API key defined in Breakdance settings
    ?>
    <script>
      (function() {
        let loaded = false;
        function loadRecaptcha() {
          if (loaded) return;
          loaded = true;
          let s = document.createElement('script');
          s.src = 'https://www.google.com/recaptcha/api.js?render=<?php echo esc_js($apiKey); ?>';
          s.async = true;
          document.body.appendChild(s);
        }

        const events = ['scroll', 'mousemove', 'touchstart'];
        events.forEach(event => {
          window.addEventListener(event, loadRecaptcha, { once: true, passive: true });
        });
      })();
    </script>
    <?php
});