パーツ番号 01-02-08 ・ JavaScript使用

メルマガ登録インラインCTA

メール入力と登録ボタンを横並びにしたインラインCTA。入力欄フォーカスで枠が強調されます。フッターや記事末尾の購読導線に便利です（フォーカス／送信で動作）。

clickjsinput

プレビュー

ソースコード

HTML

<form class="d01-02-08-form" novalidate>
          <p class="d01-02-08-lead">最新情報をお届けします</p>
          <h4 class="d01-02-08-title">メルマガに登録</h4>
          <div class="d01-02-08-row">
            <input class="d01-02-08-input" type="email" placeholder="you@example.com" aria-label="メールアドレス">
            <button class="d01-02-08-btn" type="submit">登録</button>
          </div>
          <p class="d01-02-08-msg" aria-live="polite"></p>
        </form>

CSS

.prev.d01-02-08{background:#0f172a}
        .d01-02-08-form{width:100%;max-width:340px;text-align:center;color:#fff}
        .d01-02-08-lead{font-size:12px;letter-spacing:.06em;color:#94a3b8;margin-bottom:6px}
        .d01-02-08-title{font-size:20px;font-weight:800;margin-bottom:18px}
        .d01-02-08-row{display:flex;gap:8px;background:#1e293b;padding:6px;border-radius:12px;border:2px solid transparent;transition:border-color .25s ease,box-shadow .25s ease}
        .d01-02-08-row.d01-02-08-focus{border-color:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.2)}
        .d01-02-08-input{flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:10px 12px;font-size:14px;outline:none}
        .d01-02-08-input::placeholder{color:#64748b}
        .d01-02-08-btn{border:0;border-radius:8px;background:#38bdf8;color:#052e3a;font-weight:800;font-size:14px;padding:10px 20px;cursor:pointer;transition:background .2s ease}
        .d01-02-08-btn:hover{background:#7dd3fc}
        .d01-02-08-msg{font-size:12px;color:#4ade80;min-height:16px;margin-top:10px}

JavaScript

(function(){
        var root=document.getElementById('item-01-02-08');if(!root)return;
        var form=root.querySelector('.d01-02-08-form'),row=root.querySelector('.d01-02-08-row'),inp=root.querySelector('.d01-02-08-input'),msg=root.querySelector('.d01-02-08-msg');
        inp.addEventListener('focus',function(){row.classList.add('d01-02-08-focus');});
        inp.addEventListener('blur',function(){row.classList.remove('d01-02-08-focus');});
        form.addEventListener('submit',function(e){
          e.preventDefault();
          if(inp.value.indexOf('@')>0){msg.style.color='#4ade80';msg.textContent='登録ありがとうございます！';inp.value='';}
          else{msg.style.color='#f87171';msg.textContent='メールアドレスをご確認ください。';}
        });
      })();

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