The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Where are the label's on the checkout form?

carlos123carlos123 Member
in Help edited September 2014
Okay...

I've gotten rid of step 3 (it was superflous) and the step 4 heading (also superflous and a bit confusing with step 3 heading gone).

Now I would like to place true labels in front of all the fields I can rather than relying on the placeholders you guys are using in place of some labels.

But after looking and looking I can't find the place in the code (among all the Twiggly stuff) where the existent labels for 'Name' and 'Address' are so that I can figure out from how those are done how to put in the rest of the labels I want present.

Could someone please give me a hint or two as to where the labels are in the templates? I mean the checkout.inc.twig template and perhaps the cart.inc.twig template? I just need a line number and I can go from there.

Incidentally...I would highly recommend that the checkout NOT use placeholder text in place of true labels.

Here is more on that if you are interested in why...

http://www.nngroup.com/articles/form-design-placeholders/
https://longhandpixels.net/blog/2014/02/html5-placeholder-label-search-forms?PageSpeed=noscript
http://www.pardot.com/faqs/best-practices/placeholders-and-labels/

Carlos





Comments
  • fc_adamfc_adam FoxyCart Team
    @carlos123,

    Actually, every field does have a valid label element present - we are hiding them using CSS. You can certainly overwrite that CSS to bring them back in to be visible as you'd like. If you inspect the code using a browser inspection tool - you'll see the label present alongside each input. Inspecting the label's applied CSS will show you the CSS we're using to hide them.
  • Hmm...easier said than done Adam.

    There are over 5000 lines of CSS code!

    The line that has the Name label shows the following in the browser code inspector:
    <label class="fc-form-label fc-form-label--billing-address1 fc-container__grid--label--address">Address</label>
    

    So we have the following CSS classes:

    fc-form-label
    fc-form-label--billing-address1
    fc-container__grid--label--address

    Doing a simple search for each label to try and find where the "display: none" is at so that I can change it to "display: block (or other display attribute that will show the label" I find that there are (bear in mind that the Address label is already displayed...I am trying to get a handle on where the CSS class might be that is hiding the rest of the labels as you mentioned in your response):

    110 instances of the fc-form-label
    NO instances of fc-form-label--billing-address1 (useless class??)
    13 instances where fc-container__grid--label-address is part of a CSS class name.

    Worse, the CSS is in a form that is very hard to read in that the class names are often jumbled together and not separated by newlines as in...
    #fc .fc-receipt__section--multiship-shipping-information, #fc .col-md-6, #fc .col-lg-6, #fc .col-xs-7, #fc .col-sm-7, #fc .fc-cart__items--without-images .fc-cart__items__header__item, #fc .fc-cart__item__details-and-image, #fc .col-md-7, #fc .col-lg-7, #fc .col-xs-8, #fc #fc-cart--fixed-width .fc-cart__items--with-images .fc-cart__item__details, #fc .fc-cart__items--with-images .fc-cart__items__header__item, #fc .fc-container__grid--postal-code-actions, #fc .fc-postal-code-entry__without-search .fc-container__grid--region, #fc .fc-container__grid--input--po, #fc .fc-container__grid--input--address1,
      #fc .fc-container__grid--input--multiship-select, #fc #fc-receipt-container fieldset .fc-form-group div[class*="fc-container__grid--static-input"], #fc .col-sm-8, #fc #fc-cart--responsive .fc-cart__title, #fc #fc-cart--responsive .fc-cart__main__content, #fc .fc-container__grid--use-different-address, #fc .fc-checkout__main__contents, #fc .fc-container__grid--input--customer-email, #fc .fc-container__grid--input--company, #fc .fc-container-checkout__grid--postal-code, #fc .col-md-8, #fc .fc-checkout__main__contents, #fc .fc-container__grid--payment-method,
    

    That's only SOME of seemingly hundreds of class names that are affected by the CSS that is tied to them.

    Trying to wade through that is like trying to wade through a jumble of scrambled jigsaw pieces looking for the one piece one is after.

    Any suggestions as to how I might be better able to find the CSS that is hiding the labels that you mentioned Adam? I'll keep trying on my own but I figured you might have some additional tips that might save me time trying to find it on my own.

    Carlos
  • As a side note, come to think of it, I don't understand why there is SO much CSS tied to the display of a simple checkout form. This makes it rather difficult for one's like me to try and change things. If someone is not at least moderately experienced in CSS it will make it impossibly complicated.

    I don't know if it is possible or even advisable, since I don't know the internal workings of how you all do things, but it would seem worthwhile to try and narrow the included CSS to only that which is absolutely needed for the display of the checkout template and no other. It appears that ALL the CSS in use for any page that is ever displayed or might be displayed has been rolled into one HUGE CSS file. I don't know if that is true or not but that seems to be the case.

    That makes modification of the CSS for just the checkout more difficult than it needs to be.

    For what it's worth.

    Carlos
  • fc_adamfc_adam FoxyCart Team
    @carlos123,

    The CSS you are seeing is indeed all of our CSS minified and brought together into a single file. We've done that to make the page load quicker - as it's only loading a single file and the size of that file is as small as it can currently be.

    Our CSS is currently using the Twitter Bootstrap library as a base that we have built on. We didn't want our HTML tied to one single library though, so we've built our own classes loosely following the BEM naming convention and have used SASS to extend the Bootstrap styles into our own. That is why the CSS can look confusing or cumbersome in parts as we're combining Bootstrap with our class structure.

    NO instances of fc-form-label--billing-address1 (useless class??)

    There will be instances of classes that aren't being used on our side - but they're present to make it easier for developers to style a specific element. We've tried to make that as open and flexible as possible - to allow you to style a specific element without having to modify the template.

    Any suggestions as to how I might be better able to find the CSS that is hiding the labels that you mentioned Adam?

    So I wouldn't suggest doing a search on the raw CSS document for classes to take this kind of approach. What we suggest is to use an inspection tool like the ones that @cheesypoof linked to above. I generally use Chrome, but I think all the large browsers will include a console and inspection tool in built. These allow you to inspect a specific element on the page, and it will show you the styles that are applying to that element to make it behave the way it is.

    For example, looking at one of the hidden labels, these are the styles making them hidden:
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    

    You could undo that by applying styles like this:
    position: initial;
    width: auto;
    height: auto;
    margin: 0px;
    clip: auto;
    

    I hope that helps!
  • Hi Adam,

    I am reviewing all the posts that I may have missed responding to and this is one that I do want to get back to.

    I didn't realize that you all were not using display: hidden; as the CSS to hide the labels. That is partly why I couldn't find it. None of the places where 'display: hidden' was to be found seemed to hide labels of any kind.

    I will look afresh.

    Someone mentioned using the inspector tools within the browser and while I concur that such is indeed a great thing to do, I am familiar with how to use the inspector and it didn't help much at all.

    How am I supposed to click on a label onscreen that is hidden, through the inspector so as to see the CSS that applies to it? I can't. The label isn't visible to click on it.

    Perhaps someone knows of a trick to using the inspector to view the CSS of hidden items that don't appear on screen that I don't know about. I would appreciate hearing about that trick if anyone knows such a thing.

    It doesn't seem as easy to find the appropriate CSS as you all are saying it is - even through a browser inspector. I could be wrong mind you but that is what it seems like to me.

    Carlos
  • Hmm...well...I was able to show the hidden labels alright but...sad to say...the appearance of the form is now more confusing and not less in my opinion. With some labels being to the left of fields and some above the fields.

    With the appearing and disappearing fields that happen once in a while on the form depending on user actions it's going to be quite confusing indeed.

    I'll just leave the checkout labels the way they are by default.

    Thanks for your input Adam.

    Carlos

  • fc_adamfc_adam FoxyCart Team
    How am I supposed to click on a label onscreen that is hidden, through the inspector so as to see the CSS that applies to it? I can't. The label isn't visible to click on it.

    The trick there is having an idea of where the field you're looking for should be within the markup. So for example, the hidden labels will be in the near vicinity of the matching input. In that case, you inspect that input, and then in the inspection tool view the markup around it. You can then find the label that way, and click it to inspect the CSS that is applying to it.
  • Makes sense Adam. I'll try that next time.

    Thanks for the tip.

    Carlos
Sign In or Register to comment.