【5分Tips】「フォーム送信後にちゃんと届いてる？」SPIRALで“自動返信メール”を仕込む方法

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&utm_source=pup-qiita&utm_medium=contentlink&utm_campaign=/SPIRAL_internship/items/82deff49e4b0984762e7&utm_content=link-top&f000099824=https://qiita.com/SPIRAL_internship/items/82deff49e4b0984762e7

こんにちは！  
スパイラル株式会社でローコード開発にチャレンジ中の学生インターンです。

フォーム送信後、「お問い合わせありがとうございます」という自動メールを送りたい。
そんなとき、SPIRALなら簡単に実装できます！

今回は「SPIRALでフォームを作ったあと、どうやって**自動返信メール**を設定するの？」というテーマで、Tips紹介していきます。

自動返信メールは、フォームを送信したユーザーに対して  
「送信完了しました」「お問い合わせありがとうございました」などのメッセージを自動で届ける機能です。

企業サイトやサービスのフォームには欠かせないこの機能、**SPIRAL**なら、手順さえ知っていればとてもスムーズに設定できるんです。

### ✔ こんな方におすすめ
- 業務フォームの構築を任されたばかりの方
- 「フォーム送ったけど、届いてるのかな？」という不安をユーザーに感じさせたくない方
- SPIRALのトライアルアカウントを持っている or 検討中の方

---

## ■ なぜ自動返信メールが必要？

フォームの送信後、「ちゃんと届いたのかな…」と不安になるのは誰もが経験あるはず。  
そんな不安を解消し、ユーザーとの**信頼関係のスタートを築く**のが「自動返信メール」です。
- フォームの送信完了が“可視化”される
- ユーザーに送信内容の控えを残せる  
- 誤送信・重複送信の抑止にもつながる  


## ■ 実際の設定手順（5ステップで解説）

ここからは実際にSPIRALで**自動返信メールを設定する手順**を紹介していきます！
お問い合わせフォームで、ユーザーがお問い合わせ内容を登録した際に送信されるメールを設定します。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/242250db-661d-485d-a719-93543ee76785.png)

このフォームにユーザーが各項目を入力して、「送信」をクリック

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/ea2c1127-6842-49d1-a561-3124429c0ff6.png)

確認画面が表示されるので、もう一度「送信」をクリックすると

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/5cfb0a96-3221-4668-b694-7a96085cfce2.png)

お問い合わせ内容が登録されました。
今回の登録について、ユーザーに無事送信されたことをフィードバックするメールを返します！

ゴールとなるメールの文面は以下のものとします！
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/6ecce4bb-2e1f-4168-9a78-7db88a4fa7ed.png)

ユーザーの氏名と登録内容（今回の場合はメールアドレスとお問い合わせ内容）が表示されていますね。

---
▼実際に使っているシステムはここから体験できます！

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&utm_source=pup-qiita&utm_medium=contentlink&utm_campaign=/SPIRAL_internship/items/82deff49e4b0984762e7&utm_content=link-middle&f000099824=https://qiita.com/SPIRAL_internship/items/82deff49e4b0984762e7

---
### ① サンクスメールの編集画面にアクセス

SPIRAL で作成したアプリから、対象のフォーム画面を選択します。  
フォーム編集画面のメール設定から「サンクスメール」を選びましょう。
 
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/92ce3805-7088-43d9-b668-5e9082d6ec21.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/f350a253-a508-465e-8f36-48cd51175ef0.png)

この画面でサンクスメール（返信メール）を作成していきます！

---
### ② リストの作成

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/a7305fd4-cd5a-40ba-91d0-e5f6f6ae8ecc.png)

まずは「リスト」について、「編集」をクリックします。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/939a09e3-5906-4199-acd4-437c7b4d7227.png)

メール配信のための諸設定を行います。
「リスト名」、「受取人メールアドレスフィールド」、「受取人名フィールド」、「”様”編集」を設定して、

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/4c24e078-8973-43c6-8258-220e0946e1ee.png)

今回はこのように作成しました。

---
### ③ 封筒の作成（件名・本文を作成）

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/09e56198-0532-43a3-bf76-89eba601b937.png)

続いて「封筒」について、「編集」をクリックします。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/8c882a0c-e621-420a-a422-813649de8b97.png)

「テキストメール」を選択して、「選択」をクリックします。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/f2d0cdac-6916-4285-b0fb-08b077682fcb.png)

ここでは赤枠で示した件名と差出人の設定を行います。


メールの本文については、「文面」の箇所で自由に記述できます。  

#### 今回作成したメールの文面 
```
%% 様
 
このたびは、お問い合わせいただきありがとうございます。  
以下の内容で受け付けました。
【メールアドレス】%%
【内容】%%
内容を確認のうえ、担当者よりご連絡させていただきます。
```

※ `%%` には、「差し込み変数」を入れ込みます。
差し込み変数はフォーム上の入力内容を反映するための記法で、「差し替えキーワード」から簡単に入力することができます。
これを活用すれば、**ユーザーごとに内容が変更された返信メール**が送信できます！

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/0189eb27-f867-4652-a952-ae45456573fc.png)

「差し替えキーワード」をクリックして、

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/38b0ff78-2056-4720-858e-91e31bdbbee6.png)

DBで絞り込むと、「ユーザー定義」の欄にフォームで使用したフィールドが表示されます。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/22c0db35-8e0d-4ff5-ae7a-8c50996c9bc0.png)

氏名を差し込む場合、メールの文面の「様」の前にカーソルを合わせて、
「差し替えキーワード」画面の氏名（上の図では「%val:usr:f003453312% 」）をクリックします。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/f06618f8-c45c-4d74-b3b9-9a5c17b7559c.png)

差し替えキーワードが挿入されました！
これを同様に「メールアドレス」「内容」にも行うと、いよいよ完成です！

---
### ④ テスト送信で確認する

設定後は必ず、**自分のメールアドレスで実際にフォーム送信してテスト**しておきましょう！

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4041448/c50437a4-6f94-4a1b-afc6-edb0eb8d6e83.png)

「テスト配信」で確認することができます。
実際にフォームに登録してテストすると安心ですね。

- メールが届くか？  
- 差し替えキーワードが正しく反映されているか？  
- 表記ミスや誤字がないか？

本番運用前のチェックを忘れずに！

---

## ■ まとめ

SPIRALのフォーム作成では、誰でも簡単に自動返信メールを実装できます。

今回は基本的な設定で作成しましたが、慣れてきたら…

- 差し込み変数を増やして丁寧なメールに  
- フォームの種類によって本文を出し分ける  
- 管理者用メールと合わせて二種送信する

など、どんどん応用することができます！
まずはひとつ、自分のフォームに設定してみましょう！

---

私がインターンをしているスパイラル株式会社では、ローコードプラットフォームSPIRAL ver.1の**トライアルアカウント**を**無償提供**しています。 
このアカウントの記事でも紹介するように、たくさんの機能がございます！ 
  
▶︎ フォーム 
▶︎ 認証エリア 
▶︎ ログイン 
▶︎ メール送信 
▶︎ カスタムプログラム 
  
などの作成もできますので、ぜひお試しください！ 

https://www.pi-pe.co.jp/regist/is?SMPFORM=man-lanerf-2473a633d82734eb22aa64cad426ae23&utm_source=pup-qiita&utm_medium=contentlink&utm_campaign=/SPIRAL_internship/items/82deff49e4b0984762e7&utm_content=link-bottom&f000099824=https://qiita.com/SPIRAL_internship/items/82deff49e4b0984762e7

  
また、現在トライアル登録者向けに、オンボーディングコンテンツも作成中です。**SPIRAL ver.1**にご興味のある方はぜひこちらもご覧ください👇 
 
https://knowledge.spirers.jp/special/detail/11680