Multi Captcha plugin implementation

• Get the Multi Captcha plugin from october cms backend settings->updates->install plugins.
• Once successfully installed, the multi captcha plugin will be available on the navigation bar.

Get the recaptcha keys

• To get the recaptcha api all you need is a google account and register your domain in the google's recaptcha admin page https://www.google.com/recaptcha/intro/index.html
• Enter the label name and the domain address of your site. Say for example demotodo.com. Now register your site.
• Now you will be allocated with keys(Site key and Secret key).
• Paste the site key and secret key in the appropriate fields at backend menu-> Multi Captcha plugin.
• The optional label name and domain address fields are used for reference purpose. These fields can have the label name and domain address which are registered for google recaptcha api.

Steps to add reCAPTCHA

• Multi Captcha plugin provides a component called reCaptcha which is used to render more than one reCaptchas in your page.

• If your project includes several forms in different pages and if all those forms require captcha authentication then it is better to define the reCaptcha component within the layout's configuration section itself. Because during the page execution life cycle the layout component modules will be executed before the page component modules, hence it will be easier for the components to get render.

• Click and add the reCaptcha component to a page from backend -> cms -> pages.

• reCaptcha component is bound to a page and protects only the action handlers of the page. So from version 1.3.0 declaring the component in layout is not valid.

• Place the {% component 'reCaptcha' %} code inside the form element.

• For example, AJAX based form submission

  <form data-request="onSubmit">
      <div>
           <input type = "text" name="user" />
      </div>
      <div>
          {% component 'reCaptcha'  %}
      </div>
      <div>
           <input type="submit" value="Submit" />
      </div>
  </form>

• General form submission

  {{ form_open({ request: 'onUpdate' }) }}
      <div>
          <input type = "text" name="user" />
      </div>
      <div>
          {% component 'reCaptcha'  %}
      </div>
      <div>
          <input type="submit" value="Submit" />
      </div>
  {{ form_close() }}

• Similarly you can have another form in the same page and add the {% component 'reCaptcha' %} code inside it.

• Now, click the reCaptcha component and click the Handlers option, add the form request handlers of the page, one by one in the popup dialog.

• Save the page.

Note:

Whenever you remove a {% component 'reCaptcha' %} code from a form, please do remember to remove the form's handler from the reCaptcha component Handlers list.

Nested Component

To use the reCaptcha component inside another component, do the following

• Open the htm file of the component within which you want place the reCaptcha using a text editor.
• Inside, find the form tag and place the {% component 'reCaptcha' %} code.
• Open the page (backend -> cms -> page) where the intended component is already placed.
• Now click and add the reCaptcha component to this page.
• Click the Handlers option and enter the form action handler of the intended component
• Component action handler should be entered in the specific format componentName::onHandlerName Component Name - Document Reference

Upgrading to 1.1

Integrated RainLab Translate plugin to enhance multi language validation error message based on the locale triggered in front end.

Upgrading to 1.2

Flash pop up error response for general html form submission