Form labels

Hi guys,

We had a series of failed transactions over the past couple of days (we launched on Wednesday), all with the error message 'City cannot be blank'. We actually made contact with one of these customers and he said that his browser had auto-completed his City in the postcode field. We tested and one person here was able to re-create the same. I realise this isn't necessarily a foxycart issue, but the problem is that because there are no visible field labels, once the placeholder text is removed, the user has no idea that anything is wrong - and they're evidently not always savvy enough to fix the problem themselves.

Our solution has been to add some styling to the head to force the labels to show up. This is what we've put in:
<style>

.fc-form-label {
position: static !important;
width: auto !important;
min-height: 38px !important;
text-align:left !important;
}

.fc-container__grid--label--name, .fc-container__grid--label--address {
width:25% !important;
font-weight: bold !important;
}

.fc-postal-code-entry__submit {
margin-top:36px !important;
}

</style>
This seems to work. However we hit one further snag wherein the Shipping Region field doesn't have a label in the template. Because this template is buried three levels down, this has meant we've had to create an entire check-out template (1811 lines long!) to fix one field label. Apart from being really nerve-wracking, this feels like a really messy solution to a tiny problem. We really need a better way of being able to edit templates - I'm not averse to creating our own Twig structure but currently we can't include our own templates, they all have to be pasted in place. You may have seen this related post which raises a similar issue.

The wider discussion in this case I think is to do with basic UX design - placeholders-only is a bad idea. Can we expect to see this addressed?
Comments
  • brettbrett FoxyCart Team
    edited February 2015
    @pumkincreative, that's an interesting situation. Do you know which browser or which autocompleter they were using? We tested as many as we could find before we launched 2.0, and we didn't see any errors like that.

    The placeholder-only approach is one we discussed at length, and ended up going with an approach that attempted to balance usability, accessibility, and aesthetics. We have the labels present for screen-readers, and on mobile we add the label above the field when the placeholder is hidden (while typing):
    [EDIT: wow, not sure why that image isn't displaying right. Here's the link: http://note.io/1D5q4z2]
    [Further Edit: We certainly are open to changing the defaults, but we didn't do the approach we did without regard to the article you shared.]

    That said, the missing label is a problem, and we'll fix that. Also, as it relates to needing to edit the whole template to override a portion: We have a fix for that, which is to use the embed functionality in Twig. That's a discussion we're actually having right now (and what @fc_adam hinted at in the other thread), and we have some code we'll roll out to add support. (The 2.0 default templates will need to be redone a bit to take full advantage, which might happen in 2.1, but it'll be available in 2.0 regardless.)

    At this point, as far as the missing label goes: If we get that added, would you at least get you closer to what you're after?
  • brettbrett FoxyCart Team
    @pumkincreative, heads up that we've got the labels added and waiting for QA on our end. We'll update this thread when that goes to production. Thanks so much for bringing this up, and sorry for the issue.
  • Thanks for the update Brett, you guys are really refreshingly responsive! Will look forward to more news
Sign In or Register to comment.