WEBアプリケーション制作のご紹介

Bootstrapでノンリロードのメールフォームを作る

  • このエントリーをはてなブックマークに追加
  • LINEで送る

Bootstrapでノンリロードのメールフォームを作る

特にBootstrapである必要は有りませんが、Jquery+PHPでノンリロードのメールフォーム作成のページへアクセスする方が多いようで、Bootstrapの紹介ページを作ったという事もあり、Bootstrapでメールフォームを作る手順をご紹介致します。

但し、これはあくまで私の考えた1つの方法ですので、公式のメールフォーム作成エントリーを補足するものでは無い事をご理解下さい。

Bootstrapでお問合せページのひな形を作る

サンプル

Bootstrapのコーディング方法や命名規則に関してはこちらを参考にして下さい。基本的にコードは全てBootstrapで書く事としていますが、一部スタイルは自分用のbootstrap-custom.cssに書いています。Bootstrapを無効化するようなコードではなく、余白など一部のコードのみ自分で書いています。

幾つか補足しますが、レスポンシブウェブデザインの場合、横に長いコンテンツは縦に落とします。サンプルをスマートフォンで見るか、ブラウザの幅を狭めていくと項目名とフォームが改行されて表示されます。

ここで幾つか問題があり、Bootstrapのフォームは基本的に100%表示のようです。size="*"を指定しても無視されるようです。インラインで表示する事も出来ますが、用途がちょっと違う印象です。

これは、海外のメールフォームを見ると、日本のように項目名とフォームが横並びになっておらず、改行されているケース、或いは項目とフォームの幅を固定にし、綺麗に整列させるようなフォームが少ない印象です。Amazonなんかもそうですね。

ですので、フォームの長さはグリッドシステムで調整します。

フォームの長さを変えたサンプル

とりあえずひな形が出来ましたので、よく使われるフォームを並べてお問合せフォームをコーディングします。

フォームを色々と使ってコーディング

 

PAGE TOP