webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
41–46 of 60

Return Label Generator

Insurance Quote Calculator

Workout Interval Timer

Gas Fee Estimator

Canvas ASCII Art Converter

Cron Expression Builder

Return Label Generator — Free Product Return Flow Widget

Return Label Generator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsDeveloper Tools

Copy & paste

Source Code

<div class="rl-card">
  <form id="rlForm" class="rl-form">
    <h2>Start a return</h2>

    <div class="rl-field">
      <label for="rlReason">Reason for return</label>
      <select id="rlReason" required>
        <option value="" disabled selected>Select a reason…</option>
        <option>Doesn't fit</option>
        <option>Item damaged or defective</option>
        <option>Wrong item received</option>
        <option>No longer needed</option>
        <option>Better price found elsewhere</option>
        <option>Other</option>
      </select>
    </div>

    <div class="rl-field">
      <span class="rl-legend">Select items to return</span>
      <ul class="rl-items">
        <li class="rl-item">
          <label>
            <input type="checkbox" name="rlItem" value="Trail Runner Jacket" checked />
            <span class="rl-item-name">Trail Runner Jacket</span>
            <span class="rl-item-meta">Size M · Qty 1</span>
          </label>
        </li>
        <li class="rl-item">
          <label>
            <input type="checkbox" name="rlItem" value="Merino Base Layer" />
            <span class="rl-item-name">Merino Base Layer</span>
            <span class="rl-item-meta">Size M · Qty 2</span>
          </label>
        </li>
        <li class="rl-item">
          <label>
            <input type="checkbox" name="rlItem" value="Insulated Water Bottle" />
            <span class="rl-item-name">Insulated Water Bottle</span>
            <span class="rl-item-meta">Qty 1</span>
          </label>
        </li>
      </ul>
    </div>

    <p class="rl-error" id="rlError" hidden>Select a reason and at least one item to continue.</p>

    <button type="submit" class="rl-submit">Generate return label</button>
  </form>

  <div class="rl-confirm" id="rlConfirm" hidden>
    <div class="rl-check">✓</div>
    <h2>Your label is ready</h2>
    <p class="rl-tracking">Tracking number</p>
    <p class="rl-tracking-num" id="rlTrackingNum">1Z-000-000</p>
    <ol class="rl-next">
      <li>Print the label or show the QR code at a drop-off point.</li>
      <li>Pack the selected items securely in a box or bag.</li>
      <li>Drop off within 14 days — refunds process 3–5 days after receipt.</li>
    </ol>
    <button type="button" class="rl-restart" id="rlRestart">Start another return</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Two-state flow
Form and confirmation in one card, no page reload.
Reason-for-return select
A required dropdown of common reasons.
Clickable item checkboxes
Full-row targets with size/quantity metadata.
Inline validation
Blocks submission until reason and item are set.
Mock tracking number
Randomly generated, clearly a placeholder for a real API.
Actionable confirmation
Numbered next steps, not just a success message.
Restart without reload
form.reset() returns to a clean form state.
No dependencies
Pure HTML, CSS, and JavaScript.

About this UI Snippet

Return Label Generator — A Two-Step Return Request Flow

Screenshot of the Return Label Generator snippet rendered live

The return label generator is the flow e-commerce order pages use to let a customer pick a reason, select which items to send back, and get a shippable label — condensed to two states in one card instead of a multi-page wizard. This snippet builds it in plain HTML, CSS, and JavaScript.

Two states, one card

The widget has exactly two views: the form (#rlForm) and the confirmation (#rlConfirm). Submitting swaps their hidden attributes rather than routing to a new page, so the whole interaction stays in place — useful inside a modal or an order-details panel.

Reason plus itemized selection

A required <select> captures the reason for return, and a checkbox list — styled so the whole row is clickable, not just the tiny native checkbox — lets the customer choose exactly which items from the order to include, each showing its size/quantity metadata.

Validation before generating anything

The submit handler checks both that a reason is selected and that at least one item checkbox is checked before proceeding; if either is missing, an inline error message appears and no label is generated — a real (if simple) validation gate rather than a flow that always succeeds.

A mock tracking number, clearly a placeholder

generateTrackingNumber() builds a UPS-style code (1Z + nine random digits + US) purely for demo purposes. It's random on every submission, making clear in the code (and to anyone reading it) that this needs to be replaced with a real call to your shipping-label API.

Confirmation with real next steps

Once generated, the confirmation view shows a checkmark, the tracking number in large tabular numerals, and a numbered list of what happens next — print or show the QR code, pack the items, and the drop-off/refund timeline — so the customer knows what to do without hunting for a follow-up email.

Restart without a reload

A "Start another return" button calls form.reset() and flips the visibility back, so the demo (or a real multi-return flow) can be exercised repeatedly without a page refresh.

Customizing it

Wire the submit handler to a real shipping API, pull the item list from the actual order data, or add a shipping-method choice (drop-off vs. pickup). Pair it with order tracking timeline or checkbox tree for nested item selection.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe return form renders with sample order items.
  2. 2
    Pick a reasonThe select is required before submitting.
  3. 3
    Check the items to returnAt least one item must be selected.
  4. 4
    Click "Generate return label"Validation runs; errors show inline if incomplete.
  5. 5
    View the confirmationA mock tracking number and next steps appear.
  6. 6
    Click "Start another return"The form resets to try again.

Real-world uses

Common Use Cases

Customer self-service returns
Let shoppers pick a reason, select the items to send back and receive a label, all in one card with no page reload.
Support agent tools
Let agents generate a label on a customer's behalf, with inline validation blocking submission until a reason and an item are chosen.
Order history pages
Pair with an order tracking timeline so a shopper can see an order's journey and start a return from the same view.
Multi-item order returns
Combine with a checkbox tree for grouped items, using full-row targets that carry size and quantity metadata.
Warranty and RMA flows
Adapt the reason list for defect-based returns, with a confirmation state showing a mock tracking number and next steps.

Got questions?

Frequently Asked Questions

No — generateTrackingNumber() produces a randomly formatted, UPS-style placeholder purely to demonstrate the confirmation state. Replace it with the tracking number your real shipping-label API returns before using this in production.

The submit handler checks that the reason select has a non-empty value and that at least one item checkbox is checked. If either check fails, an inline error message is shown and the confirmation view never appears.

Replace the static <li> markup with items rendered from your order data (name, size, quantity as the meta text), keeping the same input[name="rlItem"] pattern so the existing validation and submit logic keep working unchanged.

In the submit handler, after validation passes, call your API with the selected reason and item list, await the response, and use its returned tracking number and label URL in place of generateTrackingNumber() before showing the confirmation view.

Yes — add a third field to the form (e.g. a radio group for drop-off vs. pickup), include it in the validation check alongside reason and items, and pass its value along when you call your shipping API.