レスポンシブ・メールフォームの各ファイル相関図

レスポンシブ・メールフォームの各ファイルの相関図です。
カスタマイズされる際の参考にしてください。
という名目で、実は私自身が仕組みを忘れないようにするための備忘録のためだったりします。
各ファイルの相関図
見てお分かりになりますように、HTMLファイル(index.html)を中心として各ファイルが連携するようになっています。

HTMLファイルの編集について

上記相関図のように、HTMLファイル(index.html)とJavaScriptファイル(mailform-js.php)は特に密接に絡んでいます。
(拡張子が.phpとなっていますが、JavaScriptファイルとして扱ってください)

そのため、HTML側でid名やclass名を変更したりするとJavaScript側との連携がうまくいかなくなることがあります。
すると、JavaScript側とPHP側も相互に連携している関係上で、メールの送信も正常にできなくなる場合もあります。(問題ない場合もあります)

CSSファイルの編集について

上記相関図のとおり、CSSファイルはHTMLページのデザイン設定にしか関与しておりません。
つまりメールフォームの動作に一切影響していないので、CSSファイルはどのように編集をしても動作エラーの原因とはなりません。

そのような理由から、既存サイトに組み込みたい場合はなるべくHTMLをいじらず、CSSの編集だけによってデザインを合わせると動作エラーの発生を防ぐことができます。
CSSセレクタなどを駆使すれば、HTML側の構成を変えなくても目的のデザインを実現できるかもしれません。
参考リンク:セレクタの種類-CSSの基本

PHPファイルやJavaScriptファイルの編集について

HTMLやCSSとは違い、JavaScriptファイルやPHPファイルはプログラムファイルとなりますので、

  • :(コロン)が;(セミコロン)になったり、
  • .(ピリオド)が,(コンマ)になる。

など、たった1文字の文法違反があるだけで、エラーとなってまったく動作しなくなります。
そのため、カスタマイズの際は特に細心の注意を払う必要があります。

カスタマイズに自信のない方は「ちょっと編集したら、その度にメールの送受信動作を確認」を細かく繰り返して1つ1つ編集していくと、万が一エラーが発生したときにどこが原因になったのかの特定がしやすくなるので、面倒でも結果的には早く仕上げることができたりします。

サポートBBS

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

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

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