よーし、Webサイトにお問い合わせフォームを追加しよう！
名前・メールアドレス・性別・チェックボックス・・・、いっぱい必要で面倒くさいよ～
「お問い合わせフォーム」は、もはやWebサイトには必ずと言ってもいいほど、実装されていますよね。
そもそも、お問い合わせをしてもらうためにWebサイトを作るということがほとんどなのではないでしょうか？
でも、お問い合わせフォームの項目をひとつひとつ順番にコーディングしていくは案外大変です。
そこで本記事では、シンプルにHTMLで記述した状態のお問い合わせフォームを掲載しました。
ぜひコピペして使っていただいて、CSSで自由にカスタマイズしてみてください^^
【コピペOK】HTMLお問い合わせフォームテンプレ
お問い合わせフォームテンプレート
こまけぇことはさておき、テンプレート教えてくれ！！
そうですね笑。では、さっそくテンプレートコードを以下に記載します。
自身のエディターに貼り付けて使用してみてください。
See the Pen Untitled by fukumaru ryosuke (@fukumaru) on CodePen.
これを貼り付ければいいのか。簡単かんたん
今回は、お問い合わせフォームに頻繁に使用するであろう項目をチョイスしました。
- タイトル
- 名前
- メールアドレス
- 性別
- 血液型
- 趣味
- 自由入力欄
- 送信ボタン
- リセットボタン
この送信ボタンを押すとどこかに情報が送られるの？？
今回の記事では、あくまでHTMLのレイアウトに使用するテンプレですので、これだけではもちろん送信ボタンを押しても実際にどこかに情報が送られるわけではありません。
それに関してはPHPという言語でプログラミングするか、既存のメールフォームサービスと連携することが必要です。
なるほど、PHPも勉強しなきゃだね！
次の記事では、PHPの知識がなくてもメールフォームを実装する方法を紹介しています。
なかなかすぐにPHPの学習をするのも大変だと思うので、もしよければ参考にしてみてください。
その他のお問い合わせフォーム項目いろいろ
今回テンプレートに記載したフォームの項目以外にも、いろいろと項目があるので、一部紹介したいと思います。
楽しみ楽しみ！
/* パスワード入力欄 */
<input type="password">
/* ファイル添付欄 */
<input type="file">
/* 画像の送信ボタン */
<input type="image">
/* 隠し項目 */
<input type="hidden">
いろいろあるんだねー
ひとまずこれだけ知っていれば十分かと思います！
フォームに苦手意識がある方も、コピペしながらサクッと作ってみてください^^
以上、「【コピペOK】HTMLお問い合わせフォームテンプレ」でした。
少しでも読者の方々の手助けになれば嬉しいです！
HTMLをゼロからコーディングしたい！という人にはこちらが便利。
WordPressでメールフォームを実装したい人には、こちらがおすすめ
