Automattic / Automattic/jetpack

Subscription form: Move label out of email input

Open
#11,863 1 comment 2 reactions 0 assignees View on GitHub
[Block] Subscribe [Focus] Accessibility [Focus] Blocks [Pri] Normal Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

Right now, the label for the Subscription form email input is in the input itself. This is not great. We should move the label to be a proper label and instead of a placeholder in the email input.

Here is what it looks like now:

![image](https://user-images.githubusercontent.com/1123119/49599254-c6e4ba00-f93d-11e8-8ef8-08ac78974878.png)

Instead, it should behave more like the Contact Form shown here:

![image](https://user-images.githubusercontent.com/1123119/49599301-e11e9800-f93d-11e8-9ec3-7cd22b82c544.png)

This will possibly break some styles, but will be an improvement for accessibility.

Contributor guide

Open the contributing guide

Research direction

Locate the Subscription form's email input and compare its current label and styling with the Contact Form shown in the issue. Move the label out of the input, remove the placeholder-style label, and verify that the resulting form remains usable and accessible without breaking its styles.

Written by the indexing model from the issue text.

Assessment

Tech stack
php
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.