今ご覧になっているこのサイトで無料ダウンロードできる「レスポンシブ・メールフォーム」は既存のサイトに組み込んで使用することができます。
その際の具体的な作業手順は以下のページを参考にしていただくとして、このページではメールフォームを一つのサイトに複数設置する場合の設置例のパターンを紹介します。
なお、このページの解説はあくまでも「設置例のパターン」を紹介するだけなので、具体的な設置手順や作業内容は上記ページを参考にしてください。
既存サイトの構成例
例えば以下のような構成のサンプルサイトがあると仮定し、このサイトのすべてのページ(トップページ以外)にメールフォームを組み込むとします。
index.html (トップページ)
┃
┣━━ product.html (取扱商品一覧・このページにフォームを組み込みたい)
┃
┣━━ about.html (企業概要・このページにフォームを組み込みたい)
┃
┣━━ access.html (アクセス・このページにフォームを組み込みたい)
┃
┗━━ inquiry.html (お問い合わせ・このページにフォームを組み込みたい)
パターン１：宛先メールアドレスやサンクスページの設定がすべてのフォームで共通の場合
宛先メールアドレスやサンクスページの設定がすべてのフォームで共通の場合は、以下のような構成で設置することができます。
mailformフォルダはなくても可能なのですが、あったほうが後々の管理がしやすいので追加しています。
index.html (トップページ)
┃
┣━━ product.html (取扱商品一覧・このページにフォームを組み込みたい)
┃
┣━━ about.html (企業概要・このページにフォームを組み込みたい)
┃
┣━━ access.html (アクセス・このページにフォームを組み込みたい)
┃
┣━━ inquiry.html (お問い合わせ・このページにフォームを組み込みたい)
┃
┣━━ thanks.html (サンクスページ)
┃
┗━━ mailform/
┣━━ addon/
┣━━ css/
┣━━ js/
┗━━ php/
addon、css、js、phpのフォルダの中身は上の図では省略していますが、初期状態のまますべて入っているとお考え下さい。
また、メールフォームに同梱のindex.htmlは不要ですので、サーバーにアップロードする必要はありません。
このような設置の場合、以下のような作業をするだけですべてのページ内に設置したメールフォームが正常に動作します。
- すべてのページにform要素のHTMLを貼り付ける。
form要素のaction属性のパスをmailformフォルダ内にあるmailform.phpになるように記述する。(絶対URLでも相対URLでもどちらでもOK)
(メールフォーム本体のバージョン9.0からこの設定は不要になりました)- すべてのページからmailformフォルダ内にあるCSSファイルやJSファイルを読み込ませる。
上記の各作業の詳細なやり方については「既存サイトにメールフォームを組み込み設置する際のディレクトリ構成例と作業手順」のページを参考にしてください。
なお、この設置のやり方をした場合でも、問い合わせメールが来た際にどのページのフォームからの送信だったかを判別することが可能です。
なぜなら、このメールフォームではフォームのページのURLを取得する機能が付いており、管理者に届くメール内に記載されるからです。
(以下はaccess.htmlからフォーム送信されたメールの記載例)
【メールフォームのURL】
https://ここにドメイン/access.html
パターン２：宛先メールアドレスやサンクスページの設定がフォームごとに異なる場合
宛先メールアドレスやサンクスページの設定がフォームごとに異なる場合は、以下のような構成で設置することができます。
index.html (トップページ)
┃
┣━━ product.html (取扱商品一覧・このページにフォームを組み込みたい)
┃
┣━━ about.html (企業概要・このページにフォームを組み込みたい)
┃
┣━━ access.html (アクセス・このページにフォームを組み込みたい)
┃
┣━━ inquiry.html (お問い合わせ・このページにフォームを組み込みたい)
┃
┣━━ thanks.html (サンクスページ)
┃
┣━━ mailform-product/
┃ ┣━━ addon/
┃ ┣━━ css/
┃ ┣━━ js/
┃ ┗━━ php/
┃
┣━━ mailform-about/
┃ ┣━━ addon/
┃ ┣━━ css/
┃ ┣━━ js/
┃ ┗━━ php/
┃
┣━━ mailform-access/
┃ ┣━━ addon/
┃ ┣━━ css/
┃ ┣━━ js/
┃ ┗━━ php/
┃
┗━━ mailform-inquiry/
┣━━ addon/
┣━━ css/
┣━━ js/
┗━━ php/
このケースの場合は、メールフォームプログラム一式(mailformフォルダ)を4つに複製し、それぞれの中にあるconfig.phpでの設定をフォームごとに別々にしておきます。
そして、各ページから読み込むmailform-js.phpのパスをそれぞれ対応するフォルダから読み込むように振り分けます。
【product.htmlにあるJS読み込みコード】
<script src="mailform-product/js/mailform-js.php" id="mailform-js"></script>
【about.htmlにあるJS読み込みコード】
<script src="mailform-about/js/mailform-js.php" id="mailform-js"></script>
【access.htmlにあるJS読み込みコード】
<script src="mailform-access/js/mailform-js.php" id="mailform-js"></script>
【inquiry.htmlにあるJS読み込みコード】
<script src="mailform-inquiry/js/mailform-js.php" id="mailform-js"></script>
なお、各フォームのページで読み込むCSSは上記のように振り分ける必要はありません。(振り分けておいたほうが後々わかりやすいかもしれません)
config.phpを4つ別々にしたいだけのために、メールフォームプログラム一式(mailformフォルダ)を丸ごと4つ設置するのはあまりスマートなやり方ではないですが、もしこれを1つにしたい場合はプログラムファイルのカスタマイズ(有料)が必要になってしまいます。
どうしてもそのような形にしたい方はカスタマイズ依頼をご検討ください。
Twitterでフォローする
