> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/salesforce/forms/create-fields.md).

# Create new form fields and widget annotations using Javascript

Learn about AcroForms, a collection of interactive form fields like text boxes, checkboxes, and radio buttons. Explore how to create fillable PDF forms programmatically with sample code and examples.

Form fields also known as AcroForms are a collection of fields such as text boxes, checkboxes, radio buttons, drop-down lists, pushbuttons, and more that will gather information interactively from the user.

One of the important ideas to understand is the appearance or display of a form field is independent of the field itself and exists as a widget annotation. There can be one field to many widget annotations. This gives the freedom to present the forms appearance over multiple pages or even multiple times on the same page of a document.

## Programmatically

The form building capability is available through the programmatic API. The [online form builder demo](https://showcase.apryse.com/pdf-form-build) shows how to use this API to develop forms using a custom UI.

The basic steps are to create rectangle annotations in the document which enables a user to interact with positioning and sizing edits. Then after repositioning and resizing, you convert the rectangle annotations into fields and widget annotations.

You'll also want to make sure that you add the annotation or field after the document has been loaded. For example to add it immediately after the document loads use the [documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor) event:

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
// config.js
const { documentViewer, annotationManager, Annotations } = instance.Core;

documentViewer.addEventListener('documentLoaded', () => {
  // create field and widget annotations here
});
```

{% endcode %}

[DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
// config.js
const { docViewer, annotManager, Annotations } = instance;

docViewer.on('documentLoaded', () => {
  // create field and widget annotations here
});
```

{% endcode %}

[DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded__anchor)
{% endtab %}
{% endtabs %}

[Create fillable PDF forms](/web/get-started/guides/samples/forms.md#form-builder-demo) Full sample code demonstrating how to add form fields to a PDF. Fields are first added as annotations and then converted to interactive form fields. Add signatures, text fields, checkboxes.

## Examples

[Creating text field and text widget annotation](/salesforce/forms/forms/create-text-field.md) To create a text field and text widget annotation.

[Creating signature field and signature widget annotation](/salesforce/forms/forms/create-signature-field.md) To create a signature field and signature widget annotations.

[Creating checkbox field and checkbox widget annotation](/salesforce/forms/forms/create-checkbox-field.md) To create a checkbox field and checkbox widget annotations.

[Creating radio field and radio widget annotation](/salesforce/forms/forms/create-radio-field.md) To create a radio field and radio widget annotations.

[Creating combo box field and choice widget annotation](/salesforce/forms/forms/create-combobox-field.md) To create a combo box field and choice widget annotations.

[Creating list box field and list widget annotation](/salesforce/forms/forms/create-listbox-field.md) To create a list box field and list widget annotations.

## Form field properties

Widgets flags can be set to define the property of the form field. See [examples](https://docs.apryse.com) above for more details.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const widgetFlags = new Annotations.WidgetFlags();
widgetFlags.set('Required', true);
```

{% endcode %}
{% endtab %}
{% endtabs %}

[Annotations.WidgetFlags](https://sdk.apryse.com/api/web/Core.Annotations.WidgetFlags.html)

### Widget flags

Available [widget flags](https://sdk.apryse.com/api/web/Core.Annotations.WidgetFlags.html) are:

* ReadOnly
* Required
* NoExport
* Multiline
* Password
* NoToggleToOff
* Radio
* PushButton
* Combo
* Edit
* DoNotScroll
* RadiosInUnison


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/salesforce/forms/create-fields.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.