tl;dr: Set the form as the starting form, then check the "Show submitted form" option under the On Event Completion tab. Then you can inspect the readonly version of the form you see on the thank you page.

--

When you submit a form, Laserfiche Forms re-renders it behind the scenes using the data you submitted, but makes some changes to the HTML. If you are JavaScript savvy, you can read exactly what it is doing by opening the printForm.js file in Laserfiche Forms\Forms\js\form directory and copy-pasting its contents to pretty-printer (like this one). Specifically, the ConvertFieldsReadOnly function is the one doing this work (it is triggered from _PrintFormLayout.cshtml located at Forms\Views\Form).

An easier way is to examine the output directly by setting the form as the starting form of the process, and then using the "display submitted form" option in the Message Start event. Then when you submit the form, you see your submitted (and saved) form on the thank you page. You can then inspect the DOM and determine what styles you need to apply in your CSS. You'll note many changes, such as `input` fields rendered as `divs`, and so on.

Here's the thing though: the "readonly" submitted version of the form is fed to a third-party tool called wkhtmltopdf, which takes the html and converts it to PDF. This is the best html-to-pdf converter out there, but it's still not perfect. It uses an older rendering engine that doesn't support some of the more modern HTML5 features (like flexbox), which results in sometimes slight, sometimes not so slight discrepancies between what you see on the thank you page and what is actually stored. So don't expect a perfect conversion, especially if you have some "adventurous" CSS rules.