EDITS.WS

Tag: reCAPTCHA

  • How to Use reCAPTCHA for Your Divi Contact Form Module

    Contact forms are one of the most popular forms that bots use to send you spam. Google’s reCAPTCHA is one of the best tools available to reduce that spam. Fortunately, Divi’s Contact Form Module integrates perfectly with reCAPTCHA. In this post, we’ll see how to use reCAPTCHA for your Divi Contact Form Module. We’ll see how to set up the reCAPTCHA account and how to use it with the Contact Form Module.

    Let’s get started.

    Enable ReCAPTCHA for Your Divi Contact Form Module

    First, let’s see how to enable reCAPTCHA for your Divi Contact Form Module. The option is built-in, but you’ll need to enable it and then set it up. Fortunately, this isn’t difficult. For our examples, I’m using the Contact page from the free Poke Restaurant Layout Pack that’s available within Divi.

    Open the Contact Form Module’s settings by clicking the dark gray gear icon that appears on hover.

    Enable ReCAPTCHA for Your Divi Contact Form Module

    In the first tab, General settings, scroll down to Spam Protection. You’ll see two options that you can enable:

    • Use a Spam Protection Service
    • Use Basic Captcha

    The spam protection service requires setup, while the Basic Captcha works out of the box. Even though it requires set-up, the spam protection service is the one I’d recommend for most Divi users. Let’s take a closer look to see why.

    Enable ReCAPTCHA for Your Divi Contact Form Module

    reCAPTCHA vs Basic Captcha

    While both options provide spam protection, they are very different in how they work and interact with users. Let’s see what each does and how they compare.

    Basic Captcha

    Basic Captcha provides a simple math equation and a box to enter the answer. This adds an extra step that users have to contend with before submitting a message. Some users will skip the form and move on. Also, while it does help reduce spam, it’s not 100% bot-proof and you’ll probably still get a lot of spam.

    It is simple to set up and use, and it’s commonly used across the web, so users know how to use it. It’s a good option, especially if you don’t have a lot of users. If you want better protection and a better user experience, reCAPTCHA is a better option.

    reCAPTCHA vs Basic Captcha

    reCAPTCHA

    reCAPTCHA is Google’s service. It’s been refined for over a decade to spot spam bots. It doesn’t require users to interact with a separate element within the form to prove they’re human. Instead, it uses data from adaptive risk-based algorithms to determine whether or not a visitor is a real person or a bot.

    The visitor is scored based on that data. If they have a passing score, their form is submitted. If they don’t have a passing score, they’ll see a message that a bot has been detected. The score can be adjusted to increase or reduce the sensitivity.

    Users won’t have to do anything to interact with the spam protection, so they won’t be affected by it. The form itself looks normal, but you’ll see an icon in the lower right corner of the screen to show the form is protected by reCAPTCHA. The icon expands on hover to show more information and provide links.

    Google’s reCAPTCHA service is available to use for free for up to 1 million assessments per month. Google also has an enterprise version available with higher precision and customization options.

    reCAPTCHA vs Basic Captcha

    Use a Spam Protection Service

    Now, let’s see how to use reCAPTCHA with your Divi Contact Form Module. First, enable Use a Spam Protection Service.

    Use a Spam Protection Service

    This opens a new set of options where you can select the service provider, choose the account, and set the minimum score. Let’s take a closer look at each setting.

    Service Provider

    This lists all the service providers you’ve integrated. Simply select the provider you want. If you haven’t integrated any providers, it will only show the default, reCAPTCHA. In our case, reCAPTCHA is the provider we want, so we don’t have to make any changes to the service provider.

    Use a Spam Protection Service

    reCAPTCHA v3 Account

    reCAPTCHA v3 Account lets you choose which account you want to use for this captcha. If you don’t have any accounts already set up, you’ll see a large ADD button where you can add the account. We’ll step through this process in the next section.

    Use a Spam Protection Service

    Minimum Score

    The Minimum Score lets you specify the score for good interaction. A score of 0 is usually a bad interaction, such as a bot. Bad interactions see a visual challenge to prove they’re not a bot. A score of 1 is probably a real person, so it’s considered a good interaction. You can finetune the score in increments of .1.

    The default setting is 0.5. This is a good place to start. If you’re getting a lot of bots, then adjust the score by .1 until they’re no longer an issue. If you’re hearing complaints that your visitors are seeing a message that says they’re a bot, then lower the score.

    Use a Spam Protection Service

    How to Setup reCAPTCHA

    Let’s step through the process of setting up a reCAPTCHA account and integrating it with your Divi Contact Form Module.

    Create Your Account

    To create your reCAPTCHA v3 account, go to the reCAPTCHA About page and select the link in the header labeled v3 Admin Console.

    How to Setup reCAPTCHA

    Next, you’ll see the screen to create the reCAPTCHA. Add a title, select reCAPTCHA v3, enter your domain, accept the terms of service, and click Submit.

    • Label: the title
    • reCAPTCHA Type: reCAPTCHA v3
    • Domains: your domain
    • Accept the terms of service

    How to Setup reCAPTCHA

    Adding reCAPTCHA to Your Site

    Your reCAPTCHA account will now show your Site Key and Secret Key. You’ll need to copy them and add them to the Contact Form Module one at a time. You’ll also need to paste the name of your reCAPTCHA.

    Adding reCAPTCHA to Your Site

    To add your reCAPTCHA account, click the large ADD button under the account selection dropdown box.

    Adding reCAPTCHA to Your Site

    Next, paste your Site Name, Site Key, and Secret Key into the fields. Click Submit. If you haven’t already, you can now close the Google reCAPTCHA page. Your reCAPTCHA account is now integrated with your Divi Contact Form Module.

    • Site Name: the name of your reCAPTCHA
    • Site Key: the key provided by reCAPTCHA
    • Secret Key: the key provided by reCAPTCHA

    Adding reCAPTCHA to Your Site

    Choose Your Account

    Next, select your new account from the reCAPTCHA v3 Account dropdown box.

    Adding reCAPTCHA to Your Site

    Minimum Score

    If you’ve used reCAPTCHA before and have gotten a lot of spam comments, consider adjusting your Minimum Score. I recommend starting with the default setting and adjusting as needed. Close your Divi Contact Form Module’s settings and save your work. Be sure to test your contact form.

    • Minimum Score: 0.5

    Adding reCAPTCHA to Your Site

    Test Your Contact Form

    Next, test your contact form to make sure it’s working correctly. You’ll see an icon in the bottom right corner that informs the user the form is protected by reCAPTCHA. A visitor with a good score will be able to submit their message as normal.

    Adding reCAPTCHA to Your Site

    For this example, I’ve set the score too high, and it sees everyone as a bot. I’ve set this one to a Minimum Score of 1. I then adjusted the score down to 0.8 and I was able to submit the contact form. Here’s how the form looks with the score set too high.

    Adding reCAPTCHA to Your Site

    Ending Thoughts

    That’s our look at how to use reCAPTCHA for your Divi Contact Form Module. reCAPTCHA v3 is a better option than Basic Captcha. Both provide good spam protection, and the Contact Form Module gives you the option to use either one, but reCAPTCHA is the best option for improved UX and it’s more thorough. It’s not perfect, so you still might see some spam comments, or your visitors might become blocked from using your contact form. Fortunately, the Contact Form Module does have an adjustment that gives you control over reCAPTCHA’s sensitivity.

    We want to hear from you. Do you use reCAPTCHA with your Divi Contact Form Module? Let us know about your experience in the comments.

    The post How to Use reCAPTCHA for Your Divi Contact Form Module appeared first on Elegant Themes Blog.

  • How to Add Cloudflare Turnstile CAPTCHA in WordPress

    Do you want to add Cloudflare Turnstile CAPTCHA in WordPress?

    CAPTCHA and reCAPTCHA can stop spambots, but they’re also unpopular with visitors. By using a non-intrusive technology like Turnstile, you can protect your website from spambots and automated scripts without annoying your visitors.

    In this article, we will show you how to add Cloudflare Turnstile to your WordPress website.

    How to add Cloudflare Turnstile CAPTCHA in WordPress

    Why Add Cloudflare Turnstile CAPTCHA in WordPress?

    Spam is a big problem for all websites including WordPress. Spambots can use non-secure forms to send you spammy links, which will make it more difficult for you to do lead generation.

    They can also try to break into your site’s login form by using brute force attacks or flooding your site with spam comments that’ll damage the visitor experience and your WordPress SEO.

    If you run an online store, then automated scripts may even place fraudulent orders.

    Many website owners use CAPTCHA and reCAPTCHA to block scripts and bots. However, a lot of people complain that these technologies deliver a poor user experience, and some even worry about CAPTCHAs stealing their data.

    With that being said, Cloudflare has introduced Turnstile CAPTCHA. This alternative technology uses a selection of non-intrusive challenges that often run invisibly in the browser. This allows you to protect your website without asking visitors to complete complex puzzles.

    To help keep visitor information private, Cloudflare uses Apple’s Private Access Tokens to test whether the visitor is a real person without collecting extra data.

    If you’re using form builders or WooCommerce, then Turnstile also integrates with these third-party plugins. This allows you to add invisible CAPTCHAs across many different areas of your WordPress website.

    With that in mind, let’s see how you can add Cloudflare Turnstile CAPTCHA in WordPress. Simply use the quick links below to jump between the different steps.

    Install a WordPress Cloudflare CAPTCHA Plugin

    The easiest way to add Cloudflare’s CAPTCHA to WordPress is by using Simple Cloudflare Turnstile. This free plugin allows you to connect your website to the Turnstile service, and then check that it’s responding to your requests correctly.

    First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, go to Settings » Cloudflare Turnstile.

    Adding a site key and secret key to a WordPress website

    The plugin will now ask you to provide a site key and site secret.

    You can get these for free by clicking on the link next to ‘You can get your site key and secret from here.’

    Get a Cloudflare Turnstile Site Secret and Site Key

    The link will take you to the Cloudflare login page where you can register your domain and create a site key and site secret. This is free, but you will need to create a Cloudflare account using your email address, if you haven’t already.

    Once you’re logged into the Cloudflare dashboard, find ‘Turnstile’ in the left-hand menu and give it a click.

    The Cloudflare dashboard

    This will take you to a screen with some basic information about Cloudflare Turnstile.

    If you’re happy to go ahead, then click on the ‘Add site’ button.

    Adding a site to the Cloudflare dashboard

    On this screen, start by typing in a ‘Site Name.’

    This is just for your reference so you can use anything you want.

    Adding a WordPress website to the Cloudflare dashboard

    Next, type your website’s domain name into the ‘Domain’ field.

    The next step is choosing which CAPTCHA widget you want to create. The first choice is ‘Managed,’ which is the method recommended by Cloudflare. This is where Cloudflare analyzes the browser’s request and then decides what kind of challenge it should run.

    While this is happening, the visitor will see a loading animation.

    Adding a Cloudflare Turnstile CAPTCHA to WordPress

    Wherever possible, Cloudflare will try to run a non-interactive challenge in the background, so the visitor doesn’t have to do anything.

    In this case, the user will simply see a ‘Success’ message when their browser passes the test.

    Creating a managed Cloudflare Turnstile CAPTCHA

    Sometimes, Cloudflare may decide that it’s safer to show an interactive challenge instead. However, the visitor will simply need to check a box rather than complete a puzzle, so it’s still easier than the traditional puzzle-based CAPTCHAs.

    Unless you have a specific reason not to, it’s smart to use managed CAPTCHAs as this gives you a good level of security with minimum impact on the visitor experience.

    How to create a managed CAPTCHA for WordPress

    Don’t want to use interactive challenges on your WordPress website? Then you can choose ‘Non-interactive’ or ‘Invisible’ instead.

    Non-interactive challenges run in the browser so the visitor doesn’t have to take any action. Just like the managed CAPTCHA, visitors will see the loading animation and a ‘Success’ message when the challenge is complete.

    If you choose ‘Invisible’ instead, then the visitor won’t see the animation or success message. This setting allows you to completely hide the CAPTCHA from your visitors, which can avoid confusion and won’t add any clutter to your WordPress theme.

    After making your decision, click on the ‘Create’ button.

    As soon as you’ve done that, Cloudflare will show your site key and secret key.

    Creating a site key and secret key for your WordPress website

    You can now add this information to the plugin’s settings on your website.

    Add Cloudflare Turnstile CAPTCHA to Your WordPress Website

    In your WordPress dashboard, head back to Settings » Cloudflare Turnstile. You can now go ahead and add the ‘Site Key’ and ‘Site Secret’ to your WordPress dashboard.

    Adding the Cloudflare secret key and site secret to WordPress

    After that, you may want to customize how the CAPTCHA looks on your website, and how it acts. To start, you can open the ‘Theme’ dropdown and choose from light, dark, or auto.

    The following image shows an example of how the ‘Dark’ theme looks in the WordPress comment section.

    A Cloudflare Turnstile CAPTCHA with a dark theme

    By default, Cloudflare Turnstile shows a ‘Please verify that you are human’ message to visitors. You may want to change this. For example, you might briefly explain why the CAPTCHA is so important, or that it will only take a few seconds to complete.

    To add your own wording, simply type into the ‘Custom Error Message’ field.

    Creating a custom error message for a WordPress CAPTCHA

    After that, you can select the forms where you’ll use the Cloudflare Turnstile CAPTCHA.

    The options you see may vary depending on the plugins you’ve installed, but by default, you can use Turnstile with all the built-in WordPress forms. This includes the login page, user registration form, and password reset page.

    Enabling Cloudflare Turnstile CAPTCHA for the WordPress forms

    When you’re happy with the information you’ve entered, scroll to the bottom of the screen and click on ‘Save Changes.’

    Now, if you visit your website you’ll see the Turnstile CAPTCHA in action.

    Bonus: Add Turnstile CAPTCHA to Your WordPress Forms

    WordPress comes with different built-in forms, but you’ll often want to create custom forms. For example, you might replace the default forms with professionally-designed alternatives that better suit your website.

    You can also add forms that are missing from the core WordPress software, such as contact forms and online order forms.

    Simple Cloudflare Turnstile integrates with the best contact form plugins for WordPress including WPForms and Formidable Forms. This allows you to add the same advanced CAPTCHAs to all your forms, no matter how you created them.

    How to add a CAPTCHA to a WordPress contact form

    To add a CAPTCHA to any WPForms or Formidable Forms page, simply go to Settings » Cloudflare Turnstile in your WordPress dashboard.

    At the bottom of the page, you should see a section for either WPForms or Formidable Forms, depending on which plugin you’re using.

    Integrating Cloudflare with WPForms and Formidable Forms

    Simply click on either of these sections to expand.

    To add the CAPTCHA to all your forms, just check the ‘Enable on all…’ box.

    Enabling CAPTCHA for WPForms

    If you’re using a ‘Managed’ or ‘Non-interactive’ CAPTCHA, then you can change whether the loading and success animation appears before or after the form’s ‘Submit’ button.

    In the following image, we’re using the ‘After button’ option.

    Changing where the CAPTCHA appears in WPForms

    To make this change, simply open the ‘Widget Location’ dropdown.

    Then, choose either ‘Before Button’ or ‘After Button.’

    Changing the location of the CAPTCHA widget

    Some forms may not need a CAPTCHA. For example, you might disable the CAPTCHA for forms that aren’t getting many conversions, to see whether this improves your conversion rates. For more information, see our guide on WordPress conversion tracking made simple.

    To remove the CAPTCHA, you’ll need to type the form’s ID into the ‘Disable Form IDs’ field.

    Removing the CAPTCHA from WPForms

    If you’re using WPForms, then you can get this ID by going to WPForms » All Forms.

    The ‘Shortcode’ column shows each form’s ID. For example, in the following image the form ID is 62.

    How to disable CAPTCHAs on your WordPress website

    If you’re a Formidable Forms user, then head over to Formidable » Forms instead.

    On this screen, find the form that you want to exclude and make a note of the number in the ‘ID’ column.

    Forms, created using the Formidable Forms WordPress plugin

    You can now add these IDs to the ‘Disable Form IDs’ field.

    To remove the CAPTCHA from multiple forms, simply separate each ID with a comma.

    Disabling the Cloudflare CAPTCHA for multiple forms

    When you’re happy with how you’ve set up the integration, don’t forget to click on ‘Save Changes’ to store your settings.

    Now if you visit any form created using Formidable Forms or WPForms, you’ll see the Cloudflare Turnstile CAPTCHA in action.

    Bonus: Add Cloudflare Turnstile CAPTCHA to WooCommerce

    Scripts and bots aren’t just bad news for WordPress blogs and websites. If you run an online store, then spambots and automated scripts might try to register with your store and place fake orders.

    Every transaction comes with processing feeds, so fake orders can cost you a lot of money and make it difficult to grow your business.

    The good news is that Cloudflare Turnstile also integrates with WooCommerce. This allows you to protect all your eCommerce pages including the WooCommerce login, signup, and checkout pages.

    The Cloudflare Turnstile CAPTCHA on the WooCommerce checkout page

    To add Cloudflare Turnstile to your WooCommerce pages, simply go to Settings » Cloudflare Turnstile.

    Then, scroll to the ‘WooCommerce Forms’ section.

    Adding CAPTCHAs to your WooCommerce forms

    If it isn’t already expanded, then click on this section.

    You’ll now see all the WooCommerce pages where you can add a Cloudflare CAPTCHA. Simply check the box next to each page that you want to protect.

    Protecting your WooCommerce store with a CAPTCHA

    After that, don’t forget to click on ‘Save Changes’ to store your settings. Now, if you visit any of your WooCommerce pages, you’ll see the Cloudflare Turnstile CAPTCHA.

    We hope this article helped you learn how to add Cloudflare Turnstile CAPTCHA in WordPress. You can also go through our ultimate WordPress security guide and the best WordPress membership plugins.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add Cloudflare Turnstile CAPTCHA in WordPress first appeared on WPBeginner.