Drupal 9 Webform 發送自定義Email 功能的本地開發環境配置

Set up a local development environment for a Drupal 9 webform that sends email notifications using Mailhog

Drupal 9 Webform 表單提交後可以自定義 email 內容發送通知郵件到指定email地址,本地開發中使用 Mailhog 做測試。

💡
關於Mailhog的安裝介紹參看Y Cheung之前的文章《本地開發測試郵件服務 Mailhog

需求分析

根據需求,確定要做的任務有2個:

  1. 用戶提交表單後發送通知 email 至指定地址
  2. 獲取用戶填寫的表單內容製作指定內容格式的郵件

環境設定

操作步驟

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有的版本無需帳戶名密碼
⬆ SMTP Authentication Support 配置頁面示例截圖

3.打開 Configure the Mail System 配置頁面(/admin/config/system/mailsystem),設置如下:

label value
Formatter Webform PHP mailer
Sender SMTP Mailer
⬆ Configure the Mail System 配置頁面示例截圖

4. 在 Webform 的具體表單中設置 Emails/Handlers ,本例為 contact 表單 (/admin/structure/webform/manage/contact/handlers),編輯修改 Email notification 項目。

SENT TO中可以設置發送郵件至任意email地址,也可以選擇站點郵件地址。

⬆ SENT TO > 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>
email 內文格式
Y Cheung
Blogger, Programer & Traveler.
Shanghai