Formidable Forms Community Site

The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk
Subscribe

PDFpro Form Building

Labels

This Discussion is public

Notifications

Welcome back to another installment of PDFpro Extended tips. In this segment we'll discuss the fastest and presumably most accurate way to build custom templates.
There's a few approaches I've tackled for doing this.

1. You're very handy with HTML and you're coding from scratch. Congrat's on the achievement. This is by far the most direct and sure fire approach if you can envision your layouts and CSS like Neo from the Matrix while you sleep. (I'm not that guy)

2. Another efficient way to get pretty close is to use Microsoft Office. Create your page layout, save it as a a .docx, export it to Acrobat Pro, adjust as necissary, then export that to HTML. However you'll notice that Acrobat exports HTML as a single line. Which can be very tedious to format enough that you can place your form fields where you need them.

3. Then there's my approach. I use a HTML WebBuilder to create the layout I want, grab the HTML, then adjust my template around it. Here's the steps. In my example I'm using WYSIWYG WebBuilder v9.

Open up your WYSIWYG Builder, create a new page. Right click the empty white space and go to "Page Properties".
First thing you'll want to do is change the output format to XHTML 1.0 Transitional (this is the native format for mpdf).
Second is to adjust the page size to your desired output size. If you want to allow PDFpro to be able to easily manipulate the page size based on your config settings then I'd say stick with a 8.5x11 layout.
(But this is in pixels.....what do I do with that?)
Fret not, here's a handy chart to help you out:

Document Size                     Screen Size
3x5 inches                             900 x 1500 pixels
4x6 inches                             1200 x 1800 pixels
5x7 inches                              1500 x 2100 pixels
8x8 inches                             2400 x 2400 pixels
8x10 inches                            2400 x 3000 pixels
8.5x11 inches                         2550 x 3300 pixels
9x16 inches                             2700 x 4800 pixels
11x14 inches                            3300 x 4200 pixels
11x16 inches                            3300 x 4800 pixels

ISO Standard                            Screen Size
A0                                               9933 x 14043 pixels
A1                                                7016 x 9933 pixels
A2                                               4961 x 7016 pixels
A3                                                3508 x 4961 pixels
A4                                               2480 x 3508 pixels
A5                                                1748 x 2480 pixels
A6                                                1240 x 1748 pixels
A7                                                 874 x 1240 pixels

Now save those settings and build your page with the simple drag-and-drop tools on the left. Don't forget to leave placeholders for your form fields like so:

Date of Event: eventdate
Time of Event: eventtime
Speaker: speakername

When your done building right click on an empty part of the screen and select "Page HTML".
Now you can take any of the standard demo templates and replace their HTML with yours. Remeber to follow the format.
Top Section Opening PHP
Then your html from <!DOCTYPE> down to the first <body> tag.
Next Section - PHP Loop
(If you're using a custom header, footer, or watermark you'll want to place that code next)
Then your HTML down to just before the closing </body> Tag. But don't include that tag because it's already after the last PHP break.
Before you go tossing in form fields, if you plan on making any edits to form fields without having to recreate the page template, simply run through the form and comment each fields placement either above, inline or below whatever your preference is like so:

<!--placeholder here i.e. eventime-->

This way they won't appear on your output pdf but you'll have a quick easy reference to what fields went where.
Finally you can replace your placeholders with form fields into the template. Here's the different versions I've used:

Single form field format

Standard field (single line text, date, phone number, etc.) replace 1234 with your forms actual field ID #
<?php echo $_POST['item_meta'][1234]; ?>

Dynamic Field replace field_key with the key from your form and field id with the id #
<?php echo FrmProEntriesController::get_field_value_shortcode(array('field_id' => ['field_key'], 'entry_id' => $_POST['item_meta'][1234])); ?>

Embedded Form
Standard field         replace 9876 with the parent id and 1234 with the field id
<?php echo $_POST['item_meta'][9876][0][1234]; ?>

Embedded Dynamic (I was having an issue with fields populating even though no selection was made. Thanks to Jaime for this fix!) again replace 9876 with the parent form id and 1234 with the field id. Also replace field key with the field key from the form that's feeding the dynamic field.
<?php foreach ( $_POST['item_meta'][9876] as $row_num => $val ) {if ( $_POST['item_meta'][9876][$row_num][1234] ) { echo FrmProEntriesController::get_field_value_shortcode(array('field_id' => ['field_key'], 'entry_id' => $_POST['item_meta'][9876][0][1234])); }} ?>

Choose Save As and give your template a name like my-events.php and upload it to

/wp-content/themes/your-theme/FORMIDABLE_PDF_TEMPLATES/

Also dont forget to add it to your configuration.php which you'll find in the same location.

*Extra Tip* - Want your pdf output filename to contain an identifier from your form? Here's how:
'filename' => $_POST[item-meta][1234] . '-myform.pdf',
or
'filename' => 'myform_' . $_POST[item-meta][1234],

Multiple fields can be combines like so:
'filename' => $_POST[item-meta][1234] . '-' . $_POST[item-meta][5678] . '-myform.pdf',

Cheers and happy forming!

Thank you for the tips!

Discussion closed.