2025-10-25 by Mark Voorberg

Show Form Fields Bookmarklet

blog-details-image
Photo by Danny Meneses: https://www.pexels.com/photo/photo-of-turned-on-laptop-computer-943096/

Ever needed to debug a web form and wished you could instantly see all the field names and hidden values? This bookmarklet makes it easy!

Quick Start - Drag & Drop Installation:

  1. Make sure your bookmarks bar is visible (press Ctrl+Shift+B in most browsers)
  2. Drag the green button below to your bookmarks bar
  3. Navigate to any webpage with a form
  4. Click the bookmark to reveal all form field names and hidden fields

👇 Drag this to your bookmarks bar:

📝 Show Form Fields

What it does:

  • Adds a red dotted border around all forms on the page
  • Shows yellow labels above all input fields, selects, and textareas with their name
  • Reveals green inputs for hidden fields showing their value
  • Works on any webpage with forms - perfect for debugging, web scraping prep, or forms analysis
  • Completely non-destructive - the form will still work with labels and simply refresh the page to clear them

How It Works

This bookmarklet is just a small piece of JavaScript that you can run on any page you visit. Here's the readable, editable, un-minified version (edit it to suit your needs!):

Comments in the code may break the bookmarklet! Only single line comments are removed during minification.

Code Breakdown:

  • Selects all forms and adds a red dotted border to each one
  • Selects all input, select, and textarea elements on the page
  • Prevents duplicate labels if you run the bookmarklet twice
  • Gets the field's name (or ID, or shows "(no name)" if neither exists)
  • Creates a styled yellow label showing each field name
  • Inserts the label right before the input field in the DOM
  • Finds all hidden input fields
  • Reveals hidden fields by changing their type to text

💡 Customization Ideas:

Edit the code above to:

  • Change the #ffeb3b color to match your preferred highlight color
  • Modify the label format (e.g., show only names, add IDs, include attributes)
  • Filter specific field types (e.g., only show password fields or email inputs)
  • Add validation indicators or field value previews
  • Export field names to console or download as JSON

Create Your Own Bookmarklet

Edit the code above to customize it, then use the buttons below to generate your bookmarklet:

💡 Using the Minified Code:

  1. Edit the code above to customize behavior (change colors, text, add features, etc.)
  2. Click "🔧 Generate Minified Bookmarklet" to minify your edited code
  3. Click "📋 Copy to Clipboard" to copy the minified bookmarklet
  4. Create a new bookmark in your browser (Ctrl+D or Cmd+D)
  5. Paste the code as the URL/Location field
  6. Give it a name like "Show Form Fields"
  7. Click "🔄 Reset to Original" anytime to restore the default code

Use Cases

  • Web Development: Debug forms during development
  • Testing: Verify that form fields have correct names and attributes
  • Web Scraping: Quickly identify field names before writing scraping scripts
  • Security Analysis: Discover hidden fields that might contain sensitive data
  • Automation: Map out form structure before creating automation scripts

Note: This bookmarklet only runs on the current page and doesn't send any data anywhere. All processing happens locally in your browser. Refresh the page to remove all labels.

next Previous

LET’S WORK TOGETHER