Apply electronic signatures to a form using scribble signatures

Last update: June 24, 2024

CREATED FOR:

  • User
  • Developer

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

VersionArticle link
AEM as a Cloud ServiceClick here
AEM 6.5This article

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 select the Done aem_6_3_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 select the Configure 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. Select 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, select Form Container, and select the Configure 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. Select the Done aem_6_3_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. Select 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. Use themes and in-line styles instead of CSS Class.

    Select the Done aem_6_3_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.

    Scribble sign dialog

  2. Click Sign. The scribble sign dialog appears. Sign the form and click the Done aem_6_3_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.

Experience Manager