← 動的パーツギャラリーへ戻る

パーツ番号 04-03-10 ・ JavaScript使用

送信後の確認画面遷移

送信ボタンを押すと入力フォームが「送信完了」表示に切り替わります。Contact Form 7送信後のサンクスメッセージをその場で表現したいときに使えます。

clickjsinput

プレビュー

ソースコード

HTML

<div class="d04-03-10-wrap">
          <form class="d04-03-10-form">
            <p class="d04-03-10-txt">ご相談内容をお聞かせください。</p>
            <textarea class="d04-03-10-area" rows="3" placeholder="内容を入力"></textarea>
            <button type="submit" class="d04-03-10-btn">送信する</button>
          </form>
          <div class="d04-03-10-done">
            <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#22b573" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="10"/>
              <path d="M8 12.5l2.7 2.7L16 9.5"/>
            </svg>
            <p>送信が完了しました。ご連絡ありがとうございます。</p>
          </div>
        </div>

CSS

.d04-03-10-wrap{position:relative;width:min(280px,100%);min-height:170px}
        .d04-03-10-form{display:flex;flex-direction:column;gap:10px;transition:opacity .25s}
        .d04-03-10-txt{margin:0;font-size:13px;color:#444}
        .d04-03-10-area{
          width:100%;box-sizing:border-box;padding:10px 12px;font-size:13px;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;resize:none;
          font-family:inherit;background:#fff;
        }
        .d04-03-10-area:focus{border-color:#4a6cf7}
        .d04-03-10-btn{
          padding:11px;font-size:13px;font-weight:700;color:#fff;
          background:#4a6cf7;border:none;border-radius:8px;cursor:pointer;
          transition:background .2s;
        }
        .d04-03-10-btn:hover{background:#3a58d6}
        .d04-03-10-done{
          position:absolute;inset:0;display:none;flex-direction:column;
          align-items:center;justify-content:center;text-align:center;gap:10px;
        }
        .d04-03-10-done p{margin:0;font-size:13px;color:#1c7c4e;font-weight:700}
        .d04-03-10-wrap.is-sent .d04-03-10-form{display:none}
        .d04-03-10-wrap.is-sent .d04-03-10-done{display:flex}

JavaScript

(function(){
        var wrap=document.querySelector('.d04-03-10-wrap');
        if(!wrap)return;
        var form=wrap.querySelector('.d04-03-10-form');
        form.addEventListener('submit',function(e){
          e.preventDefault();
          wrap.classList.add('is-sent');
        });
      })();

クラス名 .d04-03-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。