Fill and validate PDF forms with custom HTML5 input types

This sample shows the improved user experience when DsPdfViewer is used to fill a PDF form with custom input types and validation rules. In particular note how the Form Filler tool (activated by the 3rd toolbar button in this sample) enhances the form filling and validation, especially when used on small devices where filling a full-sized PDF form is usually very awkward due to the amount of scrolling needed. PDF forms with custom input types and validation rules are created by DsPdf and DsExcel.

window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.worker.js", supportApi: { apiUrl: window.top.SUPPORTAPI_URL, token: window.top.SUPPORTAPI_TOKEN, webSocketUrl: false }, restoreViewStateOnLoad: false }; options.formFiller = { title: 'Fill custom input Form Fields'}; var viewer = new DsPdfViewer("#viewer", options); viewer.addDefaultPanels(); // Configure toolbar buttons: viewer.toolbarLayout.viewer = { default: ['open', 'save', 'form-filler', '$navigation', '$split', 'text-selection', 'pan', '$zoom', 'print', 'rotate', 'hide-annotations', 'doc-properties', 'about'], mobile: ['open', 'save', 'form-filler', '$navigation', '$split', 'text-selection', 'pan', '$zoom', 'print', 'rotate', 'hide-annotations', 'doc-properties', 'about'], fullscreen: ['$fullscreen', 'open', 'save', 'form-filler', '$navigation', '$split', 'text-selection', 'pan', '$zoom', 'print', 'rotate', 'hide-annotations', 'doc-properties', 'about'] }; viewer.applyToolbarLayout(); viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-pdf-input-types.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Custom PDF input types</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }