How to Fill Out and Submit PDF Forms on the Web

Imagine that you're attending a conference that includes multiple sessions with different speakers. At the end of each session you are given a feedback form that will be filled out manually and returned to the conference organizers. How many people do you think would take the time to submit the feedback? However, if the same form is shared via an online link, it is much more convenient to submit the feedback. It's as simple as a button click on your phone. Designing such platforms is a very common, as we usually gather information online in a predefined format using forms.

This blog will help you to design one such application that will allow you to load an interactive PDF form into a viewer. This viewer supports filling out a form, and after the form has been filled out users can then click the submit button, saving the completed form in PDF format on the server.

We will use the GrapeCity Documents Pdf Viewer to view and fill out the interactive PDF forms and the GrapeCity Documents for Pdf API to collect the form data and save it as a PDF file on the server. The simple form will gather the basic personal details, including a name and whether the person would like to subscribe to the mailing list.

Step 1: Load the Blank PDF Form in GcDocs PDF Viewer

GcDocs Pdf Viewer is a client-side JavaScript-based control that enables you to load, view, edit, and save PDF files on a browser. The extensive client-side API of this control provides the methods and properties to perform advanced functions. Here we can invoke the open method to load the interactive PDF form in the GcDocs PDF Viewer.

<script>
    function loadPdfViewer(selector) {
        var viewer = new GcPdfViewer(selector, { renderInteractiveForms: true });            
        viewer.addDefaultPanels();            
        viewer.open("StaticFiles/FormSubmit.pdf");
    }
</script>

This is what the blank form loaded in the viewer will look like:

Step 2: Fill in and Submit the Form

Click in the text box fields to input the appropriate values and then click on the submit button to save the filled in form on the server. This is how the completed form on the browser will appear:

Step 3: Save the Completed PDF Form on the Server

This is where the GcPdf API comes into play. Clicking on the submit button invokes the handler on the server, which performs the following actions to save the PDF file on the server:

1. It first parses the client response and builds the 'values' collection, filling it with the submitted field values.

public IActionResult Index(IFormCollection fields)
    {
var fieldsTree = new List<FieldExportEntry>();
foreach (var key in fields.Keys)
{
   if (fields.TryGetValue(key, out StringValues value))
     {
        var node = new FieldExportEntry() { Name = key };
        foreach (var v in value)
         { 
           if (node.Values == null) 
               node.Values = new List<string>(); 
           node.Values.Add(v); 
         }
            fieldsTree.Add(node);
      }
 }
        ImportFormData(fieldsTree);            
 return View();
     }

2. It then invokes a method to prepare the XML using the values collection created in the above step.

             public static void SaveFieldsToXML(List<FieldExportEntry> values, Stream stream)
        {                        
            XmlWriterSettings xws = new XmlWriterSettings()
            {
                Indent = true,
                CloseOutput = false,
                Encoding = Encoding.UTF8,
            };
            using (XmlWriter xw = XmlWriter.Create(stream, xws))
            {
                xw.WriteStartElement("fields");
                xw.WriteAttributeString("xmlns", "xfdf", null, "http://ns.adobe.com/xfdf-transition/");
                foreach (var ftn in values)
                {
                    xw.WriteStartElement(ftn.Name);
                    foreach (var v in ftn.Values)
                    {
                        xw.WriteStartElement("value");
                        xw.WriteString(v == "true" ? "Yes" : v);
                        xw.WriteEndElement();
                    }
                    xw.WriteEndElement();
                }
                xw.WriteEndElement();
            }
        }

3. It imports the XML data into a newly created PDF document and saves the resulting PDF on the server side. The ImportFormDataFromXML from GcPdf API is used to import the XML data. The Save method from GcPdf API is used to save the PDF file on the server.

public static void ImportFormData(List<FieldExportEntry> values)
        {
            GcPdfDocument pdf = new GcPdfDocument();            
            using (var fs = new FileStream(Path.Combine("MyStaticFiles", "FormSubmitted.pdf"), FileMode.Open, FileAccess.Read))
            {
                pdf.Load(fs);
                using (var ms = new MemoryStream())
                {
                    SaveFieldsToXML(values, ms);                    
                    ms.Seek(0, SeekOrigin.Begin);
                    pdf.ImportFormDataFromXML(ms);
                }

                //Save the filled in form on the server
                pdf.Save("filledForm.pdf");               
            }
        }

Here is a quick view of the filled in form saved on the server:

Try using the GcDocs Pdf Viewer to load PDF files and explore the different PDF features supported by the viewer including forms, annotations, JavaScript actions, password protected documents, and more.

Try this tutorial yourself!

Download the sample