要件
下記の条件で動作検証されています
サーバー
Apache2.4.6
PHP7.3-8.0(5系、8.1は不可)
MySQL5.7系
laravel6.x
HTTPS 対応
Chrome last major version
Firefox last major version
Safari last major version
Edge last major version
セットアップ
- パッケージをダウンロードして解凍。
- サーバー上に EasyMail用のデータベースと、そのデータベースへの全アクセス権・編集権を持つ MySQL(あるいは MariaDB)のユーザーを作成。
- サーバー上の任意の場所にEasyMailファイルを設置。
- ドメインルート (http://example.com/ など) に EasyMail を置きたいときは、解凍した EasyMail ディレクトリの中身 (EasyMail ディレクトリ自体を除く全ファイル) をサーバーのルートディレクトリへアップロードします。
-
ウェブサイト上の EasyMail 用のサブディレクトリ (http://example.com/inquiry など) に設置したいときは、サーバー上で inquiry ディレクトリを作成し、解凍した EasyMail パッケージの中身をディレクトリにアップロードします。
※ 注意
・お使いのFTPクライアントにファイル名を小文字に変換する機能がある場合は、それが無効になっていることを確認してください。
・contactというディレクトリにした場合、SPAMメールが届きやすくなる事例が発生していますので、その他のディレクトリ名をおすすめします。
-
ブラウザで EasyMail を設置したURLにアクセスし、インストールスクリプトを実行。
- EasyMail をルートディレクトリに設置した場合: http://example.com
- inquiry というサブディレクトリに設置した場合: http://example.com/inquiry
管理画面URL
EasyMail をルートディレクトリに設置した場合: http://example.com/admin
inquiry というサブディレクトリに設置した場合: http://example.com/inquiry/admin
ファイル構成
inquiryフォルダにEasyMailを設置した場合には、下記のようなフォルダとファイルの構成になります。以降は、inquiryフォルダに設置したと仮定して説明をしていきます。
ドキュメントルートなどに設置した場合は、適宜読み替えてください。
inquiry/
├── docker/
├── em_laravel/
│ ├── app/
│ ├── bootstrap/
│ ├── config/
│ ├── database/
│ ├── resources/
│ ├── routes/
│ ├── storage/
│ └── vendor/
├── .htaccess
├── docker-compose.override.yaml
├── docker-compose.yml
├── index.php
├── Makefile
├── README.md
└── robots.txt
テーマ
EasyMailには、いくつかのデフォルトテーマがあります。デフォルトテーマをそのまま利用し、デザインを組み込むこともできますが、デフォルトのテーマをコピーしオリジナルのテーマを編集する手順を説明します。
- inquiry/em_laravel/views/theme/grayのフォルダをコピーし、themeフォルダにorignalと名前を付けてペーストします。
- 作ったorignalフォルダをサーバーのinquiry/em_laravel/views/theme/にアップロードします。
- 管理画面にログインし、「フォーム作成」をクリックします。
- 画面内の「テーマ」のなかに、作ったorignalというテーマが表示されていますので、選択してフォームを作成します。
上記の内容でサーバーにテーマを設置した場合は下記のようなフォルダ構成になっています。
inquiry/
└── em_laravel/
└── resources/
└── views/
└── theme/
├── orignal/
├── gray/
├── one_column/
├── two_column01/
└── two_column02/
デザイン組込とテーマ内ファイル
テーマ内のファイル構成は下記のようになっています。
それぞれの役割を説明します。
各ファイル内で使用している変数の詳細は「テーマファイル内の変数」を参考にしてください。
...
└── theme/
├── orignal/
│ ├── css/
│ ├── images/
│ ├── js/
│ ├── manual_example/
│ ├── denied_ip.blade.php
│ ├── footer.blade.php
│ ├── form.blade.php
│ ├── header.blade.php
│ ├── hidden.blade.php
│ ├── index.blade.php
│ ├── layout.blade.php
│ ├── reply_mail.blade.php
│ ├── reply_mail_for_admin.blade.php
│ ├── screenshot.png
│ └── thanks.blade.php
├── gray/
├── one_column/
└── ...
ファイル名 | 概要 |
---|---|
denied_ip.blade.php |
フォーム作成・編集時に「拒否IP・ホスト」を設定することができます。 「拒否IP・ホスト」に記載された、IP・ホストからアクセスがあったときには、フォームの表示を拒否しますが、 その際に表示される内容をHTML形式で記述しておきます。 |
footer.blade.php | フッター部分のデザインをHTML形式で記述します。 |
form.blade.php | フォームタグ内のHTMLを編集できます。 |
header.blade.php | ヘッダー部分のデザインをHTML形式で記述します。 |
hidden.blade.php | フォームが存在しない、もしくはフォームが一時的に非表示状態の時に、表示する内容をHTML形式で記述します。 |
index.blade.php | Laravelから呼び出される最初のテーマファイルです。 layout.blade.phpとform.blade.phpを読み込んでいます。 |
layout.blade.php |
HTMLソースコードのheadタグ内を変更するときには、このファイルを編集してください。 デフォルトでいくつかのCSS、JSなどが読み込まれていますが、必要に応じて変更することができます。 新たにCSS、JSを読み込む際には、 <link href="{{ $data->theme_path }}css/style.css"/> のように、{{ $data->theme_path }}をつけることで、テーマフォルダ内のフォルダを指定することができます。 |
reply_mail.blade.php | フォームから送信された際に、自動返信するメールの内容を記述します。 |
reply_mail_for_admin.blade.php | フォームから送信された際に、管理者に自動返信するメールの内容を記述します。 |
screenshot.png | 管理画面内に表示する、テーマの画像です。 |
thanks.blade.php | フォーム送信完了後のサンクスページの内容をHTML形式で記述します。 |
jquery.emform.jsの役割とオプション
デフォルトのテーマの中に js/jquery.emform.jsというファイルがあります。このファイルは、フォームの動作にかかわっています。
form.blade.phpの中で、呼び出されています。
$ (document).ready (function() { $ (".js_main_form").emform ({ form_item: @json($form_items), file_limit_error_msg: '{{__("validation.js_file_limit_error_msg")}}', file_extension_error_msg: '{{__("validation.js_file_extension_error_msg")}}', input_error_msg: '{{__("validation.js_input_error_msg")}}', top_error_msg_view_flag: false }); });起動時にオプションを付与することで、フォームの表示内容を変更することができます。
オプション一覧は下記を参考にしてください。
オプション | 概要 | デフォルト値 |
---|---|---|
top_error_msg_view_flag | trueとすることで、入力エラー時に、ページ上部にエラーメッセージを表示させることができます。 | true |
input_error_msg |
入力エラー時に、ページ上部のエラーメッセージを変更できます。 (例)input_error_msg: '入力内容をご確認ください', |
"Error. Please confirm your entry." |
file_limit_error_msg | 添付ファイルの容量制限を超えた時の、ページ上部のエラーメッセージを変更できます。 | "Check the file size." |
file_extension_error_msg | 添付ファイルの拡張子が違っていた時の、ページ上部のエラーメッセージを変更できます。 | "Check the file extension." |
conf_btn_class | 確認画面へのボタンのclass名を変更できます。 | ".js_conf_btn" |
send_btn_class | 送信ボタンのclass名を変更できます。 | ".js_send_btn" |
input_control_class | フォームが入力状態の時に表示され、確認画面の時に非表示になるclass名を変更できます。 | ".js_input_control" |
conf_control_class | フォームが確認画面の時に表示され、入力状態の時に非表示になるclass名を変更できます。 | ".js_conf_control" |
zip_class | 郵便番号から住所を自動表示させる為の、郵便番号入力のclass名を変更できます。 | ".js_zip" |
pref_class | 郵便番号から住所を自動表示させる為の、都道府県選択のclass名を変更できます。 | ".js_pref" |
address_class | 郵便番号から住所を自動表示させる為の、住所入力のclass名を変更できます。 | ".js_address" |
input_error_color | 入力エラー時の入力フォームの色を指定できます。 | "#fff0f5" |
input_init_color | 入力状態の時の入力フォームの色を指定できます。 | "#ffffff" |
scroll_to |
「確認画面へ」のボタンがクリックされた時と、確認画面で「戻る」がクリックされた時のスクロール位置を指定できます。 スクロールしたい位置にのjqueryのセレクターを指定してください。 (例)"#hoge" ".fuga" "h1" "h2"など |
"form" |
block |
入力エラー時に、ページ上部のエラーメッセージのCSSを指定できます。 (例) block: { width: "50%", top: "30px", left: "25%", color: "#fff", background_color: "darkgray", }, |
block: { width: "90%", height: "auto", top: "10px", left: "5%", padding: "12px", color: "#dc143c", background_color: "#f8d7da", border_color: "#dc143c", border_width: "1px", border_radius: "3px", font_weight: "nomal", opacity: 1.0 }, |
テーマファイル内の変数
EasyMailのテーマファイルはbladeファイルで構成されています。
各bladeフィアル内で利用している、変数を説明します。
変数名 | 説明 |
---|---|
$choices | 「項目登録・編集」で「フォームの種類」にラジオボタン、チェックボックスを選択したときに入力する「選択肢」が配列で入っています。 |
$choice->image |
$choicesの中身です。 「選択肢」入力の際に画像を選択すると、その画像ファイル名が入っています。 ループの中で利用してください。
|
$choice->label_text |
$choicesの中身です。 「選択肢」入力の際に入力したテキストが入っています。 ループの中で利用してください。
|
$data->thanks_message |
「フォーム作成」画面の「最終画面のお礼文」に入力した文字が入っています。 下記の例のように使用することでHTMLが利用できます。
|
$data->theme_name |
テーマを保存しているフォルダ名が入っています。 ここまでの説明の流れですと、inquiryが入っています。 |
$data->theme_path |
テーマまでのパスが入っています。 layout.blade.phpなどでCSSファイルなどをよみこむときに利用できます。 下記の例では自身のテーマフォルダ内のCSSフォルダのstyle.cssを読み込んでいます。
|
$form->conf_form_footer_message |
「フォーム作成」画面の「確認画面のフッター文」に入力した文字が入っています。 下記の例のように使用することでHTMLが利用できます。 例ではclass名に「js_conf_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
|
$form->conf_form_header_message |
「フォーム作成」画面の「確認画面のヘッダー文」に入力した文字が入っています。 下記の例のように使用することでHTMLが利用できます。 例ではclass名に「js_conf_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
|
$form->error_form_footer_message |
「フォーム作成」画面の「エラー画面のフッター文」に入力した文字が入っています。 下記の例のように使用することでHTMLが利用できます。 例ではclass名に「js_error_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
|
$form->error_form_header_message |
「フォーム作成」画面の「エラー画面のヘッダー文」に入力した文字が入っています。 下記の例のように使用することでHTMLが利用できます。 例ではclass名に「js_error_control」をつけて「確認画面」のみでこれらの文字が表示されるように指定しています。
|
$form->name | 「フォーム作成」画面の「フォーム名」に入力した文字が入っています。 |
$form->url | 「フォーム作成」画面の「フォルダ」に入力した文字が入っています。 |
$form_item->columns |
「項目登録・編集」で「フォームの種類」にラジオボタン、チェックボックスを選択したときに入力する「1行に表示する選択肢数」が入っています。 下記の例ではbootstrap.cssを利用し、選択肢の列が指定の列数で並ぶようにしています。 @foreach($choices as $choice) @if($choice->choice_type == "radio") <div class="col-12 col-md{{$form_item->columns ? "-".(12/$form_item->columns) : ""}} {{$form_item->html_id}}_wrap js_input_control"> <label for="{{$form_item->html_id}}{{$loop->index}}" class="{{$form_item->html_id}}_label"> @if($choice->image) <img src="{{ asset('form_item_image/'.$choice->image) }}" class="img-fluid choice_img"/> @endif <input type="checkbox" name="{{$form_item->name}}[]" value="{{$choice->label_text}}" id="{{$form_item->html_id}}{{$loop->index}}" class="{{$form_item->html_class}}"> {{$choice->label_text}} </label> </div> @endif @endforeach |
$form_item->file_capacity_limit |
「項目登録・編集」で「フォームの種類」に「ファイル」を選択した時に入力する「容量上限(kbyte)」の数値が入っています。 下記の例では、ファイル選択フォームの下に、容量制限の注意を促した文字を表示しています。
|
$form_item->file_type |
「項目登録・編集」で「フォームの種類」に「ファイル」を選択した時に入力する「ファイル形式」の文字が入っています。 ボタンクリックで入力される列は下記のようになります。 image/* application/pdf video/* text/csv text/plain image/jpeg image/png,image/jpeg image/png,image/jpeg,image/gif 下記の例では、ファイル選択フォームを開いたときに、選択できるaccept属性を指定しています。
|
$form_item->form_type |
「項目登録・編集」の「フォームの種類」で選択した文字列が入っています。 下記が表示する選択肢と、変数に入る文字列の対応一覧です。 日本語選択の場合は、em_laravel\resources\lang\ja(言語別のフォルダ名)\admin_messages.phpに記載されています。
|
$form_item->html_class |
「項目登録・編集」の「class属性」に入力した文字列が入っています。 下記の例では、テキスト入力フォームにclass属性をつけています。
|
$form_item->html_id |
「項目登録・編集」の「class属性」に入力した文字列が入っています。 下記の例では、テキスト入力フォームにid属性をつけています。
|
$form_item->initial_value |
「項目登録・編集」の「初期値」に入力した文字列が入っています。 下記の例では、テキスト入力フォームに初期値を入力した状態にしています。
|
$form_item->max_length |
「項目登録・編集」の「入力文字数制限(半角)」に入力した最大文字数の値が入っています。 |
$form_item->min_length |
「項目登録・編集」の「入力文字数制限(半角)」に入力した最小文字数の値が入っています。 |
$form_item->name |
「項目登録・編集」の「name属性」に入力した文字列が入っています。 下記の例では、テキスト入力フォームにname属性をつけています。
|
$form_item->placeholder |
「項目登録・編集」の「Placeholder」に入力した文字列が入っています。 |
$form_item->required |
「フォーム一覧」から「フォーム項目編集」に進み、「利用中項目」の必須をオンにすると、1が入ります。
下記の例では、必須項目の※印を表示しています。
|
$form_item->restriction |
「項目登録・編集」の「入力制限」で選択した文字列が入っています。 下記が表示する選択肢と、変数に入る文字列の対応一覧です。
|
$form_req | フォーム送信された内容が配列で入っています。 |
$row['title'] $row['value'] |
$form_reqの中身です。 下記の例では、自動返信メールの文内(reply_mail.blade.php reply_mail_for_admin.blade.php)で項目と入力された値を出力しています。
|
$form_title |
「フォーム作成」時の「フォーム名」の文字列が入ります。
下記の例では、titleタグにフォーム名を出力しています。
|
$include_submissions | 「フォーム作成」時の「ユーザー確認メールに送信内容を含める」をオンにすると、1が入ります。 |
$reply_mail_footer_message |
「フォーム作成」時の「自動返信メールのフッター文」の文字列が入ります。
下記の例ではreply_mail.blade.phpないでフッター文を表示しています。
|
$reply_mail_header_message |
「フォーム作成」時の「自動返信メールのヘッダー文」の文字列が入ります。
下記の例ではreply_mail.blade.php内でヘッダー文を表示しています。
|
$request->name |
項目に「お名前」を入れているときに、自動返信メールの中で入力値利用することができます。 下記の例ではreply_mail.blade.php内でお名前を表示しています。 __("messages.form.thanks_front_dear")と__("messages.form.thanks_behind_dear")は言語ファイルにある敬称です。
|
返信メール文の編集
独自タグをメール文に設定
「自動返信メール」「最終画面のお礼文」以下の独自タグをメール文に設定できます。
■日時タグ説明 | タグ |
---|---|
4桁の西暦 | #YYYY# |
末2桁の西暦 | #YY# |
2桁の月 | #MM# |
2桁の日 | #DD# |
漢字の曜日 | #KWE# |
英語の曜日 | #AWE# |
2桁の時 | #HH# |
2桁の分 | #MI# |
2桁の秒 | #SS# |
#YYYY#年#MM#月#DD#日 #HH#時#MI#分
■送信元タグ
説明 | タグ |
---|---|
IPアドレス | #IP# |
ホスト名 | #HOST# |
ユーザーエージェント | #UA# |
#[name属性]#を記述すると、ユーザーの入力値を表示することができます。
<input type="text" name="onamae">
となっている場合は下記のように入力することで、ユーザーの入力した文字が表示されます。
#onamae#
※回答タグは「メールのタイトル」「最終画面のお礼文」に設定することも可能です。テーマファイルを使ってメール文設定
em_laravel\resources\views\theme\gray\reply_mail.blade.phpがユーザー向けの返信メールの内容になります。em_laravel\resources\views\theme\gray\reply_mail_for_admin.blade.phpが管理者向けのメール本文になります。
@foreach($form_req as $row)
{{$row['title']}}:{{$row['value']}}
@endforeach
$row['title']と$row['value']の部分でフォームへの入力内容を、フォームの項目順にすべて表示させています。上記の例ですと、
お名前:山田太郎
と表示されます。この内容を独自に編集したい場合には、
{{$request->name}}様
-----------------------------------
問い合わせ内容は以下で受けしました
-----------------------------------
【お名前】{{$request->name}}
【メールアドレス】{{$request->email}}
【お好きな動物は?】{{$request->animal}}
このように{{$request->「タグのname属性」}}とすることで、入力内容を表示させることができます。静的(固定)ページ
bladeファイルを使って静的(固定)ページを設置したい場合は、em_laravel/resources/views/themeの中にファイルを新規に作成してください。管理画面で作ったフォーム表示よりも優先して、表示されます。
下記では、ドキュメントルート直下にEasyMailをセットアップしたときの例を示しています。
(例)
em_laravel/resources/views/theme/index.blade.php → https://example.com/
em_laravel/resources/views/theme/about_us.blade.php → https://example.com/about_us/
em_laravel/resources/views/theme/policy.blade.php → https://example.com/policy/