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 DOCUMENT, the PDF EDITOR will populate it with the same QUESTION / ANSWER pairs found in your web form.
Suppose we have a form with 3 fields – Name, Email, and Comments (as shown below). When you create a new PDF Document, all these question/answer 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 question/answer 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.
Adding form fields with submission data is as easy as dragging and dropping it 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 will never be the same as 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/drag them into the document.
NOTE: If your form doesn’t have any submission data yet, the PDF Editor will generate some dummy data for you.
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.
If you wish to change the style of ALL the QUESTIONS and ANSWERS, click the blue LAYOUT SETTINGS button > go to the CUSTOMIZE tab > then fiddle around with the options under the QUESTION ALIGNMENT and QUESTION STYLE sections.
TIP: 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 question/answer 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 another formatting, layout and style options, but we’ll cover that on a separate article.