お問い合わせフォーム付きドロワーメニューの作り方【HTML/CSS/JavaScript・サンプルコード付き】

html/css/js

お問い合わせフォーム付きドロワーメニューの作り方

HTML・CSS・JavaScriptを使って、お問い合わせフォーム付きのドロワーメニューを作る方法を紹介します。このサンプルでは、ボタンをクリックすると画面横からドロワーメニューが表示され、その中に名前やメールアドレス、お問い合わせ内容を入力できるフォームを配置できます。お問い合わせページやサポート窓口、資料請求、予約受付などの入力フォームを省スペースで表示したい場合に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

お問い合わせフォーム付きドロワーメニュー

ボタンをクリックすると、ドロワーメニュー内にお問い合わせフォームを表示できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>お問い合わせフォーム付きドロワーメニュー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- デモ全体を囲むエリア -->
  <div class="contact-form-drawer-menu_wrap">

    <!-- 見出し -->
    <div class="contact-form-drawer-menu_title">
      お問い合わせフォーム付きドロワーメニュー
    </div>

    <!-- 説明文 -->
    <p class="contact-form-drawer-menu_text">
      ボタンをクリックすると、ドロワーメニュー内にお問い合わせフォームを表示できます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button class="contact-form-drawer-menu_open" type="button" data-drawer-open>
      フォームを表示
    </button>

  </div>

  <!-- ドロワーメニュー背景 -->
  <div class="contact-form-drawer-menu_overlay" data-drawer-overlay>

    <!-- ドロワーメニュー本体 -->
    <div class="contact-form-drawer-menu_drawer" role="dialog" aria-modal="true">

      <!-- ドロワーメニューの見出し -->
      <div class="contact-form-drawer-menu_drawer-title">
        お問い合わせ
      </div>

      <!-- ドロワーメニューの説明文 -->
      <p class="contact-form-drawer-menu_drawer-text">
        必要事項を入力して送信ボタンを押してください。
      </p>

      <!-- お問い合わせフォーム -->
      <form class="contact-form-drawer-menu_form">

        <!-- 名前入力欄 -->
        <label class="contact-form-drawer-menu_label">
          お名前
          <input class="contact-form-drawer-menu_input" type="text" name="name" placeholder="山田 太郎">
        </label>

        <!-- メールアドレス入力欄 -->
        <label class="contact-form-drawer-menu_label">
          メールアドレス
          <input class="contact-form-drawer-menu_input" type="email" name="email" placeholder="sample@example.com">
        </label>

        <!-- お問い合わせ内容入力欄 -->
        <label class="contact-form-drawer-menu_label">
          お問い合わせ内容
          <textarea class="contact-form-drawer-menu_textarea" name="message" placeholder="お問い合わせ内容を入力してください"></textarea>
        </label>

        <!-- 送信ボタン -->
        <button class="contact-form-drawer-menu_submit" type="submit">
          送信する
        </button>

      </form>

      <!-- ドロワーメニューを閉じるボタン -->
      <button class="contact-form-drawer-menu_close" type="button" data-drawer-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

コメント