メールフォームの添付ファイルアドオンの設置手順の解説

レスポンシブ・メールフォームに組み込むことができる「添付ファイルアドオン」の設置手順を解説します。
機能や価格などの詳細は「レスポンシブ・メールフォームの添付ファイルアドオンについて」のページをご覧ください。

このページの内容は上記アドオンに同梱されている「添付ファイルアドオンの設置手順.txt」と同じ内容になります。
購入を検討中の方が参考にできるよう公開いたしました。

設置手順

1、zipファイルを展開します。
ついでにこのZIPファイルをバックアップ保存しておくとベターです。

2、メールフォーム本体にあるaddonフォルダの中に、attachmentフォルダを入れます。
以下の場所にattachmentフォルダを設置してください。
css、js、phpのフォルダの中身は以下の図では省略しています。

mailform/
  ┃
  ┣━━ addon/attachment/ここにアドオンの様々なファイル
  ┃
  ┣━━ css/中身を省略
  ┃
  ┣━━ js/中身を省略
  ┃
  ┣━━ php/中身を省略
  ┃
  ┣━━ index.html (フォームのページ)
  ┃
  ┗━━ thanks.html (サンクスページ)

3、メールフォーム本体のindex.htmlに以下の2つのコードを追加します。
(index.htmlを、attachmentフォルダの中のindex(差し替え用).htmlと差し替えるだけでもOKです)
index.htmlのhead要素内に、以下のようにattachment.cssの読み込みを追加。

<link rel="stylesheet" href="addon/attachment/attachment.css" />

index.htmlのform要素内のdl要素の中に、以下のようにファイル添付用のdl,dt,dd要素を追加。
(MAX_FILE_SIZEのinput要素は画面に表示されませんが必須です)

<dl>
  <dt><i></i>添付ファイル(複数選択NG)</dt>
  <dd>
    <ul>
      <li><input type="hidden" class="max_file_size" name="MAX_FILE_SIZE" value="" /></li>
      <li><input type="file" name="attachment[]" /></li>
      <li><input type="file" name="attachment[]" /></li>
      <li><input type="file" name="attachment[]" /></li>
      <li><input type="file" name="attachment[]" /></li>
      <li><input type="file" name="attachment[]" /></li>
      <li><input type="file" name="attachment[]" /></li>
    </ul>
  </dd>
</dl>

上のHTMLコードは1つのボタンにつき、1つのファイルを選択できるタイプとなります。
それに対し、下のHTMLコードでは1つのボタンで複数のファイルを選択することができます。(multiple=”multiple”が追加されています)

<dl>
  <dt><i></i>添付ファイル2(複数選択OK)</dt>
  <dd>
    <ul>
      <li><input type="hidden" class="max_file_size" name="MAX_FILE_SIZE" value="" /></li>
      <li><input type="file" name="attachment_2[]" multiple="multiple" /></li>
    </ul>
  </dd>
</dl>

4、attachment-config.phpを開き、上記手順5と同じになるようにアップロードできるファイルサイズの上限を記入します。

$rm_upload_max_size = 2000000;

5、attachment-config.phpを開き、送信可能なファイル形式を1または0で指定します。
(許可する形式には1、許可しないものには0)

$rm_jpg = 1;
$rm_png = 1;
$rm_gif = 1;
$rm_zip = 0;
$rm_pdf = 0;
$rm_doc = 0;
$rm_xls = 0;

上のコードではJPG、PNG、GIFファイルを許可し、ZIP、PDF、DOCX(DOC)、XLSX(XLS)ファイルを不許可としています。

設置は以上です。
実際にメールフォームに入力・ファイル指定をしてみて、ファイルが送信されるかを確認してみましょう。

補足説明

添付ファイル機能というものは攻撃の的となりやすく、リスクの高い面があります。
例えば、容量の重いファイルを送ることでサーバをダウンさせたり、ウイルスを仕込んだ実行ファイルを送りつけたりすることもできます。

というように、添付ファイル機能はセキュリティ面でのリスクが増し、サーバにかかる負荷も増えるため、正確に、そして厳しめに設定をするほうが無難です。

特に、ZIP形式を許可するとどんなファイルでも添付できてしまうことになるため、必要性がなければZIP形式は不許可にしたほうがベターです。(初期設定では不許可になっています)

ファイル選択ボタン( input type=”file” )の追加や削除について

MAX_FILE_SIZEのinput要素は必須です。これのname属性とvalue属性も必須で変更不可です。
つまり、以下のコードは一切触らずに残しておいてください。

<input type="hidden" class="max_file_size" name="MAX_FILE_SIZE" value="" />

ファイル選択ボタン( input type=”file” )は初期状態では6つ並んでいますが、この「6つ」という数に意味はありません。自由に増やしたり減らしたりしてください。
具体的には以下のようになるでしょう。(1つにした例)

<dl>
  <dt><i></i>添付ファイル(複数選択NG)</dt>
  <dd>
    <ul>
      <li><input type="hidden" class="max_file_size" name="MAX_FILE_SIZE" value="" /></li>
      <li><input type="file" name="attachment[]" /></li>
    </ul>
  </dd>
</dl>

また、dl,dt,dd要素ごと増やしていくことも可能です。
その場合は、各グループごとのname属性はそのページ内で同一のものが存在しないよう唯一の名前にしてください。
これはこのプログラムの仕様というより、HTMLの仕様です。

そして、name属性は同一の選択肢グループに属するものは同じname属性名にし、末尾に[]を追加してください。
このあたりはチェックボックスを増やす場合と同じ仕様となっておりますので、「メールフォームの項目を増やす方法」のページを参考にしてください。
具体的には以下のような感じになります。

<dl>
  <dt><i></i>添付ファイル(複数選択NG-1)</dt>
  <dd>
    <ul>
      <li><input type="hidden" class="max_file_size" name="MAX_FILE_SIZE" value="" /></li>
      <li><input type="file" name="attachment_ng_1[]" /></li>
    </ul>
  </dd>
</dl>

<dl>
  <dt><i></i>添付ファイル(複数選択NG-2)</dt>
  <dd>
    <ul>
      <li><input type="hidden" class="max_file_size" name="MAX_FILE_SIZE" value="" /></li>
      <li><input type="file" name="attachment_ng_2[]" /></li>
    </ul>
  </dd>
</dl>

サポートについて

このアドオンには設置メールサポートが付属しています。
設置方法でご不明な点があったり、カスタマイズしていない初期状態なのに正常に動作しないような場合は、サポートBBSまたはお問い合わせページからお問い合わせください。

カスタマイズに関しては別途料金が発生いたしますので、ご了承ください。