Drupal 9 Webform 發送自定義Email 功能的本地開發環境配置
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
操作步驟
1.安裝啟用drupal webform, smtp, mailsystem 模組
2.打開 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有的版本無需帳戶名密碼 |
3.打開 Configure the Mail System 配置頁面（/admin/config/system/mailsystem），設置如下：
| label | value |
|---|---|
| Formatter | Webform PHP mailer |
| Sender | SMTP Mailer |
4. 在 Webform 的具體表單中設置 Emails/Handlers ，本例為 contact 表單 （/admin/structure/webform/manage/contact/handlers），編輯修改 Email notification 項目。
在SENT TO中可以設置發送郵件至任意email地址，也可以選擇站點郵件地址。
在SEND FROM(WEBSIE/DOMAIN)中可以設置自定義Email的From信息。
在MESSAGE中設置郵件內容。
5.自定義email內容
Subject 填寫郵件標題。
Body 選擇 Twig Temlate... 後就可以使用twig語法自由地編輯email內文了。
在 HELP USING TWIG 中列出了與當前表單有關的可以使用的variables。一些twig的語法如trim, number, raw等都可以直接在文本中使用。
本例中email內容範本如下：
<style>
table {
width: 100%;
background-color: #FFFFFF;
border-collapse: collapse;
border-width: 1px;
border-color: #A5A5A5;
border-style: solid;
color: #5A5A5A;
}
table td, table th {
border-width: 1px;
border-color: #A5A5A5;
border-style: solid;
padding: 5px;
}
</style>
<table>
<tbody>
<tr>
<td>Datetime of submission*</td>
<td>{{ webform_token('[webform_submission:created]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Enquiry*</td>
<td>{{ webform_token('[webform_submission:values:enquiry]', webform_submission, [], options) }}</td>
</tr>
<td>First name*</td>
<td>{{ webform_token('[webform_submission:values:first_name:raw]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Last name*</td>
<td>{{ webform_token('[webform_submission:values:last_name:raw]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Country Code + Phone number*</td>
<td>{{ webform_token('[webform_submission:values:phone_number]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Email address*</td>
<td>{{ webform_token('[webform_submission:values:email:raw]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Company name*</td>
<td>{{ webform_token('[webform_submission:values:company_name:raw]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Job title</td>
<td>{{ webform_token('[webform_submission:values:job_title:raw]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Enquiry details</td>
<td>{{ webform_token('[webform_submission:values:message:raw]', webform_submission, [], options) }}</td>
</tr>
<tr>
<td>Page related</td>
<td>{{url('<front>')|render|trim('/', 'right')}}{{ uri }}</td>
</tr>
</tbody>
</table>
