Perforated coupon ticket
A ticket with notches and a tear line: apply a valid code and the stub rips away while a discount stamp lands.
Settings
Code
<form class="uvq06-cp"><div class="tk"><div class="sb" aria-hidden="true"><b>%</b><span>Coupon</span></div><div class="mn"><label for="uvq06-cp-in">Discount code</label><div class="rw"><input id="uvq06-cp-in" autocomplete="off" spellcheck="false" maxlength="12" placeholder="CODE"><button type="submit">Apply</button></div><p class="ms" aria-live="polite">Try AIMRAN20</p></div></div><span class="stp" aria-hidden="true">−20 %</span></form>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
A discount code field shaped like a paper ticket. CSS masks cut the round notches on both sides of a dashed tear line, and the stub carries a big percent sign. A valid code makes the stub swing off and fade while a rubber stamp with the discount drops in its place; a wrong one shakes the ticket and explains why.
Set the main color to your promo color and write your own codes in the small table in the script. It fits carts, checkout summaries and event registrations, ideally below the order total so the stamp lands next to the price it changes.