Skip to content

D6 Digital Form Documentation

Developers

Javascript/Front end framework/validation

The D6 Forms module is built ontop of jQuery and jQuery Validation pluggin. The validation pluggin has been tested and widely utlized. It is also extensible allowing developers to add additional validation methods easily.

The front end module is built ontop of Bootstrap 5 framework. This is a weak dependency as the front end HTML can easily be modified/adapted to any front end framework your team prefers to utilize. While you can easily adapt the front end framework the following are a list of critical dependencies:

  1. Ensure you maintain a js-form-input-container on whichever div you want to show/hide based on the show/hide criteria. This class will toggle sections on/off depending if the item should be hidden/shown. The reason we dont toggle only the input element is that the label/additional content could be hidden above/below the input item.
  2. Ensure jQuery is loaded  on the page and gloabally available

Google Captcha

Protecting your forms from mallicious/automatied submission is powered by Google Captcha. Google has 2 versions of reCapatcha:

  1. Version 2 which provides users a popup (optional if Google determines the user has potential for being an automated bot)
  2. Version 3 which scores the users likelihood of being a bot (0 - 100)

Version 2 is the most common version and one that most developers/users will be used too. It is the version utilized by D6 for our forms module. Version 2 proivdes no ambiguity on whether a form should be processed/submitted by the front end framework.

Version 3 is a new version released by Google in 2018. It solves the problem of forcing users to choose images/intrusive possible nature of captcha solutions. Version 3 is meant to be included on every webpage on your site and then it will grade the likelihood the user is a bot on a scale from 0 - 100. As a developer you then determine what to do with the submission based on your own personal threshold limit. For example anything below 90% could be thrown out/ignored. In this version you could potentially lose many user submissions/inputs. An alternative would be to force version 2 validation on a user that falls below a certain threshold. In this case though, version 2 already provides this functionaliy.

Configuration

To configure your Captcha key/secret, D6 utilizes site conf support of Apache Sling framework. 

  1. Add a domain node in your conf folder (nt:unstructured)
  2. Add a property googleApiSecretGoogleCaptcha
  3. Add a property googleCaptchaAPIKey
  4. Ensure the "everyone" user has read access to the conf folder
  5. Ensure the directory has been published to the publisher

Server side functionality

Validation

Server side validation is in addition to client side validation. Server side validation utlizies the authors configured validation/messages to ensure the data submitted to the server passes the validation prior to being actioned. This additional step blocks  any automated bots from submitted data to your server without first passing through validation

Google reCaptcha

Google reCaptcha is just another form validation on a form field. The field is validated and if it does not pass, the form is rejected and the user is notified of the error.

3rd party Captcha

Our form module can be extended to support any validation method. Captcha's are designed as simple validated fields. To implement a different 3rd party captcha (or any field validation) implement the followin steps:

  1. Implement the ConstraintValidator interface
  2. Implement the Constraint interface
  3. Create a front end component that will output the HTML/CSS/Javascript required by your component. Hint ensure the CSS/JS is not loaded twice as any page could have multiple forms on it

Last Updated: