Jotform’s PDF Editor automatically turns collected form submission data into professional, elegant PDFs that are easy to share with colleagues and customers. Our goal is to lessen your workload and automate the building process as much as possible. So, by default, when you create a new PDF template, the PDF Editor will populate it with the same question and answer (Q&A) pairs found in your web form.
Suppose we have a form with 3 fields on your form – Name, Email, and Comments (as shown below). When you create a new PDF template, all these Q&A pairs are automatically generated for you.
It’s the same process we have in place for emails. When you create a new Email Notification, the form builder automatically creates the table (with Q&A pairs) for you as well.
This alone should suffice if you just want a plain PDF file containing your user’s submission data. However, if you plan to fully customize the design and layout of the PDF Document, knowing your way around the PDF Editor, especially how to add form fields with submission data, will be a good knowledge to acquire. And that’s the main topic of this tutorial.
How to Add Form Fields with Submission Data to Your PDF Document
Adding form fields with submission data is as easy as dragging and dropping them into the document. First, let’s talk about the submission details:
- Submission Date
- Submission ID
- Submission IP
Found under the Basic Elements » Form Elements section of the PDF Editor, these three are always available for all forms. You can add them to your PDF Document either by dragging them into place or by clicking them.
Next, let’s have a look at the actual form fields.
The fields shown in the screenshot above may look different from the list you see from your end. That’s because the list of fields depends on the form fields you have in your own web form. It’s worth mentioning that this list also includes hidden fields.
Now, let’s try creating a simple PDF document with submission data. It should be as simple as demonstrated below – select the fields you want to be added, then click or drag them into the document.
If your form doesn’t have any submission data yet, the PDF Editor will generate some dummy data for you.
How to Customize the Form Fields in a PDF Document
Now that you know how to add your form’s submission data to your PDF Document, it’s time to have a closer look at your customization options.
Question Alignment and Style
If you wish to change the style of all the questions and answers, open the Layout Settings panel, go to the Customize tab, then fiddle around with the options under the Question Alignment and Question Style sections.
Want to give everything a uniform look and feel? Tick the Apply Changes to Answers checkbox so your questions and answers look the same.
Otherwise, if you want to design your answers separately, just make sure you untick the Apply Changes to Answers checkbox and a new customization section for the answers will show up just underneath it.
And if you want to customize each Q&A pair separately, you can. Each form field that you add will have its local scope of options that will ignore your global styling options. This means you can change the style of individual fields when needed.
And that’s pretty much all you need to know to add form fields with submission data to your PDF Document. There are plenty of other formattings, layouts, and style options, but we’ll cover those in a separate article.