Wordpress Fluent Forms建立自定義PDF模板(Customizable PDF template for Wordpress Fluent Forms)
有鑑於最近工作需要，須使用Ｗordpress的Fluent Forms套件建立一個客製化的PDF模板，讓使用者在填寫完表單內容後，可以自動產出PDF文件，並傳送至指定信箱。
Due to recent work requirements, I need to create a customized PDF template using the Fluent Forms plugin for WordPress. After users complete the form, it should automatically generate a PDF document and send it to a designated email address.
使用套件 Plugins Used
參考文件 Reference
WP Code
自訂的pdf template是放在wp-content/uploads/FLUENT_PDF_TEMPLATES資料夾下
The custom PDF templates should be placed in the wp-content/uploads/FLUENT_PDF_TEMPLATES directory
//fluent forms online application template
add_filter('fluentform/pdf_templates', function ($templates, $form) {
include_once(ABSPATH . 'wp-content/uploads/FLUENT_PDF_TEMPLATES/custompdf.php');
$templates['custom1'] = [
'name' => 'custom1',
'class' => 'custompdf',
'key' => 'custom1',
//'preview'=> get_template_directory_uri() . 'assets/images/tabular.png'
];
return $templates;
}, 10, 2);
or try this code
add_filter('fluentform/pdf_templates', function ($templates, $form) {
include_once(ABSPATH . 'wp-content/uploads/FLUENT_PDF_TEMPLATES/custompdf.php');
$templates['custom1'] = array(
'name' => 'custom1',
'class' => 'custompdf',
'key' => 'custom1'
);
return $templates;
}, 10, 2);
custompdf.php程式碼
這邊要注意，class要使用跟上方定義的class相同(標紅底處)
It's important to note that the classes used in the template must match exactly with those defined in WP Code (the parts highlighted in red)
<?php
use FluentForm\App\Services\Emogrifier\Emogrifier;
use FluentForm\App\Services\FormBuilder\ShortCodeParser;
use FluentForm\Framework\Foundation\Application;
use FluentFormPdf\Classes\Templates\TemplateManager;
use FluentForm\Framework\Helpers\ArrayHelper as Arr;
use FluentFormPdf\Classes\Controller\AvailableOptions as PdfOptions;
class custompdf extends \FluentFormPdf\Classes\Templates\TemplateManager
{
public function __construct(Application $app)
{
parent::__construct($app);
}
public function getDefaultSettings()
{
return [
'header' => '<h2>Hello From My Demo Template</h2>',
'footer' => '<p>Footer</p>',
'body' => 'Hello There',
'demo' => ''
];
}
public function getSettingsFields()
{
return array(
[
'key' => 'header',
'label' => 'Header Content',
'tips' => 'Write your header content which will be shown every page of the PDF',
'component' => 'text'
],
[
'key' => 'body',
'label' => 'PDF Body Content',
'tips' => 'Write your Body content for actual PDF body',
'component' => 'wp-editor'
],
[
'key' => 'footer',
'label' => 'Footer Content',
'tips' => 'Write your Footer content which will be shown every page of the PDF',
'component' => 'wp-editor'
],
[
'key' => 'demo',
'label' => 'Demp Input',
'tips' => 'Input Help Text',
'component' => 'text'
],
);
}
public function generatePdf($submissionId, $feed, $outPut = 'I', $fileName = '')
{
$settings = $feed['settings'];
$submission = wpFluent()->table('fluentform_submissions')
->where('id', $submissionId)
->first();
$response = json_decode($submission->response, true);
$settings = ShortCodeParser::parse($settings, $submissionId, $response, null, false, 'pdfFeed');
// Html Body
$htmlBody = '
<style>
h1 {
text-align: center;
/*color: #F4D8C6;*/
font-size: 24px;
/*padding-top: 100px;*/
}
table {
width: 100%;
border-collapse: collapse;
/*border: 1px solid #000;*/
}
th {
border: 1px solid #000;
padding: 8px;
font-weight: bold;
}
td {
border: 1px solid #000;
text-align: left;
padding: 8px;
}
</style>
';
$htmlBody .= '
<h1>Custom PDF</h1>
<table>
<tr>
<th width="20%">ID</th>
<td>A-'.$submission->serial_number.'</td>
</tr>
<tr>
<th>Serial Number</th>
<td>'.$submission->created_at.'</td>
</tr>
<tr>
<th>Name</th>
<td>'.$response['name'].'</td>
</tr>
</table>
';
$footer = 'Custom PDF－「'.$response['_name'].'」 ({PAGENO}/{nbpg})';
if (!$fileName) {
$fileName = ShortCodeParser::parse($feed['name'], $submissionId, $formData);
$fileName = sanitize_title($fileName, 'moeacl-apply-form', 'display');
}
return $this->pdfBuilder($fileName, $feed, $htmlBody, $footer, $outPut);
}
}
因原本官方文件提供的範例程式碼經測試都無法成功，在參考網路上其他專家們的分享，並透過官方客服人員的引導與協助，終於完成客製化PDF的模板，並成功在完成表單填寫後，可以作為附件傳送至指定電子郵件。以上程式碼提供給有需要的夥伴參考。
After testing the sample code provided in the official documentation which didn't work successfully, I consulted various expert discussions online and received guidance from official customer support. Finally, I managed to complete the customized PDF template that can successfully attach to and send to designated email addresses after form submission. I'm sharing this code for reference for anyone who might need it.
by Wei-Hsiang Hung 2024/11/06