How to customize PDF generated by a Webform submission?

Hi, how can I do the following:

  1. remove title and submission number from pdf generated by a Webform submission

  2. change the font, size and layout of the data entered through the Webform submission, i.e. how it appears on the generated pdf (currently I can only see the way of switching between HTML and Table, in both cases the text takes half of the generated pdf page, I would like to make it smaller and push it to the left corner of the page)

  3. add images in the pdf (banner at the top of the pdf and the image of a digital signature at the bottom)

Hello Lina and welcome to the community forum!

I will start by explained briefly what happens when a submission is transformed as PDF.

Basically submissions in Drupal 8 webform are entities, as entities they offer methods to get rendered (controlled by webform configuration and/or theming) and styled (via theming) When generating a PDF version of a submissions Drupal is rendering the submission entity and then transforming the HTML result to PDF using some libraries.

So in order to to change the generation of the resulted PDF document one need to act on the previous elements.

Ideally those changes should be done via theming templating system, where entity print module already provides a way to change the rendering/styling of the printed entities, more details https://www.drupal.org/node/2706755

Some workarounds:

Cheers

found it!

So for 3, a quick workaround not involving Theme customization is to Add new elements to the Webform.

I recomend use “Advanced HTML/Text” elements following the next example configuration:
https://mattermost.web.cern.ch/files/swhhsz594fr8mjbswnur7jsmsc/public?h=5-egV-QgthOk_VoZEahTBA16TkObEhGcKOQZOCiBa9c

Then a little change in order them to appear on the PDF attached to each submissions, change the View mode to HTML on the Attachment PDF element of your webform

Once done that the final PDF should include also images like:

Still many things to concretize but I hope this helps you on your implementation.

Cheers.

Many thanks, Eduardo!
All three workarounds work well.
How do you choose the location of the images on the pdf (i.e. where they should be placed, for instance elephant at the bottom - mine by default go in the middle between the data form submission and the footer text)?

You can move them between the webform elements.
To be at the very bottom of the PDF, then you need to work with the header/footer options of the entity print PDF module.
Depending on each use case a combination of the webform elements + header/footer entity print can do the work.
Also it’s worth to mention again that all of this can be done more naturally by extending the template on the theming, but it also requires more advanced Drupal theming knowledge.

1 Like