Mmemo

PC作業に関する覚書やweb制作記録。
無料で使える便利ツールやwebアプリも制作。サイト上(ブラウザ上)で動作。

バリデーション付きのお問い合わせフォームのデザイン01

概要

お問い合わせページなどに使用するフォームのサンプル。レスポンシブ対応。
inputタグはテキスト入力、チェックボックス、ラジオボタンが使用可能。
selectタグ、textareaタグが使用可能。

バリデーション(入力欄のチェック)機能あり。
input等の要素にrequired属性を付けると必須項目となる。
また、メールアドレスの一致に関してはJavaScriptで別途記述。

本体

お名前
*必須
フリガナ
*必須
メールアドレス
*必須
メールアドレス(確認用)
*必須
電話番号(ハイフン無し)
*必須
住所(都道府県)
*必須
住所(市区町村)
*必須
住所(番地・建物名)
資料請求
利用規約への同意
*必須
規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル
規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル
規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル
規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル
規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル
規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル規約サンプル
このサイトを何で知りましたか
使用端末
*必須
お問い合わせ内容
*必須

本ページでは[送信する]を押すと、ページ更新されるのみ。
バリデーションに引っかかると注意文が表示される。

コード