Gutschein als perforiertes Ticket
Ein Ticket mit Kerben und Abrisslinie: Bei gültigem Code reißt der Abschnitt ab und ein Rabattstempel landet darauf.
Einstellungen
Code
<form class="uvq06-cp"><div class="tk"><div class="sb" aria-hidden="true"><b>%</b><span>Gutschein</span></div><div class="mn"><label for="uvq06-cp-in">Rabattcode</label><div class="rw"><input id="uvq06-cp-in" autocomplete="off" spellcheck="false" maxlength="12" placeholder="CODE"><button type="submit">Anwenden</button></div><p class="ms" aria-live="polite">Probier AIMRAN20</p></div></div><span class="stp" aria-hidden="true">−20 %</span></form>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Ein Feld für Rabattcodes in Form eines Papiertickets. CSS-Masken schneiden die runden Kerben an beiden Seiten einer gestrichelten Abrisslinie, und der Abschnitt trägt ein großes Prozentzeichen. Ein gültiger Code lässt den Abschnitt wegschwingen und verblassen, während ein Gummistempel mit dem Rabatt an seine Stelle fällt; ein falscher Code lässt das Ticket wackeln und erklärt den Grund.
Stell die Hauptfarbe auf deine Aktionsfarbe und trag eigene Codes in die kleine Tabelle im Skript ein. Es passt zu Warenkörben, Bestellübersichten und Eventanmeldungen, am besten unter der Gesamtsumme, damit der Stempel neben dem Preis landet.