Fill and validate PDF forms with custom HTML5 input types

This sample shows the improved user experience when GcPdfViewer 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 GcPdf and GcExcel.

window.onload = function() { //GcPdfViewer.LicenseKey = "***key***"; const options = { workerSrc: "/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.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 GcPdfViewer("#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("/documents-api-pdfviewer/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="/documents-api-pdfviewer/demos/product-bundles/build/gcpdfviewer.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }
#if SAMPLE_CODE // This is an example of code that you can use to create a PDF form // containing a field with a custom input type. // Create a new document: var doc = new GcPdfDocument(); // Add a page: var page = doc.NewPage(); // Create a TextField: TextField field = new TextField(); // Set custom input type: field.GcProps["type"] = "range"; // Set custom input properties: field.GcProps["title"] = "Range title"; field.GcProps["defaultvalue"] = 50; field.GcProps["min"] = 1; field.GcProps["max"] = 100; // Set standard field properties: field.Name = "field1"; field.Widget.Page = page; field.Widget.Rect = new RectangleF(72, 72, 72 * 3, 14 * 1.6f); field.Widget.DefaultAppearance.Font = StandardFonts.Helvetica; field.Widget.DefaultAppearance.FontSize = 14; // Add the field to the form: doc.AcroForm.Fields.Add(field); // Save the PDF: doc.Save("filename.pdf"); #endif