Inconsistent and hard to read placeholders used in connector forms

[mikecote]

I was brought up by @gchaps (here #80657 (comment)) that our placeholders are inconsistent and that some of the values are hard to read. I'm opening this issue to discuss what consistency we want to use.

@mdefazio discussed a bit with the design team and while they don't have guidelines yet but agree the text needs to be very clear that it is not pre-loaded data. For accessibility reasons, the text contrast may make it seem like it is pre-populated depending on our approach.

This allows a few options:

• Option 1: Using a prefix like Example: or ex: before the URL
• Option 2: Make it clear it's example data like https://example.com or your-site-url
• Option 3: Other?

[elasticmachine]

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

[ymao1]

In projects I've worked on in the past, we've generally moved away from placeholder labels because they are hard to read and can be confused with form input. It seems like we only have placeholder text in form fields that require a URL value. Is that because we want users to remember to prepend an http or https? Would it be better just to have that as part of the form validation?

[mikecote]

From what I recall, there's no specific reason why we have the placeholders in place. Unless design (cc @mdefazio) wants us to keep the placeholders, I'm +1 on just removing them.

[mdefazio]

If the error validation message is clear that it's missing https then we can go ahead and remove them. However if this is the only validation requirement, it may be better to show a prepend label with https:// on the form. But I'm good seeing what kind of feedback we get here without placeholders and formalizing our design guidelines in parallel.