メールを飛ばしてみる

HTMLファイル中に記述されたフォームを espar form で動作させてみましょう。PHP化もCMS化もしないのに、メールが飛ぶようになることに驚かれるに違いありません。全体のザックリとした流れは以下の通りです。

HTMLを用意する
JavaScript 埋め込みコードを取得して貼り付ける
フォームのhtmlコードにクラス名や要素を追加する
espar form の管理画面でメールテンプレートを設定する

1つ1つはとても簡単な作業ですので安心して下さい。まずはメールが届くところまで体験し、その後、入力条件のチェックやエラー表示の制御を作り込んでいきます。

1. HTMLを用意する

espar form を組み込む対象となるHTMLファイルを用意して下さい。

2. 埋め込みコードを貼り付ける

espar form の管理画面から埋め込みコードを取得します。

espar form のトライアル申込みの際に弊社よりアカウント情報をお送りしていますので、管理画面にログインし、[フォーム] メニューをクリックして下さい。

basic_4-0-0

リストボックスから対象のフォームを選択します。契約直後は1つなので選択は不要です。espar form では無制限にフォームの追加が可能なため、espar form を既に導入しているサイトで新たにフォームを追加する場合、一覧から対象フォームを選択する必要があります。

[基本情報] タブを開くと、対象のフォームの「埋め込みコード」が表示されます。

basic_4-0-0

表示された「埋め込みコード」をコピーして、用意したhtmlの <form> タグ直前に貼り付けて下さい。例えば以下のようになります。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://bridge.espar.biz/v1.10.0/form.js"></script>
<script>
    var espar_form = { espf : { api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", debug:true } };
</script>

<form>
...(省略)...
</form>

上記の埋め込みコード中にある、

    var espar_form = { espf : { api_key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", debug:true } };

の部分の espf を「フォームID」といいます。フォームIDはespfで始まる文字列で、espar form はこのフォームIDを手がかかりにしてフォームを特定し動作させます。フォームIDは、後述の手順でも頻繁に登場します。

埋め込みコード3行目にある、

<script src="https://bridge.espar.biz/v1.10.0/form.js"></script>

が espar form の本体です。URL中にある v1.10.0 は espar form のバージョンを表しています。espar form は継続的に開発されていますので、弊社からのお知らせを受け取ったら、できる限りアップデートすることが推奨されます。アップデート作業は v1.10.0 のバージョン表記の数字を変更するだけの簡単な作業です。

espar form では、埋め込みコードの1,2行目から分かる通り jQuery と jQuery Validation Plugin を使用しています。

CMSやそのプラグイン等が jQuery や jQuery Validation Plugin を既に埋め込んでいる場合、espar form の埋め込みコードをそのまま貼り付けると二重読み込みとなってしまいます。意図した通りに動作しなくなる可能性があるため、jQuery や jQuery Validation Plugin を使用しているサイトでは、埋め込みコードの1,2行目を削除して下さい。

ただし、espar form には動作条件ページの通り動作最低条件があります。サイトが使用している jQuery や jQuery Validation Plugin が espar form の最低動作条件を満たさない場合、espar form の最低動作条件を満たすよう使用するバージョンを変更して下さい。

なお、将来の espar form では、jQuery を使用しない実装(Vanilla JavaScript 実装)に変更されることが予定されています。

3. クラスや要素を追加する

次に、espar form にフォームを認識して貰うため、HTML中に「手がかり」を記します。「手がかり」とは先程のフォームIDです。

3-1. <form>タグのclass属性にフォームIDを指定

まず、<form>タグのクラス属性にフォームIDをそのまま指定して下さい。

<form class="[フォームID]">
(省略)
</form>

具体例を以下に示します。例えば、フォームID欄が以下のようになっている場合、

basic_5-1-0

<form> タグの指定は、

<form class="espf">
(省略)
</form>

となります。既に <form> タグに他のクラス指定がある場合は、以下のようにクラス指定を追加表記して下さい。(formStyleは例です)

<form class="formStyle espf">
(省略)
</form>

このようにして「手がかり」が記された <form> を見つけ出して espar form は動作します。

フォームIDはフォーム毎に異なるため、必ず管理画面のフォームIDと一致しているか確認して下さい。フォームIDが正しく指定されていないと espar form は正常に動作しません。

3-2. ボタン一式を用意し特別なCSSクラスを指定する

次にフォームのボタンを実装しましょう。ボタンにも同様に「手がかり」を記します。

実装しようとするフォームに確認画面が必要かどうかで若干異なります。まず、確認画面が必要な場合から説明します。確認画面が不要な場合は、確認画面が不要な場合までジャンプして下さい。

確認画面が必要な場合

フォームの画面遷移(入力→確認→完了)の各画面で使用するボタンを全て <form> タグの中に記述します。ボタンが3つ並んで表示されてしまいそうに思いますが心配は無用です。espar form が必要な時に必要なボタンの表示/非表示を切り替えます。

(省略)
  <input type="button" value="戻る" class="[フォームID]-b-back">
  <input type="button" value="確認" class="[フォームID]-b-confirm">
  <input type="button" value="送信" class="[フォームID]-b-submit">
</form>

espar form がボタンを認識できるように、CSSクラスを「手がかり」として記述します。CSSクラスは、ボタン種別毎に以下のように決まっています。

クラス名	解説	表示される画面
`[フォームID]-b-back`	確認画面から入力画面に戻るためのボタンです	確認画面
`[フォームID]-b-confirm`	確認画面に遷移する為のボタンです	入力画面
`[フォームID]-b-submit`	確認画面から完了画面に遷移する為のボタンです	確認画面

ボタンの <input> 要素を記述する箇所は、<form> タグ内であればどこでも構いません。また、既にクラス指定されている場合は、以下のように追加して下さい。(fromButtonクラスは例です)

(省略)
  <input type="button" value="戻る" class="formButton [フォームID]-b-back">
  <input type="button" value="確認" class="formButton [フォームID]-b-confirm">
  <input type="button" value="送信" class="formButton [フォームID]-b-submit">
</form>

フォームIDを埋め込んだ具体例を以下に示します。フォームIDが espf の場合、

(省略)
  <input type="button" value="戻る" class="formButton espf-b-back">
  <input type="button" value="確認" class="formButton espf-b-confirm">
  <input type="button" value="送信" class="formButton espf-b-submit">
</form>

のようになります。<button> 要素を使ったボタンも使用できます。espar fomr が認識するための「手がかり」をクラス名で付与する原則は変わらず、以下のようになります。

(省略)
  <button value="戻る" class="formButton espf-b-back">戻る</button>
  <button value="確認" class="formButton espf-b-confirm">確認</button>
  <button value="送信" class="formButton espf-b-submit">送信</button>
</form>

確認画面が不要な場合

フォームに確認画面が不要な場合、以下のように記述して下さい。

(省略)
  <input type="button" value="送信" class="[フォームID]-b-submit">
</form>

フォームIDが espf の場合は、以下のようになります。

(省略)
  <input type="button" value="送信" class="espf-b-submit">
</form>

3-3. 完了画面用のメッセージを指定する

次に完了画面のメッセージを実装しましょう。メッセージにも「手がかり」を記します。

espar form では、確認画面と完了画面を自動で生成します。完了画面に表示するメッセージをあらかじめ HTML 中に記述しておけば、espar form が表示すべき時(つまり送信完了した時)に自動的に表示してくれます。もちろん、最初は表示されない状態になります。

完了画面用のメッセージは以下のように記述します。

<div class="[フォームID]-m-success">お問い合わせありがとうございました</div>
<div class="[フォームID]-m-failure">送信に失敗しました。誠に申し訳ございませんが info [at] example.com にメールにて御連絡下さい</div>

必ず <form> タグの外に 追加して下さい。(<form> タグの前後どちらでも構いません)

例えば、管理画面上でフォームIDが espf の場合は、

<div class="espf-m-success">お問い合わせありがとうございました</div>
<div class="espf-m-failure">送信に失敗しました。誠に申し訳ございませんが info [at] example.com にメールにて御連絡下さい</div>

<!-- 3.1 でクラス指定を追加したform -->
<form class="formStyle espf">
(省略)
</form>

のようになります。なお完了画面に表示するメッセージは、成功時と失敗時の2種類あり、それぞれ特別なCSSクラスを指定したHTML要素で記述しておきます。

クラス名	説明
`[フォームID]-m-success`	メール送信が成功した時に自動的に表示
`[フォームID]-m-failure`	メール送信が失敗した時に自動的に表示

両クラスを指定するタグは、上記例のような <div> タグに限定されません。<table>, <span>, <p> など自由なタグが使用できます。ページ中にエラーメッセージを表現するのに相応しいHTML要素を記述し、上記のルールでクラス名を指定して下さい。

3-4. 最低限のエラークラスを設定する

espar form が一時的に動作しなくなってしまうなど万が一の時に備え、基本的なエラーメッセージもあらかじめ記述しておきます。以下のように記述して下さい。もちろんこれらのメッセージも espar form が表示/非表示を制御します。

<p class="[フォームID]-m-token-expire">フォームの有効期限が切れました。一度最初からお試し下さい。</p>
<p class="[フォームID]-m-mail-error [フォームID]-m-token-error">未定義のエラーが発生しました。申し訳ございませんが info [at] example.com に直接メールをお送り頂くか、0120-12-3456 までお電話下さい。</p>

このメッセージは必ず <form>タグの外に 追加して下さい。(<form> タグの前後どちらでも構いません)

具体的には、例えばフォームIDが espf の場合、

<p class="espf-m-token-expire">フォームの有効期限が切れました。一度最初からお試し下さい。</p>
<p class="espf-m-mail-error espf-m-token-error">未定義のエラーが発生しました。申し訳ございませんが info [at] example.com に直接メールをお送り頂くか、0120-12-3456 までお電話下さい。</p>

<!-- 3.3 で追加した完了画面用の要素 -->
<div class="espf-m-success">お問い合わせありがとうございました</div>
<div class="espf-m-failure">送信に失敗しました。誠に申し訳ございませんが info [at] example.com にメールにて御連絡下さい</div>

<!-- 3.1 でクラス指定を追加したform -->
<form class="formStyle espf">
(省略)
  <!-- 3.2 でクラス指定を追加したボタン群 -->
  <button value="戻る" class="formButton espf-b-back">戻る</button>
  <button value="確認" class="formButton espf-b-confirm">確認</button>
  <button value="送信" class="formButton espf-b-submit">送信</button>
</form>

のようになります。タグ内の文章にある連絡先情報は、必要に応じて変更/削除して下さい。これで、万が一の時のためにお客様に別の連絡手段をご案内することができます。(詳しくは内部エラー表示クラスをご覧下さい)

以上でhtmlの基本的な作業は完了です。これで、htmlファイルからメールが送れるようになりました。最後にメールの送り方やメールの内容を設定しましょう。

4. メールテンプレートを指定する

最後に、メール内容の設定を espar form の管理画面で設定します。espar form では、送信先・タイトル・本文などの設定をひとまとめに メールテンプレート と呼びます。以下の通り、1つのフォームに対して2つのメールテンプレートが存在します。

メールテンプレート	解説	必須かどうか
通知メール	サイト運営側に届くメールの設定です	必須
返信メール	お客様に受付をお知らせするメールの設定です	必須ではない

それぞれ設定してみましょう。まずは必須の通知メールからです。

4-1. 通知メールの差出人・宛先・件名を指定する

通知メールタブを開き、それぞれ入力します。

basic_6-1-1

件名にはメールのタイトルを、差出人と宛先にはメールアドレスを指定して下さい。メールアドレスには2つの記述方式があります。

(1) メールアドレスのみを書く
(2) "[任意の文字列]"<[メールアドレス]> のように表示名を併記する

いずれの形式でも構いません。複数のメールアドレスを指定する場合は、以下のように , (カンマ)で区切って指定して下さい。記述形式を混在させることもできます。

info+espar@feedtailor.jp, "テスト用"<example@feedtailor.jp>

メールアドレスに表示名を指定する場合、必ずダブルクォーテーションで囲って下さい。

非推奨

info+espar@feedtailor.jp, テスト用<example@feedtailor.jp>

推奨

info+espar@feedtailor.jp, "テスト用"<example@feedtailor.jp>

これは、メールに関するインターネット標準RFC5322で定められたルールに基づいています。表示名をダブルクォーテーションで囲わず、かつカンマ等の禁止文字が含まれるとRFC5322に違反してしまい、メール送信に失敗することがあります。

4-2. 通知メールのメール本文を指定する

次に通知メールの本文です。デフォルトで以下のようなサンプル文章が設定されています。これを参考に変更していきます。

baisc_6-2-1

メールテンプレートでは、フォームで入力された値に置き換わる変数を使用することができます。上記例では、{{ .company }} や {{ .name }} などが変数です。フォームで入力された値に自動的に置換されます。

例えば、上記の {{ .mail }} は、以下のような <input> 要素で入力された値に置き換わります。

<input type="text" name="mail" />

つまり <input> 要素の name 属性に指定した文字列がそのまま変数となります。

メールテンプレートでの変数表記ルールは、{{ .[input要素のname属性文字列] }} です。name属性に指定した文字列の前に . (ドット) を付け、前後にスペースを加えて更に二重の波括弧でかこって下さい。(espf で始まる変数は特殊な組み込み変数です。詳しくはこちらをご覧下さい)

espar form を導入したフォームでは入力要素のname属性に使える文字が制限されます。使用できる文字は、半角英数字・アンダースコア・全角文字となります。ハイフンは使用できません。例えば、以下のようなname属性が指定されると正しく動作しませんのでご注意ください。

<!-- [] をつけてしまった例 -->
<input type="checkbox" name="flag[]">

<!-- ハイフンを入れてしまった例 -->
<input type="text" name="post-code">

4-3. 返信メールの設定を行う

次に、返信メールの設定を行いましょう。返信メールは必須ではありません。使う/使わないを設定することができます。

baisc_6-3-1

返信メールが不要な場合は「返信メールを送信する」のチェックをOFFにして下さい。使用する場合は、チェックを入れて通知メールと同じ要領で設定していきます。設定後は保存をして下さい。なお、メールアドレスの記述の仕方は通知メールのメール本文を指定すると同様です。

一般的に返信メールは、フォームに入力されたお客様のメールアドレス宛に送るものですので、返信メールの宛先欄にはデフォルトで {{ .mail }} という変数が指定されています。メールアドレスを入力して貰う <input> 要素の name 属性が mail ではない場合は、返信メールの宛先の変数表記を変更して下さい。

具体的には、フォームでメールアドレスを入力して貰う <input> 要素を

<input type="text" name="emailaddress">

としている場合、返信メールの宛先欄は {{ .emailaddress }} とする必要があります。

メールを実際に送ってみる

設定作業は以上で終了です。お疲れ様でした。

それでは以下の手順で実際にメール送信してみましょう。

html を Web サーバにアップロードする
テスト用にレンタルサーバ等が使用できない(しにくい)場合は、MacやPCのローカル環境上にWebサーバを立てて確認することができます。詳しくは、ローカルWebサーバでの動作確認をご覧下さい。
当該のhtmlに対応するURLをブラウザに入力してページを開く
アドレスバーのホスト名（ドメイン名）部分が、管理画面の [詳細設定]→[許可する送信元ホスト] に含まれているか確認する（管理画面の以下の赤枠）
フォームに値を入力してボタンを押す

設定した通りにメールが届けば成功です。メールが届かない場合、上記3のホスト名（ドメイン名）の文字列が html を設置したホスト名に含まれているか確認して下さい。

また、フォームが反応しない場合はデバッグ機能を使ってクラス指定が正しく行われているかチェックして下さい。それでも、メールが送信されない、画面にエラー文言等が表示されるといった場合は、弊社担当にお問い合わせ下さい。その際、デバッグのログ画面のキャプチャや、フォームの画面キャプチャを併せてお送り頂くと解決が早くなりますので、ご協力をお願い致します。

espar vault をご利用の場合、CMS用のドメイン・公開用のドメイン・トライアル環境用のドメインなど、多数のドメインが登場します。espar form でのメール送信確認をする際は、「ブラウザで表示しているドメイン」と「管理画面の『許可する送信元ホスト』に記載されたドメイン」が一致しているかどうかご確認下さい。

CMS用のドメインにアクセスしてしまっていてメールが送信できない…とご報告を頂くケースがまれにございます。espar vault をご利用の場合は、必ず静的化した結果である espar vault 公開側のページ上から送信テストをお願い致します。(ただし、CMS側でも動作確認できるよう当社で特別に設定させて頂いている場合この限りではありません)

(＊) esparの名称変更について
2025年3月より、CMS静的化サービス espar の名称が espar vault (エスパーボルト) に変更となりました。詳しくはこちらをご覧下さい。

以上で espar form を使ってメールを飛ばすことができました。次に、入力条件チェックやエラー表示の機構を導入します。入力条件チェックを導入するページに進んで下さい。