# Add Missing Labels to Form Fields From Their Placeholder

> Finds form fields on the page that have a placeholder but no label or accessible name and gives them one from the placeholder text, a common problem with theme and plugin forms.

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: forms, labels, aria
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-placeholder-to-label/

## Code

```html
<script>
(function () {
    function fix(root) {
        root.querySelectorAll('input[placeholder], textarea[placeholder], select[data-placeholder]').forEach(function (field) {
            if (field.type === 'hidden' || field.getAttribute('aria-label') || field.getAttribute('aria-labelledby')) { return; }
            if (field.id && document.querySelector('label[for="' + CSS.escape(field.id) + '"]')) { return; }
            if (field.closest('label')) { return; }
            field.setAttribute('aria-label', field.getAttribute('placeholder') || field.getAttribute('data-placeholder'));
        });
    }
    fix(document);
    if ('MutationObserver' in window) {
        new MutationObserver(function (records) {
            records.forEach(function (r) { r.addedNodes.forEach(function (n) { if (n.nodeType === 1) { fix(n); } }); });
        }).observe(document.body, { childList: true, subtree: true });
    }
})();
</script>
```

## Notes

A visible label is always better; use this as a safety net while you fix the forms themselves.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add Missing Labels to Form Fields From Their Placeholder" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/