Putting form data into a PDF

Webform's ability to populate a PDF can be handy if, for example, you have a process that still relies on paper forms, or maybe you need to provide the user with something that has a more designed look. The process is on the complex side, so we highly recommend reading the documentation for using fillable PDFs before you attempt this on your own.

It all starts with a PDF

The first step is to have (or create) a fillable PDF. This post will walk through the very basic steps for the PDF we will use in our example, but if you're creating your own fillable PDF, you should look to Adobe's documentation.

We started with of Microsoft's certificate templates for PowerPoint, exporting it as a PDF and opening it in Acrobat. In Acrobat (on a Mac; instruction may differ for Windows), we selected "prepare form" from the edit menu, disabled the auto-detection of form fields (it doesn't guess very well), and clicked to create the form.

We added two text fields, one for where the name would go and one for where the date would go. We renamed the fields to easy-to-understand labels - "Name" and "Date".

Next, we added some formatting to the fields. Formatting of text is controlled by the PDF, not by the WCMS, so this is important. We do this by right-clicking on the field and selecting "properties" from the menu.

First, on the options tab, we set a default value so we can see what our choices are doing. It doesn't have to be anything specific, because it will be replaced with the form data, but it is a good idea to use representative text so you can ensure your settings work well with the data you expect.

We leave the date aligned to the left, but we center align the name field. Then we turn off scrolling for long text because this is intended for print. For this form, we don't want to allow multi-line text, but for forms where you are expecting a paragraph of text to fill a large space, this is a good idea.

On the "appear..." tab, we set the font to something that looks good for our intentions, making sure not to pick a font that brings up a warning that it cannot be embedded. For this case, the date field was set to Proxima Nova 18 pt, because that looks similar to the font already on the form, and fits well within the field even with the longest possible date. The name field is set to a decorative font called Eskapade Fraktur, with the size set to "auto" (which is at the top of the size list) so that the size grows or shrinks depending on the length of the name provided. You could also set this to a fixed size, and limit the number of characters allowed in your form, giving you a more consistent size while making sure the information will always be able to fit.

Next, we'll close the "prepare a form" sidebar, and make sure the document is properly accessible. You should ensure that all parts of the page are tagged appropriately, similar to what you would do for a web page, and that the reading order is correct.

This can be a complex task, for which you should refer to Adobe's documentation on accessible PDFs.

With the fields added and the PDF ensured to be accessible, we save it and head back to the WCMS.

For this example, we're going to ask people to answer the math question, "What's 1 + 1?", and then reward them for getting it correct by presenting them with a certificate of achievement.

We'll add a number element with the title "What's 1 + 1?", and make it required and save it.

Next, we add a text field with the title "What's your name?", and again make it required. To make things easier when we're connecting this to our PDF, we'll edit the key to just make it "name". Before saving the field, we'll go over to the "conditions" tab and set it to be visible only if the value of the number field is 2.

Finally, we'll customize the submit button to add a condition that it's only enabled if the value of the number field is 2.

We'll save the form elements and go to the view tab and fill in the form and submit. This not only proves the form is working, it gives us a submission record that we will use later.

There's more to set up, but we'll come back to this form later.

From the dashboard, we pull down the list of options beside "Form" and choose "Manage PDFs". We browse for the PDF we created, and click "Create" to start editing the settings.

We give the form an administrative title to make it easier to find - in this case, "Basic math completion certificate".

We'll update the filename pattern so that everyone gets a personalized filename - by default, it's just the name of the file you uploaded, but we'll change that to "Math certificate for [webform_submission:values:name].pdf". This uses a token to include the user's submitted name in the filename that they will download.

We'll set the default webform to the one we just created.

At the bottom of the page, you'll see a table listing all the keys in the PDF. All the other columns will be blank, because we haven't set anything up yet.

For now, let's save what we've done, because setting up the fields will navigate away from the page and cause us to lose our settings.

Once we go back in to edit the form, we scroll to the "Form info" section and take note of the form ID that is listed inside of square brackets. We will need this number later.

Now we click "edit" beside the "name" key, and give it the label "Name" and the fill pattern to the token for the user's submitted name ("[webform_submission:values:name]") and save the field.

We do something similar for the "date" key, giving it the label "Date" and using a date token for the fill pattern. Since none of the default patterns match what we want, we'll use a custom pattern, "[date:custom:F j, Y]" (you can look up what F, j, and Y do by reading the PHP date format documentation).

Because we tested the form earlier, we can test that the PDF is populating as we would expect. We'll click on the "Download this PDF template populated with data..." link (located underneath the default webform selection field) to see the PDF populated with information from the most recent form submission.

You may want to tweak your PDF at this point - perhaps you think that the name field needs to move up a bit to be more properly centered, for example. Edit the PDF in Acrobat, then in the WCMS, edit your form and upload your updated template. As long as you have not changed the names of the fields, you will not have to adjust anything else.

Now we'll navigate back to our form and go to the "settings" tab. Under the "submissions" sub-tab, scroll down to the submission access token settings and checkmark "allow users to view a submission using a secure token" - this needs to be done to allow users to download the filled PDF, and ensures that they cannot see other people's information.

Once we've saved this, we go to the "confirmation" tab, setting the confirmation type to "page", and setting the confirmation page title to "Congratulations!" and the confirmation message, "Congratulations! Download your certificate."

We'll highlight "download your certificate" and click the link icon, inserting this complex link: [site:url]fillpdf?fid=1&entity_type=webform_submission&entity_id=[webform_submission:sid]&token=[webform_submission:token]

(If the file ID noted earlier was not "1", we would have to replace the "1" in the link with the actual file ID.)

Under "confirmation back link" we'll disable the display of the back to webform link.

Save everything, and now we're ready to insert the working form onto a page!