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>