webdevpuneet.com

Related Snippets

86 in Modals category
1–6 of 60

Micromodal Accessible Modal (Focus Trap Verified)

Notyf Minimal Toast Variants

Toastify Notification Stack with Undo

SweetAlert2 Multi-Step Input Flow

SweetAlert2 Confirmation Dialog Set

Floating UI Anchored Popover in a Scroll Container

Feedback Tab Widget — Docked Side Panel HTML CSS JS

Feedback Tab Widget · Modals · Plain HTML, CSS & JS · Live preview

CategoryModals
TagsKeyboard NavigationSVGAccessibilitySocial UI

Copy & paste

Source Code

<div class="ftw-page">
  <p class="ftw-hint">The docked tab on the right opens a feedback panel.</p>
</div>

<button type="button" class="ftw-tab" id="ftwTab">
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
  Feedback
</button>

<div class="ftw-backdrop" id="ftwBackdrop"></div>
<aside class="ftw-panel" id="ftwPanel" role="dialog" aria-label="Send feedback">
  <div class="ftw-panel-head">
    <h3>Send feedback</h3>
    <button type="button" class="ftw-close" id="ftwClose" aria-label="Close">✕</button>
  </div>

  <div class="ftw-body" id="ftwBody">
    <p class="ftw-label">How's your experience so far?</p>
    <div class="ftw-moods" id="ftwMoods">
      <button type="button" class="ftw-mood" data-v="1">😞</button>
      <button type="button" class="ftw-mood" data-v="2">😐</button>
      <button type="button" class="ftw-mood" data-v="3">🙂</button>
      <button type="button" class="ftw-mood" data-v="4">😄</button>
    </div>
    <p class="ftw-label">Tell us more (optional)</p>
    <textarea id="ftwText" placeholder="What's working well or what could be better?" rows="4"></textarea>
    <button type="button" class="ftw-submit" id="ftwSubmit" disabled>Send feedback</button>
  </div>

  <div class="ftw-thanks" id="ftwThanks" hidden>
    <div class="ftw-thanks-icon">✓</div>
    <h4>Thanks for the feedback!</h4>
    <p>We read every response — it genuinely shapes what we build next.</p>
  </div>
</aside>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), 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

Genuinely rotated edge tab
A combined rotate + translate transform creates a real vertical tab whose text reads correctly, docked to the viewport's right edge.
Quick emoji mood scale
Four mood options let users respond in one tap, with the picked option visually lifted and highlighted.
Optional comment field
The textarea is never required — only a mood pick enables the submit button, lowering the bar to respond.
Slide-out panel tethered to its source
The panel animates from the same edge the tab is docked to, instead of appearing as an unrelated centered modal.
In-place thank-you confirmation
Submitting shows a checkmark and message inside the still-open panel before it closes, confirming receipt explicitly.
Auto-reset after close
The form silently clears itself after the panel closes, so it's ready fresh the next time it's opened.
Backdrop, close-button, and Escape dismissal
All three dismissal paths call the same closePanel() function, keeping behavior consistent everywhere.
Animation-safe slide transition
The panel transitions only transform, staying smooth in every framework export including Tailwind.

About this UI Snippet

Feedback Tab Widget — Docked Tab, Mood Rating & Slide-Out Panel

Screenshot of the Feedback Tab Widget snippet rendered live

The little vertical "Feedback" tab clinging to the edge of the screen is one of the most common, lowest-friction feedback-collection patterns on the web — always visible, never blocking content, and a single click away from a real response. This snippet builds the complete widget: a rotated docked tab, a slide-out panel with an emoji mood scale and optional comment, and a thank-you confirmation state.

A genuinely rotated tab, not a sideways label

The tab button is rotated -90° with transform: rotate(-90deg) and a transform-origin anchored to its right edge, then nudged back into the viewport with a paired translateY. This two-step transform (rotate, then translate in the *original* axis before rotation takes effect) is the standard trick for a vertical edge tab whose text reads top-to-bottom while the button itself still occupies normal horizontal layout space before rotation — get the order wrong and the tab flies off-screen.

Mood scale before the comment box

Four emoji buttons (😞 😐 🙂 😄) let a user register a quick sentiment in one tap, with the submit button staying disabled until a mood is picked — the comment textarea is explicitly optional, since requiring free-text feedback is the single biggest reason these widgets get ignored. Picking a mood lifts and scales the chosen button slightly and tints its border, giving immediate visual confirmation of the selection.

Slide-out panel, not a centered modal

The panel itself slides in from the right edge with transform: translateX(100%) → translateX(0) on a cubic-bezier ease, rather than appearing as a centered dialog — this keeps it visually tethered to the docked tab it came from, reinforcing where it will return to on close, and avoids fully obscuring the page the way a centered modal would.

A real thank-you state, not just a closed panel

Submitting swaps the form body for a checkmark and thank-you message *inside the still-open panel* for 1.7 seconds before the panel closes and silently resets behind the scenes — so the user gets confirmation their feedback was received, rather than the panel just vanishing the instant they click Send, which would read as if nothing happened.

Escape key and backdrop dismissal

Both a backdrop click and the Escape key close the panel via the same closePanel() function used by the explicit close button, keeping every dismissal path consistent and giving keyboard users a way out without hunting for the small ✕ button.

Why a docked tab beats a delayed popup

Many feedback tools instead show an unannounced modal a few seconds after page load, which reads as an interruption and gets reflexively closed. A persistent, low-profile docked tab puts the same control within reach without ever demanding attention — it's there when a user wants it and invisible to their workflow otherwise, which is why this pattern shows up across documentation sites, SaaS dashboards, and support widgets that care about response rate without being intrusive.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA page renders with a rotated "Feedback" tab docked to the right edge of the viewport.
  2. 2
    Click the tabA panel slides in from the right with a four-emoji mood scale and an optional comment textarea.
  3. 3
    Pick a moodTap an emoji to register your sentiment — it lifts and highlights, and the Send button becomes enabled.
  4. 4
    Add a comment (optional) and submitType anything you like, then click "Send feedback" to see the thank-you confirmation appear in place.
  5. 5
    Watch it auto-close and resetAfter showing the thank-you message briefly, the panel closes and silently resets for the next visit.
  6. 6
    Wire up the real submissionSend moodValue and the textarea's value to your feedback or analytics endpoint inside the submit handler, before showing the thank-you state.

Real-world uses

Common Use Cases

SaaS product feedback collection
An always-available, low-friction way for users to share sentiment without leaving the page they're on.
Beta and early-access programs
Collect quick mood + comment feedback from testers throughout a beta period instead of a single end-of-beta survey.
Documentation and help-center pages
Ask "was this page helpful?" with the same mood-scale pattern at the end of an article.
Internal tools and admin dashboards
Give employees a always-visible channel to flag friction in internal software without filing a formal ticket.
Marketing and landing pages
Gauge visitor sentiment passively, pairing with an NPS survey for a deeper periodic check-in.
Learning docked-tab and slide-panel patterns
A reusable reference for the rotate+translate edge-tab trick and a source-tethered slide-out panel.
Related: Accessible Modal Primitive with Real Focus Trap
See the Accessible Modal Primitive with Real Focus Trap for a related modals pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Inside the submit click handler, before swapping to the thank-you view, send moodValue and document.getElementById('ftwText').value in a fetch POST to your feedback API or analytics tool — keep the UI swap so users get confirmation even while the request is in flight.

Add a "Attach screenshot" button that calls a capture library (or the experimental getDisplayMedia API) on click, store the resulting image/blob, and attach it to the same submission payload alongside the mood and comment.

For the left edge, change right:0 to left:0 and flip the rotation to rotate(90deg) with a matching transform-origin adjustment; for the bottom, drop the rotation entirely and position the tab with bottom:0 and an upward-sliding panel instead.

After a successful submit, store a flag in sessionStorage (or localStorage for persistence across sessions) and check it on load — if set, you can hide the tab entirely or show a "You already gave feedback — thanks!" state instead of the form.

In React, track panelOpen, mood, and submitted in useState and conditionally render the body vs. thank-you view; in Vue, use ref()/reactive(); in Angular, use component fields with *ngIf. The rotate+translate tab styling and slide-panel transform are pure CSS and need no changes across frameworks.