{"id":5757,"date":"2024-04-14T12:07:31","date_gmt":"2024-04-14T04:07:31","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5757"},"modified":"2024-04-14T12:07:31","modified_gmt":"2024-04-14T04:07:31","slug":"insert-a-recaptcha-field","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-a-recaptcha-field\/","title":{"rendered":"Insert a reCAPTCHA field"},"content":{"rendered":"\n
\n

reCAPTCHA is an available service from Google that can aid in shielding form submissions from spam and misuse. The service is designed to make sure that only genuine users are submitting forms on your site. Discover more about utilizing reCAPTCHA in forms.<\/p>\n

In this instructional session, you will grasp:<\/p>\n

    \n
  1. Ways to include reCAPTCHA to forms<\/li>\n
  2. Methods to activate reCAPTCHA verification for a site<\/li>\n
  3. Techniques for tailoring the reCAPTCHA<\/li>\n<\/ol>\n

    Crucial:<\/strong> reCAPTCHA will not operate when you\u2019ve designated a custom form action to compile your form submissions.<\/p><\/blockquote>\n

    Crucial:<\/strong> Webflow forms utilizing reCAPTCHA won\u2019t work on exported sites. Should you plan to export your site, you’ll have to connect reCAPTCHA in your forms in accordance with Google’s reCAPTCHA guide<\/a>. Additionally, be informed about how to gather form submissions on exported sites.<\/p><\/blockquote>\n

    Ways to include reCAPTCHA to forms<\/h2>\n

    You can affix reCAPTCHA to your forms from the Add panel<\/strong> > Elements<\/strong> section > Forms<\/strong> area. reCAPTCHA elements must be inserted into a form.<\/p>\n

    Crucial:<\/strong> reCAPTCHA will not show up on your live site until you empower validation in Site settings > Forms section. It’s important to realize that this will enable reCAPTCHA validation across all<\/em> forms on your site, hence make sure to include a reCAPTCHA element in all of your forms.<\/p><\/blockquote>\n

    Helpful hint:<\/strong> reCAPTCHA automatically detects the language of the site visitor and exhibits the widget in that language.<\/h6>\n
    \n
    \"The<\/div>\n<\/figure>\n

    Methods to activate reCAPTCHA verification for a site<\/h2>\n

    You can configure reCAPTCHA on your site by following these steps:<\/p>\n

      \n
    1. Register your site and produce API keys<\/li>\n
    2. Turn on reCAPTCHA verification<\/li>\n<\/ol>\n

      Register your site and produce API keys<\/h3>\n
        \n
      1. Head to Google\u2019s reCAPTCHA page<\/a><\/li>\n
      2. Select the reCAPTCHA type<\/strong>: reCAPTCHA v2<\/strong><\/li>\n
      3. Pick the \u201cI\u2019m not a robot\u201d Checkbox<\/strong><\/li>\n<\/ol>\n

        Afterwards, register all domains linked to your site by inputting them under Domains<\/strong>. Once registered, you’ll be given 2 API keys (a Site Key and a Secret Key) in your reCAPTCHA settings. These keys will be used when activating reCAPTCHA verification in the next step.<\/p>\n

        Note:<\/strong> Ensure to add any custom domains you\u2019re employing (e.g., \u201cexample.com\u201d). You can also incorporate \u201cexample.webflow.io\u201d (substituting \u201cexample\u201d with your subdomain) if you\u2019re using the subdomain for publishing, staging, or testing. Subdomains for a custom domain are automatically registered. This means registration for \u201cexample.com\u201d also registers \u201csubdomain.example.com.\u201d Read more about Google reCAPTCHA’s domain name authentication<\/a>.<\/h6>\n

        Crucial:<\/strong> Registering domains may take up to 30 minutes to become effective.<\/p><\/blockquote>\n

        Turn on reCAPTCHA verification<\/h3>\n

        Crucial:<\/strong>Prior to enabling reCAPTCHA on your site, <\/strong>remember that enabling reCAPTCHA will enforce validation for all<\/em> forms on your site. Any forms lacking a reCAPTCHA element will be unsuccessful in submission<\/strong>. This adjustment will take place instantly<\/strong> after you click Save (step 4 below), regardless of republishing your site or not. Ensure to add a reCAPTCHA element to each of your forms before activating reCAPTCHA.<\/p>\n

        To switch on reCAPTCHA verification on your site:<\/p>\n

          \n
        1. Navigate to Site settings<\/strong> > Forms<\/strong> section > reCAPTCHA validation<\/strong><\/li>\n
        2. Insert the API keys from Google (the reCAPTCHA v2<\/strong>Site Key<\/strong> and the reCAPTCHA v2 Secret Key<\/strong>) \u2014 into the relevant fields<\/li>\n
        3. Activate reCAPTCHA verification<\/li>\n
        4. Save<\/strong> your adjustments<\/li>\n
        5. Publish<\/strong> your site<\/li>\n<\/ol>\n

          Crucial:<\/strong> For protection and proper functionality, ensure not to paste the Secret Key<\/strong> in the Site Key<\/strong> field.<\/p><\/blockquote>\n

          Note:<\/strong> If you prefer to continue designing, or you\u2019re not prepared to enable reCAPTCHA for all forms on your live site, you can return to Site settings to activate it later.<\/h6>\n

          We recommend verifying that the form operates correctly on your published site after adding a reCAPTCHA field.<\/p>\n

          Frequently Asked Questions and resolution<\/h2>\n

          If you face issues with reCAPTCHA, here are potential problems, alerts, error messages, and how you can troubleshoot them.<\/p>\n

          I can\u2019t observe the reCAPTCHA element on my published site<\/h3>\n

          Ensure you’ve activated reCAPTCHA verification, included a reCAPTCHA element in a form, and republished your site.<\/p>\n

          your webpage<\/li>\n

        6. Try clearing your cache and then conducting another test<\/li>\n<\/ol>\n
          \n
          The \"ERROR for site owner: Invalid domain for site key\" can be seen in the reCAPTCHA component.<\/div>\n<\/figure>\n
          Helpful hint<\/strong>: If clearing your cache doesn\u2019t resolve the issue, try testing in an incognito window. If the reCAPTCHA displays correctly without any errors, this action should refresh the cache for the reCAPTCHA configuration. By now, the reCAPTCHA should operate as expected in all browsing sessions. If the issue persists, delete the API keys (the reCAPTCHA v2 Site Key<\/strong> and the reCAPTCHA v2 Secret Key<\/strong>) and generate new ones. Afterwards, update both keys in your Site settings<\/strong>. Keep in mind that the Site key and Secret key are case-sensitive.<\/h6>\n

          How to personalize the reCAPTCHA<\/h2>\n

          Though reCAPTCHA offers limited customization options, you can personalize it using custom attributes. Please be aware that styles applied via custom attributes will only reflect on your live site.<\/p>\n

          Modifying the reCAPTCHA\u2019s color scheme<\/h3>\n

          By default, the reCAPTCHA component comes in a light theme with a grey background and black text. You have the option to switch it to a dark theme featuring a black background with white text. To enable the dark theme:<\/p>\n

            \n
          1. Choose the reCAPTCHA <\/strong>component on the canvas<\/li>\n
          2. Navigate to Element settings<\/strong> > Custom attributes<\/strong><\/li>\n
          3. Click on the \u201cplus<\/strong>\u201d icon<\/li>\n
          4. Enter \u201cdata-theme\u201d in the Name<\/strong> field<\/li>\n
          5. Input \u201cdark\u201d in the Value<\/strong> field<\/li>\n<\/ol>\n
            \n
            \"An<\/div>\n<\/figure>\n

            Changing the reCAPTCHA’s dimensions<\/h3>\n

            The reCAPTCHA element comes with a predefined size. You can make it more compressed by adding a custom attribute.<\/p>\n

            To reduce the size of the reCAPTCHA component:<\/p>\n

              \n
            1. Select the reCAPTCHA <\/strong>element on the canvas<\/li>\n
            2. Access Element settings<\/strong> > Custom attributes<\/strong><\/li>\n
            3. Tap on the \u201cplus<\/strong>\u201d icon<\/li>\n
            4. Insert \u201cdata-size\u201d in the Name<\/strong> field<\/li>\n
            5. Type \u201ccompact\u201d in the Value<\/strong> field<\/li>\n<\/ol>\n
              \n
              \"An<\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn how to add a reCAPTCHA field to your forms.","protected":false},"author":2,"featured_media":5157,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-5757","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5757"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5757\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5284"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}