# Add signature fields to PDFs

**URL:** <https://pdfjs.community/t/add-signature-fields-to-pdfs/713>\
**Category:** Technical Support\
**Created:** [April 21, 2021, 1:50pm UTC](https://pdfjs.community/t/add-signature-fields-to-pdfs/713 "2021-04-21T13:50:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![stefans](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@stefans](https://pdfjs.community/u/stefans)\
**Post date:** [April 21, 2021, 1:50pm UTC](https://pdfjs.community/t/add-signature-fields-to-pdfs/713/1 "2021-04-21T13:50:20Z")

</div>

**PDF.js Express Version**

Hello,

I’m trying to implement “Add signature fields to PDFs” from PDF JS Express documentation ( [PDF.js Express Signature Field | Documentation](https://pdfjs.express/documentation/signature/signature-field) ). And “sign here” annotation is not showing on my pdf file. Can you please help me how I can add signature fields to my pdf file???

Thank you,  
Stefan

---

<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:** [April 21, 2021, 1:50pm UTC](https://pdfjs.community/t/add-signature-fields-to-pdfs/713/2 "2021-04-21T13:50:21Z")

</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:

- [Add Signature Fields](https://pdfjs.community/t/add-signature-fields/400/2)
- [Issue in new Pdfjs-express version 7.1.0](https://pdfjs.community/t/issue-in-new-pdfjs-express-version-7-1-0/292/6)
- [Pdf js viewer throwing error on Firefox](https://pdfjs.community/t/pdf-js-viewer-throwing-error-on-firefox/429/6)
- [How to protect my license key](https://pdfjs.community/t/how-to-protect-my-license-key/560/1)
- [Create file attachment annotation using JavaScript](https://pdfjs.express/documentation/guides/create-annotation-file-attachment)

---

<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:** [April 23, 2021, 3:00pm UTC](https://pdfjs.community/t/add-signature-fields-to-pdfs/713/3 "2021-04-23T15:00:07Z")

</div>

Hi there!

Our documentation for this feature is not the greatest and this is something I will improve in the near future.

For now, here is some code to get you started:

```javascript
  const { annotManager, Annotations } = instance;
  const { WidgetFlags } = Annotations;

  document.getElementById('b1').onclick = async () => {
    // set flags for required
    const flags = new WidgetFlags();
    flags.set('Required', true);

    // create a form field
    const field = new Annotations.Forms.Field("some signature field name", { 
      type: 'Sig', 
      flags,
    });

    // create a widget annotation
    const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
      appearance: '_DEFAULT',
      appearances: {
        _DEFAULT: {
          Normal: {
            data:
              'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAANSURBVBhXY/j//z8DAAj8Av6IXwbgAAAAAElFTkSuQmCC',
            offset: {
              x: 100,
              y: 100,
            },
          },
        },
      },
    });

    // set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 50;
    widgetAnnot.Height = 20;

    //add the form field and widget annotation
    annotManager.addAnnotation(widgetAnnot);
    annotManager.drawAnnotationsFromList([widgetAnnot]);
    annotManager.getFieldManager().addField(field);

```

Note that this signature field will not be merged into the document when saving, to do so, you need to use our [Merge REST API](https://pdfjs.express/documentation/utils/merge).

Let me know if you need anything else!

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![moiz73.mg](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@moiz73.mg](https://pdfjs.community/u/moiz73.mg)\
**Post date:** [August 3, 2022, 7:11pm UTC](https://pdfjs.community/t/add-signature-fields-to-pdfs/713/5 "2022-08-03T19:11:39Z")

</div>

can we make this signhere field movable/dragable?