このサイトで無料ダウンロードできるレスポンシブ・メールフォームを既存サイトに組み込み設置する際のディレクトリ構成例とその作業手順を詳細に解説します。
基本的な組み込み手順は上記ページ内の「既存のページに組み込む場合」に書いてありますが、その解説だけではわからない人がいるかもしれないので、このページではより詳細にその手順を解説していきます。
なお、このページの解説は初期状態のメールフォームでの送信テストが正常に完了していることが前提となります。
(「レスポンシブ メールフォームの正しい設置手順」のページの手順2まで)
レスポンシブ・メールフォームの初期状態の構成
レスポンシブ・メールフォームは初期状態では以下のような構成になっています。
mailform-v7.2.1/
┃
┣━━ addon/
┃
┣━━ css/
┃ ┣━━ jquery.datetimepicker.css
┃ ┣━━ mailform.css
┃ ┣━━ reset.css
┃ ┗━━ thanks.css
┃
┣━━ js/
┃ ┣━━ ajaxzip3.js
┃ ┣━━ class.mailform-js.php
┃ ┣━━ jquery.autoKana.js
┃ ┣━━ jquery.datetimepicker.js
┃ ┗━━ mailform-js.php
┃
┣━━ php/
┃ ┣━━ class.mailform.php
┃ ┣━━ config.php
┃ ┗━━ mailform.php
┃
┣━━ index.html (フォームのページ)
┃
┗━━ thanks.html (サンクスページ)
このページの解説では以下のように各フォルダの中身は省略して記載していきます。
mailform-v7.2.1/
┃
┣━━ addon/
┃
┣━━ css/
┃
┣━━ js/
┃
┣━━ php/
┃
┣━━ index.html (フォームのページ)
┃
┗━━ thanks.html (サンクスページ)
「メールフォームの使い方の説明(基本設置方法)」のページで解説しているように、addon、css、js、phpの4つのフォルダの位置関係は変えてはいけません。
上記4つのフォルダは上記のように並列の位置関係のままサーバー上に設置してください。
既存のサイトにメールフォームを組み込む場合は、index.htmlとthanks.htmlの2ファイルの中身(HTML)を移動させる形となります。
既存サイトの構成例
例えば以下のような構成のサンプルサイトがあると仮定し、このサイトのお問い合わせページにメールフォームを組み込むとします。
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/
このように既存サイトに組み込む場合、メールフォームに同梱のindex.htmlは不要ですので、サーバーにアップロードする必要はありません。
このサンプルサイトに組み込み設置する場合の作業手順を以下から解説していきます。
mailformフォルダを作成し、その中にメールフォームプログラム一式をそのままアップロードする
上記のディレクトリ構成の図の位置にmailformフォルダを作成し、その中にメールフォームプログラム一式をすべてアップロードします。
(メールフォームに同梱のindex.htmlだけは不要です)
フォルダ名はなんでもOKです。その場合は以下からの解説で「mailform」の部分を書き変えて読み進めてください。
config.php内でサンクスページのURL設定をする
今回のサンプルサイトの場合は、inquiry.html(フォームがあるページ)とthanks.html(サンクスページ)との位置関係が初期状態のメールフォームと同じです。
つまり、相対パスとしては同じになるので、config.php内でのサンクスページのURL設定は編集する必要がありません。
以下のように初期状態の内容のままでOKです。
//【必須】 サンクスページのURL -- index.htmlからの相対パス、またはhttp://からの絶対パス --
$rm_thanks_page_url = 'thanks.html';
以下からの手順に関しても同様に言えるのですが、相対パスで記述する場合は上記のようにフォームのページ(今回のサンプルサイトの場合はinquiry.html)から見た相対URLを意味します。
相対パスがよくわからないという方は、https://からの絶対URLですべて記述しておくと楽かもしれません。
メールフォームのform要素をinquiry.htmlにコピーする
メールフォームに同梱のindex.htmlの中から、form要素をすべてそのままコピーしてinquiry.htmlに貼り付ける。
<form action="php/mailform.php" method="post" id="mail_form">
・・・ここに色々なHTML・・・
</form>
form要素のaction属性のパスを変更する
上記手順1で移植したform要素のaction属性のパスを変更します。(mailform/が追加されている)
<form action="mailform/php/mailform.php" method="post" id="mail_form">
inqury.htmlからmailform.cssを読み込ませる
mailform.cssを読み込ませるコードをメールフォームに同梱のindex.htmlの中からコピーし、以下のようにパスの部分を変更してinquiry.htmlのhead要素内に追加します。(mailform/が追加されている)
<link rel="stylesheet" href="mailform/css/mailform.css" />
reset.cssが適用されていないサイトや日時選択カレンダーを使用する場合は、同様のやり方でreset.cssやjqery.datetimepicker.cssも読み込ませる必要があるでしょう。
inqury.htmlからjQuery本体とmailform-js.phpを読み込ませる
jQuery本体とmailform-js.phpを読み込ませるコードをメールフォームに同梱のindex.htmlの中からコピーし、以下のようにパスの部分を変更してinquiry.htmlのbody要素の最下部に追加します。(mailform/が追加されている)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="mailform/js/mailform-js.php"></script>
フリガナ自動入力ライブラリや郵便番号から住所自動入力を使用したい場合は、jquery.autoKana.jsやajaxzip3.jsも上記のやり方と同じように追加してください。
既存サイトへの組み込み設置の作業は以上です。
まずはフォームの送信テストをしてみて動作するかを確認し、その後でCSSでデザイン調整をすると良いでしょう。
ディレクトリ構成が異なる別のサイトに組み込みたい場合
このページで解説した設置の手順が理解できれば、ディレクトリ構成が異なる別のサイトでも同様のやり方で設置できるでしょう。
このページの内容を要約すると、
- サンクスページのURLがconfig.phpで正しく設定されている。
- フォームのページで各CSSと各JSが正しく読み込めている。
- フォームの送信先(form要素のaction属性)がmailform.phpのURLに正しく設定されている。
と、これだけです。
上記3点はすべてURLの設定だけです。
それが絶対パスであれ相対パスであれ正しく設定できていれば、ディレクトリ構成が違ったとしてもこのメールフォームは正常に動作するでしょう。
また、WordPressサイトへの組み込み方は「通常版のメールフォームをWordPressサイトに設置する手順を解説」のページで紹介していますが、基本的なやり方は同じで設置可能です。
Twitterでフォローする
