Apply electronic signatures to a form using scribble signatures

You can use the Scribble Signature component and Signature Step component to draw (Scribble) signature on an Adaptive Form. The Signature step component displays a PDF version of the Adaptive Form. You require a Document of Record option enabled or form template based Adaptive Forms to use the Signature step component.

Scribble sign dialog

Various Options available in Signature Window

  • A: Click the Paint Brush icon to draw your signature on canvas.
  • B: Click the Clear icon to clear the signature on canvas.
  • C: Click the Geolocation icon to add geolocation along with the signature.
  • D: Click the Keyboard icon to type your name on canvas.

Once you tap the Done aem_forms_save icon in Scribble signature window, you cannot edit the signature. In case, if you want to edit the signature, you have to disregard the current signature and re-sign using the above Paint Brush/Keyboard option.

You can tap the Configure icon to set the aspect ratio of Scribble Signature canvas.

  • When the aspect ratio of the Scribble Signature canvas is less than 1, the geolocation information is added at the bottom of the Scribble Signature canvas.

  • When the aspect ratio of the Scribble Signature canvas is more than 1, the geolocation information is added to the right-side of the Scribble Signature canvas.

scribble signature-bottom

NOTE

Signatures are always saved in a PNG format.

Configure an Adaptive Form to use Scribble Signature

  1. Create a Document of Record option enabled or form template based Adaptive Form. For step-by-step information, see Creating an Adaptive Form.

  2. Drag-and-drop the Scribble Signature component from component browser to the Adaptive Form.

  3. Tap the Configure configure icon. It opens properties browser and displays properties of the Scribble Signature component. Configure properties of the Scribble Signature component.

  4. Drag-and-drop the Signature Step component from component browser to the Adaptive Form.

    NOTE

    The Signature Step component takes up full width available for the form. It is recommended to not have any other component on the section containing the Signature Step component.

  5. In the Content browser, tap Form Container, and tap the Configure icon. It opens properties browser and displays Adaptive Form container properties. Navigate to Adaptive Form Container > Electronic Signature and deselect the Enable Adobe Sign option. Tap the Done aem_forms_save icon to save the changes.

    NOTE

    When you add a Signature Step component to an Adaptive Form, the Enable Adobe Sign option is selected automatically.

  6. Tap the Configure configure icon. It opens properties browser and displays Signature step properties. Configure the following properties:

    • Element Name: Specify name of the component.

    • Title: Specify unique title of the component.

    • Template message: Specify the message to be displayed while the signature PDF is being loaded. Adobe Sign services take some time to prepare and load signature PDF.

    • Signing Service: Select the Scribble Signature option.

    • CSS Class: Specify CSS class of the client library, if any. It is recommended to use themes and in-line styles instead of CSS Class.

    Tap the Done aem_forms_save icon to save the changes. The Signature is configured sucessfully.

    Now, when you fill a form, a PDF version of Adaptive Form is displayed and options to sign the PDF document are provided. For detailed information, see Sign an Adaptive Form using Scribble Signature.

Sign an Adaptive Form using Scribble Signature

  1. After you fill an Adaptive Form and reach the Signature Step page, the signature screen is displayed.

    Signature screen for EchoSign page

  2. Click Sign. The scribble sign dialog appears. Sign the form and click the Done aem_forms_save icon to save the signature.

    Scribble sign dialog

  3. Click complete to finish the signing process.

    Complete the signing process

The signatures are added to the form and the form control moves to the next panel.

On this page