E-sign a form using scribble signatures

Adobe recommends using the modern and extensible data capture Core Components for creating new Adaptive Forms or 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.

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.

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 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 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.

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 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 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 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 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. Adobe recommends using themes and in-line styles instead of CSS Class.

   Select the Done icon to save the changes. The Signature is configured successfully.

   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.

   

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

   

3. Click complete to finish the signing process.

   

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

See Also

• Create an AEM Adaptive Form
• Add an AEM Adaptive Form to AEM Sites page
• Apply themes to an AEM Adaptive Form
• Add components to an AEM Adaptive Form
• Use CAPTCHA in an AEM Adaptive Form
• Generate PDF version (DoR) of an AEM Adaptive Form
• Translate an AEM Adaptive Form
• Enable Adobe Analytics for an Adaptive Form to track form usage
• Connect Adaptive Form to Microsoft SharePoint
• Connect Adaptive Form to Microsoft Power Automate
• Connect Adaptive Form to Microsoft OneDrive
• Connect Adaptive Form to Microsoft Azure Blob Storage
• Connect Adaptive Form to Salesforce
• Use Adobe Sign in an AEM Adaptive Form
• Add a new locale for an Adaptive Form
• Send Adaptive Form data to a database
• Send Adaptive Form data to a REST endpoint
• Send Adaptive Form data to AEM Workflow
• Use Forms Portal to list AEM Adaptive Forms on an AEM website