# Signature Fields

**URL:** <https://pdfjs.community/t/signature-fields/1679>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [May 16, 2022, 7:34pm UTC](https://pdfjs.community/t/signature-fields/1679 "2022-05-16T19:34:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![suporte](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@suporte](https://pdfjs.community/u/suporte)\
**Post date:** [May 16, 2022, 7:34pm UTC](https://pdfjs.community/t/signature-fields/1679/1 "2022-05-16T19:34:52Z")

</div>

Hello!

About [PDF.js Express Signature Field | Documentation](https://pdfjs.express/documentation/signature/signature-field)

Can we have 2 types of signatures fields on the same document?

One for signatures and one for initials for example.

Thanks!

**Which product are you using?**

**PDF.js Express Version**

**Detailed description of issue**  
{Description here}

**Expected behaviour**  
{Provide a screenshot or description of the expected behaviour}

**Does your issue happen with every document, or just one?**  
{Answer here}

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**  
{Provide a relevant code snippet}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [May 16, 2022, 7:34pm UTC](https://pdfjs.community/t/signature-fields/1679/2 "2022-05-16T19:34:54Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Add signature fields to PDFs - isSignedDigitally](https://pdfjs.express/documentation/signature/signature-field.8#issigneddigitally)
- [Signatures with PDF.js Express - Get started](https://pdfjs.express/documentation/signature/overview#get-started)
- [XFDF format - Examples](https://pdfjs.express/documentation/annotation/xfdf#examples)

APIs:
- [Core.Annotations.TextUnderlineAnnotation - getFormFieldPlaceHolderType()](https://pdfjs.express/api/Core.Annotations.TextUnderlineAnnotation.html#getFormFieldPlaceHolderType__anchor)
- [Core.Annotations.SignatureWidgetAnnotation - new SignatureWidgetAnnotation(field, options)](https://pdfjs.express/api/Core.Annotations.SignatureWidgetAnnotation.html#SignatureWidgetAnnotation__anchor)
- [Core.Annotations.WidgetFlags - new WidgetFlags(options)](https://pdfjs.express/api/Core.Annotations.WidgetFlags.html#WidgetFlags__anchor)

Forums:
- [Add Signature Fields](https://pdfjs.community/t/add-signature-fields/400/1)
- [When Importing Signatures, The Blue “Sign Here” Button Still Shows On Top Of Signature](https://pdfjs.community/t/when-importing-signatures-the-blue-sign-here-button-still-shows-on-top-of-signature/1551/1)
- [How can I “require” a signature?](https://pdfjs.community/t/how-can-i-require-a-signature/1410/1)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 18, 2022, 3:10pm UTC](https://pdfjs.community/t/signature-fields/1679/4 "2022-05-18T15:10:36Z")

</div>

Hey there!

Right now we only support standard signature fields (this is part of the PDF spec). If you wanted the user to do an initial instead of a signature you would have to enforce that on your end.

I think you might find [this guide](https://www.pdftron.com/documentation/web/guides/interacting-with-signature-field/#createsignhereelement) useful (this is a WebViewer guide but it applies to PDF.js Express as well). What you could do is change the style of your initial fields to say “Add initials here” or something.

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![vicente](https://avatars.discourse-cdn.com/v4/letter/v/858c86/32.png) [@vicente](https://pdfjs.community/u/vicente)\
**Post date:** [May 18, 2022, 6:34pm UTC](https://pdfjs.community/t/signature-fields/1679/5 "2022-05-18T18:34:54Z")

</div>

@Logan,

I first put StampAnnotations (with different styles for initials and signature) so the user can choose the locations in the document.

Then I change these StampAnnotations to SignatureWidgetAnnotation, but I can’t create different styles for the signature widgets. When I change to what would be the initials, it also changes to what would be the signature.

That is, I cannot make a SignatureWidgetAnnotation with “Sign here” and another with “Initial here” in the same document.

How could I do this?

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 20, 2022, 2:26pm UTC](https://pdfjs.community/t/signature-fields/1679/6 "2022-05-20T14:26:45Z")

</div>

Hey!

When you create the SignatureWidgetAnnotation, you could insert some custom data on the annotation which you can use to identify which styling the element should have:

```javascript
    const annot = new Annotations.SignatureWidgetAnnotation(field, {});
    annot.setCustomData("type", "initial"); // set the type of signature here

    const createSignHereElement = Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement;

    Annotations.SignatureWidgetAnnotation.prototype.createSignHereElement = function () {
      // signHereElement is the default one with dark blue background
      const signHereElement = createSignHereElement.apply(this, arguments);

      const type = this.getCustomData("type");

      if (type === "initial") {
        // set initial theme here
      } else {
        // set signature theme here
      }

      return signHereElement;
    };

```

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![vicente](https://avatars.discourse-cdn.com/v4/letter/v/858c86/32.png) [@vicente](https://pdfjs.community/u/vicente)\
**Post date:** [May 20, 2022, 8:18pm UTC](https://pdfjs.community/t/signature-fields/1679/7 "2022-05-20T20:18:40Z")

</div>

Hi, @Logan!

I’ve tried something like this and it didn’t work.

But it was because I put the SignatureWidgetAnnotation prototype while creating the document and then exporting the xfdf. When I imported the xfdf into another WebViewer, the prototype reverted to the default (white text and blue background).

So I just put the custom SignatureWidgetAnnotation prototype when I want to use the widgets to sign.

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![vicente](https://avatars.discourse-cdn.com/v4/letter/v/858c86/32.png) [@vicente](https://pdfjs.community/u/vicente)\
**Post date:** [May 23, 2022, 12:15pm UTC](https://pdfjs.community/t/signature-fields/1679/8 "2022-05-23T12:15:04Z")

</div>

And I didn’t use customData either. 😅

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 24, 2022, 8:29pm UTC](https://pdfjs.community/t/signature-fields/1679/9 "2022-05-24T20:29:12Z")

</div>

Glad you figured it out!

Let me know if there’s anything else you need help with

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 24, 2022, 8:29pm UTC](https://pdfjs.community/t/signature-fields/1679/10 "2022-05-24T20:29:15Z")

</div>