I'm working on a promo code entry field and want to give feedback to the user for both a valid and invalid entry. I want to show feedback near the input but does having the icons inside of the field present an issue?

enter image description here

-Promo codes are fixed length (5-9 characters)

  • 2
    I don't see anything wrong with your design.
    – Alan
    Dec 19, 2017 at 21:41

3 Answers 3


I'd be careful, specifically with the "×" in the input field. Some users may be familiar with input fields that contain a "×" to clear the input.

For example, some browsers interpret a standard <input type="search"/> as a field with a "×" to clear the input.

Seen here in Chrome:

search input field

I agree that the aesthetics are nice, but I think it could look just as nice outside, perhaps before your error message?

ⓧ The promo code you entered is invalid. Please try again.

Alternatively, you could actually wire up the "ⓧ" to clear the input, and viola, solved that problem.

  • 1
    Just realized I typed "viola" instead of "voilà". I think I'm going to leave it though. Dec 21, 2017 at 21:03

the current design looks great, Also in my opinion when dealing with promo codes its important to provide the user a sense of satisfaction. hence feedback should tell you that

  • The action has been successful
  • and how much money was saved

and both needs to be shown in a more presentable manner. not sure if your system allows removal , if yes you can find the same in the mock

please find the mocks below

enter image description here


I've seen it done both ways before but it usually depends if its on mobile or desktop (you are not specifying which one it is)

Here you can find a topic debating something similar: Inline validation icon usability

Here you can find a research regarding the same topic: http://alistapart.com/article/inline-validation-in-web-forms

I do see some minor changes you might want to consider (though they are not on the scope of your question)

  1. Make sure the field text is of similar width to the expected input. (I think you've done this to certain degree, just making sure it was not just because of a quick mockup)
  2. Denote the cupon is an optional field in case it is
  3. The placeholder text could show an example cupon instead of "Optional promo code"
  4. Give users the option to remove the cupon once they added it. Sometimes you just don't see the point of using it after seeing the discount!
  • 1
    2. The label reads "Optional offer code". I think that's sufficient. 3. If I saw an example coupon as placeholder text, I might think there was a coupon already applied, or somehow maybe I automatically got a free coupon, or I just have to type that example one and apply it, or it's already there and I just have to apply it, or.... Dec 19, 2017 at 20:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.