パーツ番号 04-03-10 ・ JavaScript使用
送信後の確認画面遷移
送信ボタンを押すと入力フォームが「送信完了」表示に切り替わります。Contact Form 7送信後のサンクスメッセージをその場で表現したいときに使えます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。