---
title: "Capturing electronic signatures with viewer modal | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/signatures/electronic-signatures/"
md_url: "https://www.nutrient.io/guides/web/user-interface/signatures/electronic-signatures.md"
last_updated: "2026-05-20T14:17:14.800Z"
description: "Learn to capture electronic signatures using the PDF viewer’s interface. Customize the modal view with public CSS classes for a tailored user experience."
---

# Capturing electronic signatures with viewer modals

This guide covers how users can draw a signature on a document using the PDF viewer’s user interface. Electronic signatures can also be [programmatically added to a document](https://www.nutrient.io/guides/web/signatures/adding-an-electronic-signature.md).

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/signatures/)

If you’re using Nutrient with [forms](https://www.nutrient.io/guides/web/forms/introduction-to-forms.md), users can show the signature creation modal view by tapping a signature form field in the document. Without a signature form field, users can add signatures by selecting the signature tool button.![Screenshot of Nutrient Web SDK toolbar with the sign button highlighted.](@/assets/guides/web/signatures/adding-an-electronic-signature/toolbar.png)

When the signature creation modal view is shown, the user can add their signature by drawing, selecting an image, or typing. The Draw option allows users to add their signature in their own handwriting as they would on paper. This feels great when using a touchscreen, especially with a stylus such as Apple Pencil.

The Image option allows users to select an existing saved image. This is ideal for use on a user’s main device where they have their files available. With compatible hardware, the user can also take a photo to scan their signature from paper.

The Type option allows users to enter their name and select a signature style. Typing a signature is a safe option in any situation, and it’s the most accessible way to sign: It’s compatible with screen readers such as VoiceOver, TalkBack, NVDA, and JAWS, as well as other accessibility technologies like Switch Control on Mac and iOS. Nutrient provides four signature styles out of the box, and your app can easily change the available styles by setting a list of fonts.

With the Draw and Type options, the user can choose between black and two shades of blue, which is useful when it’s necessary for the signature to stand out against the form itself.



## Electronic signatures modal

The electronic signatures modal view is highly customizable and flexible. There are multiple public CSS classes prefixed with `PSPDFKit-Electronic-Signatures` for the UI elements that are part of this feature.

Refer to the [CSS API documentation](https://www.nutrient.io/api/web/css-Electronic-Signatures.html) for a list of the available public CSS classes.
---

## Related pages

- [Customizing the electronic signature UI](/guides/web/signatures/customizing-the-signature-user-interface.md)
- [Invisible signing: Digitally sign any PDF](/guides/web/user-interface/signatures/invisible-signing.md)
- [Customizing electronic signature fonts](/guides/web/user-interface/signatures/signature-fonts.md)
- [Customizing the digital signature validation status](/guides/web/user-interface/signatures/validation-status.md)