Easily Create a Fillable Form Using JavaScript Word Processor
Tags: javascript, webdev
Published: 2022-05-10 12:06:36

---
title: Easily Create a Fillable Form Using JavaScript Word Processor
published: true
date: 2022-05-10 10:46:03 UTC
tags: javascript, webdev
canonical_url: https://www.syncfusion.com/blogs/post/easily-create-a-fillable-form-using-javascript-word-processor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6hyjrf1o65lxio8p7ky.png
---

This blog illustrates how to create and fill a form in a Word document using the [Syncfusion JavaScript Word Processor (document editor)](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "JavaScript Word Processor") component. It is a user interface component that allows you to compose, edit, view, and print Word documents interactively in your web app. It provides all the standard word processing features, including editing text, formatting contents, resizing images and tables, finding and replacing text, creating a table of contents, printing, and more. It requires server-side dependencies to perform [some operations](https://ej2.syncfusion.com/documentation/document-editor/#which-operations-require-server-side-interaction "Which operations require server-side interaction in JavaScript Word Processor?").

**Note:** If you are new to our Word Processor component, it is highly recommended that you follow our [Getting Started guide](https://ej2.syncfusion.com/documentation/document-editor/getting-started/ "Getting Started with JavaScript Word Processor documentation").

## Form fields in JavaScript Word Processor

The JavaScript Word Processor component supports **legacy form fields** like text, checkboxes, and dropdown form fields to **create fillable forms in a Word** document. These form fields are supported in both DOC and DOCX formats.

The component enables authors to protect their documents with several editing restrictions. One such editing restriction is **FormFieldsOnly**. It allows users only to fill the form fields in a Word document and prevents all other edits.

![Editing Restriction Feature in Form Fields of JavaScript Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Editing-Restriction-Feature-in-Form-Fields-of-JavaScript-Word-Processor.png)
<figcaption>Editing Restriction Feature in Form Fields of JavaScript Word Processor</figcaption>

**Note:** For more details, refer to the [protecting the document in form filling mode](https://ej2.syncfusion.com/documentation/document-editor/form-fields/#protect-the-document-in-form-filling-mode "Protect the document in form filling mode of JavaScript Word Processor") documentation.

## Create a fillable form in JavaScript Word Processor

The JavaScript Word Processor component comes with an intuitive UI for designing a fillable form in a Word document by inserting legacy form fields, like in Microsoft Word apps. The legacy form fields allow you to design a form with:

- Text form fields with text type to fill any string value.
- Text form fields with number type to fill a numeric value.
- Text form fields with date type to fill a date or time.
- Checkbox form fields to answer a simple yes-or-no question.
- Dropdown form fields to choose one value from a list of strings.

The following GIF illustrates how to design a fillable form in the Word Processor component.

![Creating a Fillable Form in JavaScript Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Creating-a-Fillable-Form-in-JavaScript-Word-Processor.gif)
<figcaption>Creating a Fillable Form in JavaScript Word Processor</figcaption>

If you want to prevent the filling of a specific form field, uncheck the **Fill-in enabled** option for the required form field in the properties dialog. (To do so, double-click on the form field or choose the properties option from the context menu.)

Use the [formFieldSettings](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettingsModel/#formfieldsettings "formFieldSettings API of JavaScript Word Processor") API to customize the appearance (enable/disable shading, shading and selection of colors) of form fields.

You can automate retrieving and modifying the form field properties in a Word document using the [getFormFieldInfo](https://ej2.syncfusion.com/documentation/api/document-editor/#getformfieldinfo "getFormFieldInfo API of JavaScript Word Processor") and [setFormFieldInfo](https://ej2.syncfusion.com/documentation/api/document-editor/#setformfieldinfo "setFormFieldInfo API of JavaScript Word Processor") APIs. For more details, refer to the [Form fields in JavaScript Word Processor documentation](https://ej2.syncfusion.com/documentation/document-editor/form-fields/#get-form-field-properties "Form fields in JavaScript Document Editor documentation").

## Fill a form in JavaScript Word Processor

Once you create a fillable form and protect it with the editing restriction type **FormFieldsOnly** , your form is ready for filling.

The Syncfusion Word Processor component provides two [form-filling modes](https://ej2.syncfusion.com/documentation/api/document-editor/formFieldSettingsModel/#formfillingmode "FormFieldSettingsModel API in JavaScript Word Processor"):

- PopUp: Opens a pop-up with an in-place editor to fill the form field when you click on or navigate to a form field. This mode is enabled by default.
- Inline: This allows users to fill the form fields directly without any pop-up.

The following GIF illustrates how to fill a form in the JavaScript Word Processor component.

![Filling a Form in JavaScript Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Filling-a-Form-in-JavaScript-Word-Processor.gif)
<figcaption>Filling a Form in JavaScript Word Processor</figcaption>

Use the [resetFormFields](https://ej2.syncfusion.com/documentation/api/document-editor/#resetformfields "resetFormFields API of JavaScript Word Processor") API to reset all the form fields in a Word document to their default value.

## **Export filled form data in JavaScript Word Processor**

The Word Processor has an [exportFormData](https://ej2.syncfusion.com/documentation/api/document-editor/#exportformdata "exportFormData API of JavaScript Word Processor") API that returns the names and values of all the form fields in a document. You can easily save the exported form data to a database.

Refer to the following code example.

```js
let formFieldDate: FormFieldData[] = documentEditor.exportFormData();
```

## **Import form data into a fillable form in JavaScript Word Processor**

The component comes with an [importFormData](https://ej2.syncfusion.com/documentation/api/document-editor/#importformdata "importFormData API of JavaScript Word Processor") API that sets a specified value to the respective form field in a document. You can automatically fill the values from the database into the form fields while opening a document in Word Processor component.

Refer to the following code example.

```js
let textformField: FormFieldData = { fieldName: 'Text1', value: 'Hello World' };
let checkformField: FormFieldData = { fieldName: 'Check1', value: true };
let dropdownformField: FormFieldData = { fieldName: 'Drop1', value: 1 };

//Import form field data
this.container.documentEditor.importFormData([textformField, checkformField, dropdownformField]);

```

## **GitHub repository**

Refer to the complete working [example of Creating a Fillable Form Using Syncfusion JavaScript Word Processor](https://github.com/SyncfusionExamples/ej2-javascript-word-processor "Creating a Fillable Form Using Syncfusion JavaScript Word Processor GitHub demo").

## **Conclusion**

Thanks for reading! With the help of the form fields in the JavaScript Word Processor component, you can provide form-filling capability in Word documents to your web app with ease. The Word Processor component is available for [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "JavaScript Word Processor") (ES5 and ES6), [Angular](https://www.syncfusion.com/angular-ui-components/angular-word-processor "Angular Word Processor"), [React](https://www.syncfusion.com/react-ui-components/react-word-processor "React Word Processor"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-word-processor "Vue Word Processor"), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/word-processor "ASP.NET MVC Word Processor"), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/word-processor "ASP.NET Core Word Processor"), and [Blazor](https://www.syncfusion.com/blazor-components/blazor-word-processor "Blazor Word Processor") web platforms.

Are you already a Syncfusion user? You can download the [product setup](https://www.syncfusion.com/account/downloads/studio/ "License and download page of Essential Studio"). If you are not yet a Syncfusion user, you can download a [30-day free trial](https://www.syncfusion.com/downloads/fileformats/confirm "Free evaluation of the Syncfusion Essential Studio").

If you have any questions about these features, please let us know in the comments below. You can also contact us through our [support forum](https://www.syncfusion.com/forums?_ga=2.160385213.108886952.1555906495-214292665.1551328372 "Syncfusion support forum"), [support portal](https://support.syncfusion.com/?_gl=1*1pddyi0*_ga*MTc3NTk2OTU1MC4xNjQ1MjA1MTE2*_ga_WC4JKKPHH0*MTY1MjA4OTE4Ny4yNTkuMS4xNjUyMDg5NDE5LjA. "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/word "Syncfusion feedback portal"). We are always happy to assist you!

## **Related blogs**

- [View and Edit Word Documents in Angular Apps: Beginners’ Guide](https://dev.to/syncfusion/view-and-edit-word-documents-in-angular-apps-beginners-guide-46j5 "Blog: View and Edit Word Documents in Angular Apps: Beginners’ Guide ")
- [Document Editing Made Easy: Syncfusion Word Processor + Wisej](https://dev.to/syncfusion/document-editing-made-easy-syncfusion-word-processor-wisej-14gj "Blog: Document Editing Made Easy: Syncfusion Word Processor + Wisej")
- [Review Word Documents with Track Changes and Comments in a Web Application](https://dev.to/syncfusion/review-word-documents-with-track-changes-and-comments-in-a-web-application-10f4 "Blog: Review Word Documents with Track Changes and Comments in a Web Application")