Drupal 9 Webform 表單提交後可以自定義 email 內容發送通知郵件到指定email地址，本地開發中使用 Mailhog 做測試。
💡關於Mailhog的安裝介紹參看Y Cheung之前的文章《本地開發測試郵件服務 Mailhog》
需求分析 #
根據需求，確定要做的任務有2個：
- 用戶提交表單後發送通知 email 至指定地址
- 獲取用戶填寫的表單內容製作指定內容格式的郵件
環境設定 #
- Drupal v9.3.3
- Mailhog
- drupal/webform v6.1.2
- drupal/smtp v1.0.0
- drupal/mailsystem v4.3
操作步驟 #
安裝模組 #
安裝啟用drupal webform, smtp, mailsystem 模組
配置 SMTP #
打開 SMTP Authentication Support 配置頁面（/admin/config/system/smtp），填入以下配置信息：
| label | value | note |
|---|---|---|
| SMTP server | mailhog | 填入mailhog docker內部地址，若不使用docker可能的值為localhost |
| SMTP port | 1205 | 統一端口號 |
| Use encrypted protocol | No | |
| Enable TLS encryption automatically | Off | |
| Username | testuser | Mailhog有的版本無需帳戶名密碼 |
| Password | testpwd | Mailhog有的版本無需帳戶名密碼 |
配置 Mailsystem #
打開 Configure the Mail System 配置頁面（/admin/config/system/mailsystem），設置如下：
| label | value |
|---|---|
| Formatter | Webform PHP mailer |
| Sender | SMTP Mailer |
設置 Emails/Handlers #
在 Webform 的具體表單中設置 Emails/Handlers ，本例為 contact 表單（/admin/structure/webform/manage/contact/handlers），編輯修改 Email notification 項目。
在SEND FROM(WEBSIE/DOMAIN)中可以設置自定義Email的From信息。
在MESSAGE中設置郵件內容。
Subject 填寫郵件標題。
在SENT TO中可以設置發送郵件至任意email地址，也可以選擇站點郵件地址。
自定義 Email內容 #
如果在Message設置中的Body 選擇了 Twig Temlate… ，之後就可以使用twig語法自由地編輯email內文了。
在 HELP USING TWIG 中列出了與當前表單有關的可以使用的variables。一些twig的語法如trim, number, raw等都可以直接在文本中使用。
本例中email內容範本如下：
1<style>
2table {
3 width: 100%;
4 background-color: #FFFFFF;
5 border-collapse: collapse;
6 border-width: 1px;
7 border-color: #A5A5A5;
8 border-style: solid;
9 color: #5A5A5A;
10}
11
12table td, table th {
13 border-width: 1px;
14 border-color: #A5A5A5;
15 border-style: solid;
16 padding: 5px;
17}
18</style>
19<table>
20 <tbody>
21 <tr>
22 <td>Datetime of submission*</td>
23 <td>{{ webform_token('[webform_submission:created]', webform_submission, [], options) }}</td>
24 </tr>
25 <tr>
26 <td>Enquiry*</td>
27 <td>{{ webform_token('[webform_submission:values:enquiry]', webform_submission, [], options) }}</td>
28 </tr>
29 <td>First name*</td>
30 <td>{{ webform_token('[webform_submission:values:first_name:raw]', webform_submission, [], options) }}</td>
31 </tr>
32 <tr>
33 <td>Last name*</td>
34 <td>{{ webform_token('[webform_submission:values:last_name:raw]', webform_submission, [], options) }}</td>
35 </tr>
36 <tr>
37 <td>Country Code + Phone number*</td>
38 <td>{{ webform_token('[webform_submission:values:phone_number]', webform_submission, [], options) }}</td>
39 </tr>
40 <tr>
41 <td>Email address*</td>
42 <td>{{ webform_token('[webform_submission:values:email:raw]', webform_submission, [], options) }}</td>
43 </tr>
44 <tr>
45 <td>Company name*</td>
46 <td>{{ webform_token('[webform_submission:values:company_name:raw]', webform_submission, [], options) }}</td>
47 </tr>
48 <tr>
49 <td>Job title</td>
50 <td>{{ webform_token('[webform_submission:values:job_title:raw]', webform_submission, [], options) }}</td>
51 </tr>
52 <tr>
53 <td>Enquiry details</td>
54 <td>{{ webform_token('[webform_submission:values:message:raw]', webform_submission, [], options) }}</td>
55 </tr>
56 <tr>
57 <td>Page related</td>
58 <td>{{url('<front>')|render|trim('/', 'right')}}{{ uri }}</td>
59 </tr>
60 </tbody>
61</table>
