入力内容確認アドオンの設置手順の解説

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

設置手順

1、confirm.zipを展開します。

2、メールフォーム本体にあるaddonフォルダの中に、confirmフォルダを入れます。

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

index.htmlのhead要素内に、以下のようにconfirm.cssの読み込みを追加。

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

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

<div id="confirm_field">
  <h2>以下の内容で送信してよろしいですか?</h2>
  <dl>
  </dl>
  <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_field”>内のdl要素の中に、dt要素とdd要素として挿入される形となります。

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

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

初期状態(このアドオンなし)の確認ウインドウに戻すには、confirm-config.phpの中の設定を変更すればOKです。

もしくは、上記の設置手順2でaddonフォルダに入れたconfirmフォルダを削除することでも戻ります。

サポートについて

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

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

サポートBBS

サイト内を検索
サイト運用事例
提供サポート
メールフォーム

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+