お問い合わせフォーム 20選

コピペで実装できる問い合わせフォーム20種。氏名・メール・本文などの実用構成で、入力から送信完了までを実際に試せます。ベーシック・演出/デザイン・実用リッチのカテゴリ別に収録。

check

送信が完了しました

お問い合わせありがとうございます。
2営業日以内にご返信いたします。

01. 縦1カラム定番ラベル上・角丸input・大きめ送信
check

送信が完了しました

担当者より折り返しご連絡いたします。

02. 2カラムグリッド氏名/メール横並び・本文フル幅
check

送信が完了しました

お問い合わせありがとうございました。

03. フローティングラベルCSS :placeholder-shown で上昇
check_circle

送信が完了しました

ありがとうございました。

04. 下線のみミニマルフォーカスでライムが伸びる
person
mail
call
check

送信が完了しました

お電話またはメールにてご連絡します。

05. アイコン付きインプットperson / mail / call を左に添える

最新情報をお届け

お役立ち資料や事例を月1回お送りします。

mark_email_read

登録が完了しました。ありがとうございます!

06. インラインCTAメール1個+ボタン横並び

お気軽にご相談ください

通常1営業日以内に返信いたします。
check

送信が完了しました

ご相談ありがとうございます。

07. カード内フォーム見出し+補足+影付きパネル
STEP 1 / 3
check

送信が完了しました

ご入力ありがとうございました。

08. ステップフォーム進捗バー+次へ/戻るで3ステップ
check

送信が完了しました

入力チェックOK、送信されました。

09. リアルタイムバリデーション入力中にメール形式/必須をチェック
check

送信が完了しました

お問い合わせありがとうございます。

10. limebill風黒パネル+ライムのフォーカス

お問い合わせ

check

送信が完了しました

ありがとうございました。

11. ガラスモーフィズムカラフル背景+半透明フォーム

favoriteお問い合わせ

check

おくれました!

おといあわせありがとう。

12. パステル可愛い丸っこい+ふんわり影+アイコン装飾

Contact

check

Sent!

お問い合わせありがとうございました。

13. ネオブルータリズム黒太枠+ずれ影+ビビッド

CONTACT

check

送信が完了しました

お問い合わせありがとうございます。

14. ダーク+ネオンフォーカス発光ボーダー・グラデCTA

会社情報

location_on
apartment東京都渋谷区〇〇 1-2-3
サンプルビル 5F
call03-1234-5678
schedule平日 10:00 - 18:00
check

送信が完了しました

ご連絡ありがとうございます。

15. 会社情報+地図風 2ペイン左に情報・右にフォーム
check

送信が完了しました

種別「ご相談」で受け付けました。

16. ピル型トグル種別ご相談/お見積り/採用タブ

サービスの満足度をお聞かせください

星を選択してください
check

ありがとうございました

5 つ星の評価を受け付けました。

17. 満足度スター+コメントフィードバックフォーム
check

送信が完了しました

ファイルを受け付けました。

18. ファイル添付風UIドラッグ&ドロップ+ファイル名表示
送信が完了しました!
19. 送信中→完了アニメローディングリング→チェックにモーフ
support_agent
サポート担当通常すぐに返信します
check_circleお問い合わせを受け付けました
20. チャット風問い合わせ吹き出しで会話形式に回答