Skip to content
Forge

Personalised gift card

A gift card form: preset or custom amount, design, recipient, message and send date, with a live preview of the card.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Amounts and designs are real radio buttons, usable with the arrow keys; the custom amount accepts a whole number from 10 to 300 EUR. Each required field is checked on submit, the error is tied to its field with aria-describedby and focus moves to the first field to fix. The send date is limited to the coming year, a character counter follows the message and the preview shows the chosen design, amount and texts. Without JavaScript, the form still works with the browser's own validation. Connect the submission to your cart.

Code

Loading the code…

Archive contents

carte-cadeau-personnalisee-html-tailwind.zip3 files · 8 Ko

  • index.html23 Ko
  • README.md3 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 16, 2026.

In the same spirit

  • Cart with quantities

    Free

    The full cart page: keyboard-editable quantities, undoable removal, promo code, free-delivery gauge and totals recalculated then announced.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Product catalog filters

    Free

    A faceted filter panel for a catalog: category, price, size, colour and stock, with a result counter, active filter chips, sorting and a mobile drawer.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Order summary

    Free

    The cart summary before checkout: items with thumbnail and quantity, a free-shipping gauge, a promo code and a total recalculated on every change.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Product page

    Free

    A complete product page: product views, colors and sizes as radio buttons, a quantity selector and an announced add-to-cart.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component