パーツ番号 10-05-06 ・ JavaScript使用

クーポンコード入力欄

コードを入力して適用ボタンを押すと割引額が表示される入力欄です。MemberPressの会員登録・更新時のクーポン適用フォームに使えます。

membershipclickjsinput

プレビュー

ソースコード

HTML

<div class="d10-05-06-box">
          <div class="d10-05-06-row">
            <input type="text" class="d10-05-06-input" placeholder="クーポンコードを入力" value="WELCOME10">
            <button type="button" class="d10-05-06-btn">適用</button>
          </div>
          <p class="d10-05-06-msg"></p>
        </div>

CSS

.d10-05-06-box{width:100%;max-width:280px}
        .d10-05-06-row{display:flex;gap:8px}
        .d10-05-06-input{
          flex:1;min-width:0;border:1px solid #cbd5e1;border-radius:8px;
          padding:10px 12px;font-size:13px;color:#0f172a;
        }
        .d10-05-06-btn{
          border:none;border-radius:8px;padding:0 18px;
          background:#0f172a;color:#fff;font-size:13px;font-weight:700;cursor:pointer;
        }
        .d10-05-06-msg{margin:10px 0 0;font-size:12.5px;font-weight:700;color:#16a34a;min-height:16px}

JavaScript

(function(){
        var root = document.querySelector('.d10-05-06');
        var btn = root.querySelector('.d10-05-06-btn');
        var input = root.querySelector('.d10-05-06-input');
        var msg = root.querySelector('.d10-05-06-msg');
        btn.addEventListener('click', function(){
          var code = input.value.trim();
          if(code.length === 0){
            msg.style.color = '#dc2626';
            msg.textContent = 'コードを入力してください';
            return;
          }
          msg.style.color = '#16a34a';
          msg.textContent = '「' + code + '」を適用しました:10%割引が反映されました';
        });
      })();

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