メールフォームの入力内容確認アドオンの設置手順の解説

レスポンシブ・メールフォームの「入力内容確認アドオン」の設置手順を解説いたします。
このページの内容は、上記アドオンにテキストファイルとして同梱されているものと同じになります。

設置手順

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

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

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

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

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

　
index.htmlのform要素の下(</form>の下)に、以下のように確認画面用のdiv要素などを追加。

<div id="confirm_field">
  <h2>以下の内容で送信してよろしいですか？</h2>
  <div id="confirm_window">
    <!-- 確認ウインドウ表示時は、この位置に入力内容を含んだdl,dt,ddが挿入されます。このコメント文は消しても問題ありません。 -->
  </div>
  <p id="confirm_submit"><input type="button" id="confirm_submit_button" value="送信する" /><input type="button" id="confirm_cancel_button" value="戻る" /></p>
</div>

設置は以上です。
実際にメールフォームに入力をしてみて、送信前に確認画面が表示されるかどうかの確認をしてみましょう。

確認画面のデザイン変更について

確認画面のデザインは上記のconfirm.cssで、<div id=”confirm_field”> や <div id=”confirm_window”> に対してデザイン設定されています。

つまり、メールフォームに入力された内容は <div id=”confirm_window”> の中にdl,dt,dd要素として挿入される形となります。(dtに項目名、ddに入力された内容)

このあたりはメールフォーム本体の<form id=”mail_form”>内のdl要素と同じ構成です。

初期状態(このアドオンなし)の確認ウインドウに戻す方法

初期状態(このアドオンなし)の確認ウインドウに戻すには、confirm-config.phpの中の設定を変更すればOKです。
もしくは、上記の設置手順2でaddonフォルダに入れたconfirmフォルダを削除することでも戻ります。

一応、上記の設置手順3でindex.htmlに追加したコードも削除しておくと良いでしょう。

サポートについて

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

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