Skip to content

Commit b6d21f9

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1001080: Forms Restructure
1 parent 0d1489b commit b6d21f9

8 files changed

Lines changed: 1975 additions & 86 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/form-designer/Create-edit-Style-del-formFields/create-formfields.md‎

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
---
2+
layout: post
3+
title: Create form fields in the JavaScript PDF Viewer | Syncfusion
4+
description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion JavaScript PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Create form fields in JavaScript PDF Viewer
11+
12+
The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. You can also create and manage form fields programmatically using the API.
13+
14+
The PDF Viewer supports the following form field types:
15+
16+
- Textbox
17+
- Password
18+
- CheckBox
19+
- RadioButton
20+
- ListBox
21+
- DropDown
22+
- Signature field
23+
- Initial field
24+
25+
## Add the form field dynamically
26+
27+
Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
28+
29+
![Add a form field using the toolbar](../../images/addformfield.gif)
30+
31+
## Drag the form field
32+
33+
Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
34+
35+
![Drag a selected form field in the PDF Viewer](../../images/dragformfield.gif)
36+
37+
## Resize the form field
38+
39+
Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
40+
41+
![Resize a selected form field in the PDF Viewer](../../images/resizeformfield.gif)
42+
43+
## Textbox
44+
45+
### Add Textbox
46+
47+
1) Open the Form Designer toolbar.
48+
2) Select Textbox, then click/tap on the page to place it.
49+
3) Resize/move as needed and set properties in the property panel.
50+
51+
![Textbox added from UI](../../images/ui-textbox.png)
52+
53+
### Add Textbox Programmatically
54+
55+
To add a Textbox programmatically, call addFormField with type 'Textbox' and pass a settings object. The example below adds a textbox when the document loads.
56+
57+
```js
58+
var pdfviewer = new ej.pdfviewer.PdfViewer({
59+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
60+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
61+
});
62+
ej.pdfviewer.PdfViewer.Inject(
63+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
64+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
65+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
66+
);
67+
pdfviewer.appendTo('#PdfViewer');
68+
69+
pdfviewer.documentLoad = function() {
70+
pdfviewer.formDesignerModule.addFormField('Textbox', {
71+
name: 'First Name',
72+
bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
73+
});
74+
};
75+
```
76+
77+
## Password
78+
79+
### Add Password
80+
81+
1) Open the Form Designer toolbar.
82+
2) Select Password, then place it on the page.
83+
3) Configure tooltip, required, max length, etc.
84+
85+
![Password added from UI](../../images/ui-password.png)
86+
87+
### Add Password Programmatically
88+
89+
To add a Password field programmatically, call addFormField with type 'Password' and pass a settings object. The example below adds the field when the document loads.
90+
91+
```js
92+
var pdfviewer = new ej.pdfviewer.PdfViewer({
93+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
94+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
95+
});
96+
ej.pdfviewer.PdfViewer.Inject(
97+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
98+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
99+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
100+
);
101+
pdfviewer.appendTo('#PdfViewer');
102+
103+
pdfviewer.documentLoad = function() {
104+
pdfviewer.formDesignerModule.addFormField('Password', {
105+
name: 'Account Password',
106+
bounds: { X: 148, Y: 270, Width: 180, Height: 24 }
107+
});
108+
};
109+
```
110+
111+
## CheckBox
112+
113+
### Add CheckBox
114+
115+
1) Choose CheckBox in the Form Designer toolbar.
116+
2) Click on the page to place, duplicate for multiple options if needed.
117+
3) Use the property panel to set IsChecked, tooltip, and appearance.
118+
119+
![CheckBox added from UI](../../images/ui-checkbox.png)
120+
121+
### Add CheckBox Programmatically
122+
123+
To add a CheckBox programmatically, call addFormField with type 'CheckBox' and pass a settings object. Set isChecked and bounds as needed.
124+
125+
```js
126+
var pdfviewer = new ej.pdfviewer.PdfViewer({
127+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
128+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
129+
});
130+
ej.pdfviewer.PdfViewer.Inject(
131+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
132+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
133+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
134+
);
135+
pdfviewer.appendTo('#PdfViewer');
136+
137+
pdfviewer.documentLoad = function() {
138+
pdfviewer.formDesignerModule.addFormField('CheckBox', {
139+
name: 'Subscribe',
140+
isChecked: false,
141+
bounds: { X: 56, Y: 664, Width: 20, Height: 20 }
142+
});
143+
};
144+
```
145+
146+
## RadioButton
147+
148+
### Add RadioButton
149+
150+
1) Select RadioButton in the Form Designer toolbar.
151+
2) Place buttons sharing the same Name to create a group (e.g., Gender).
152+
3) Use the property panel to set selection, colors, and tooltip.
153+
154+
![Radio buttons added from UI](../../../javascript-es6/images/ui-radiobutton.png)
155+
156+
### Add RadioButton Programmatically
157+
158+
To add radio buttons programmatically, call addFormField with type 'RadioButton' and pass a settings object. Use the same name to group buttons.
159+
160+
```js
161+
var pdfviewer = new ej.pdfviewer.PdfViewer({
162+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
163+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
164+
});
165+
ej.pdfviewer.PdfViewer.Inject(
166+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
167+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
168+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
169+
);
170+
pdfviewer.appendTo('#PdfViewer');
171+
172+
pdfviewer.documentLoad = function() {
173+
// Group by name: 'Gender'
174+
pdfviewer.formDesignerModule.addFormField('RadioButton', {
175+
name: 'Gender',
176+
isSelected: false,
177+
bounds: { X: 148, Y: 289, Width: 18, Height: 18 }
178+
});
179+
180+
pdfviewer.formDesignerModule.addFormField('RadioButton', {
181+
name: 'Gender',
182+
isSelected: false,
183+
bounds: { X: 292, Y: 289, Width: 18, Height: 18 }
184+
});
185+
};
186+
```
187+
188+
## ListBox
189+
190+
### Add ListBox
191+
192+
1) Choose ListBox in the Form Designer toolbar.
193+
2) Place the field and add items in the property panel.
194+
3) Configure font, size, and selection behavior.
195+
196+
![ListBox added from UI](../../../javascript-es6/images/ui-listbox.png)
197+
198+
### Add ListBox Programmatically
199+
200+
To add a ListBox programmatically, call addFormField with type 'ListBox' and pass a settings object, including an options array for the items.
201+
202+
```js
203+
var pdfviewer = new ej.pdfviewer.PdfViewer({
204+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
205+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
206+
});
207+
ej.pdfviewer.PdfViewer.Inject(
208+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
209+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
210+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
211+
);
212+
pdfviewer.appendTo('#PdfViewer');
213+
214+
pdfviewer.documentLoad = function() {
215+
var options = [
216+
{ itemName: 'Item 1', itemValue: 'item1' },
217+
{ itemName: 'Item 2', itemValue: 'item2' },
218+
{ itemName: 'Item 3', itemValue: 'item3' }
219+
];
220+
221+
pdfviewer.formDesignerModule.addFormField('ListBox', {
222+
name: 'States',
223+
options: options,
224+
bounds: { X: 380, Y: 320, Width: 150, Height: 60 }
225+
});
226+
};
227+
```
228+
229+
## DropDown
230+
231+
### Add DropDown
232+
233+
1) Select DropDown in the Form Designer toolbar.
234+
2) Place the field, then add items via the property panel.
235+
3) Adjust appearance and default value.
236+
237+
![DropDown added from UI](../../../javascript-es6/images/ui-dropdown.png)
238+
239+
### Add DropDown Programmatically
240+
241+
To add a DropDown programmatically, call addFormField with type 'DropDown' and pass a settings object with an options array.
242+
243+
```js
244+
var pdfviewer = new ej.pdfviewer.PdfViewer({
245+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
246+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
247+
});
248+
ej.pdfviewer.PdfViewer.Inject(
249+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
250+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
251+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
252+
);
253+
pdfviewer.appendTo('#PdfViewer');
254+
255+
pdfviewer.documentLoad = function() {
256+
var options = [
257+
{ itemName: 'Item 1', itemValue: 'item1' },
258+
{ itemName: 'Item 2', itemValue: 'item2' },
259+
{ itemName: 'Item 3', itemValue: 'item3' }
260+
];
261+
262+
pdfviewer.formDesignerModule.addFormField('DropDown', {
263+
name: 'Country',
264+
options: options,
265+
bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
266+
});
267+
};
268+
```
269+
270+
## Signature field
271+
272+
### Add Signature field
273+
274+
1) Select Signature field in the Form Designer toolbar.
275+
2) Place the field where the signer should sign.
276+
3) Configure indicator text, thickness, tooltip, and required state.
277+
278+
![Signature field added from UI](../../../javascript-es6/images/ui-signature.png)
279+
280+
### Add Signature field Programmatically
281+
282+
To add a Signature field programmatically, call addFormField with type 'SignatureField' and pass a settings object.
283+
284+
```js
285+
var pdfviewer = new ej.pdfviewer.PdfViewer({
286+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
287+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
288+
});
289+
ej.pdfviewer.PdfViewer.Inject(
290+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
291+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
292+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
293+
);
294+
pdfviewer.appendTo('#PdfViewer');
295+
296+
pdfviewer.documentLoad = function() {
297+
pdfviewer.formDesignerModule.addFormField('SignatureField', {
298+
name: 'Sign',
299+
bounds: { X: 57, Y: 923, Width: 200, Height: 43 }
300+
});
301+
};
302+
```
303+
304+
## Initial field
305+
306+
### Add Initial field
307+
308+
1) Select Initial field in the Form Designer toolbar.
309+
2) Place the field where initials are required.
310+
3) Configure indicator text, tooltip, and required state.
311+
312+
![Initial field added from UI](../../../javascript-es6/images/ui-initial.png)
313+
314+
### Add Initial field Programmatically
315+
316+
To add an Initial field programmatically, call addFormField with type 'InitialField' and pass a settings object.
317+
318+
```js
319+
var pdfviewer = new ej.pdfviewer.PdfViewer({
320+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
321+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
322+
});
323+
ej.pdfviewer.PdfViewer.Inject(
324+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
325+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
326+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
327+
);
328+
pdfviewer.appendTo('#PdfViewer');
329+
330+
pdfviewer.documentLoad = function() {
331+
pdfviewer.formDesignerModule.addFormField('InitialField', {
332+
name: 'Initial',
333+
bounds: { X: 148, Y: 466, Width: 200, Height: 43 }
334+
});
335+
};
336+
```
337+
338+
## setFormFieldMode programmatically
339+
340+
The setFormFieldMode method enables adding a form field dynamically by specifying the field type. For example, the following adds a Password field when a button is clicked.
341+
342+
```html
343+
<button id="addPasswordField">Add Password Field</button>
344+
```
345+
346+
```js
347+
var pdfviewer = new ej.pdfviewer.PdfViewer({
348+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
349+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
350+
});
351+
ej.pdfviewer.PdfViewer.Inject(
352+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
353+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
354+
ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
355+
);
356+
pdfviewer.appendTo('#PdfViewer');
357+
358+
document.getElementById('addPasswordField').addEventListener('click', function () {
359+
pdfviewer.formDesignerModule.setFormFieldMode('Password');
360+
// In setFormFieldMode, pass the required field to be added like Textbox, Checkbox, etc.
361+
});
362+
```
363+
364+
## See Also
365+
366+
- [Form Designer overview](../overview)
367+
- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
368+
- [Edit form fields](./edit-formfields)
369+
- [Style form fields](./style-formfields)
370+
- [Remove form fields](./remove-formfields)
371+
- [Group form fields](../group-formfields)
372+
- [Form validation](../form-validation)
373+
- [Form Fields API](../formfields-api)

0 commit comments

Comments
 (0)