PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to place required indicator asteriks to the left of labels

  1. URL of the form: http://www.thegolfclubatfallbrook.com/contact-us/

    Client likes to have the asteriks to the left of labels like this.

    Please advise.

    Posted 8 years ago on Wednesday June 1, 2011 | Permalink
  2. Not exactly per your screenshot, but you can float the astericks left to get this: http://grab.by/agfu

    [css]
    .page-id-29 .gform_wrapper .gfield_required {
      float: left;
    }
    Posted 8 years ago on Wednesday June 1, 2011 | Permalink
  3. The Asteriks (asterix) on our form are appearing below the question:

    Name
    *

    Have you seen this happen before? Our site is not live yet - what is the best way to show you this?

    Posted 7 years ago on Wednesday April 3, 2013 | Permalink
  4. Without seeing your form and inspecting the CSS, there's no way to know for sure. My guess is that the span element that contains the asterisk is inheriting a "display: block" CSS rule somewhere and that's forcing the asterisk to show in a "new line" if you will.

    Whenever you get a publicly accessible URL for your form, you can share that if you're still having problems and somebody will be able to tell you for sure.

    Posted 7 years ago on Wednesday April 3, 2013 | Permalink
  5. I am going to make the site live until tomorrow at 1:00 If you can take a look at this link. I am working with a graphic designer and we both do not have extensive knowledge of CSS so the more explicit you could be would be very helpful - http://elkspring.net/contactabout/

    Thanks!

    Posted 7 years ago on Thursday April 4, 2013 | Permalink
  6. Sorry, we were not able to check this out over the weekend. Without seeing the site live, we can't help you with the CSS to resolve your issue.

    Posted 7 years ago on Monday April 8, 2013 | Permalink
  7. Hello - our site is live and we created custom sidebars which I think are causing our issue. Do you have any suggestions for this? - Thanks

    http://elkspring.net/classes/

    My designer wanted me to note that our sidebars are made up of two types of code:
    1. HTML and graphics (text menu with social buttons)
    2. WordPress Shortcode (image slider)

    Posted 6 years ago on Thursday April 18, 2013 | Permalink
  8. Hey just checking in about the above request - it seems that the way our sidebars have been created it is causing the * for required questions to bump to the next line which is not very appealing. My developer is not sure what is causing this issue. Thanks

    Posted 6 years ago on Wednesday May 15, 2013 | Permalink
  9. @ElkSpring

    Hmm. This shouldn't be that difficult to sort out for a "developer".. the browser inspector tools make it pretty easy for developers to isolate markup and view the CSS properties being applied.

    Line 2572 of your theme's style.css file sets a float and 100% width property on every span inside the "content-text" container. Inheritance from that property/rule is causing your issue. When I disable that, you can see that the layout is corrected and displays as intended.

    screenshot: http://i.imgur.com/d9GZ8iY.jpg

    Your developer can craft a new, more specific CSS rule to override that one. Something like this should get you started.

    [css]
    body .content .wrapper .contact-text d.gform_wrapper form .gform_body .gform_fields .gfield label.gfield_label span.gfield_required {
    	float: none !important;
    	width: 10px;
    }

    Best of luck with it.

    Posted 6 years ago on Thursday May 16, 2013 | Permalink