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>

email 內文格式

需求分析

環境設定

操作步驟

You might also like...