Please Note: We are no longer using forums to facilitate standard support. 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.

Text field beside question instead of below

  1. Can someone tell me how I can move the text field to the right of the question instead of below it? Below it makes the form too lengthy.

    Posted 4 years ago on Sunday January 9, 2011 | Permalink
  2. Are you referring to the field label? You would rather have labels next to the field rather then above? If so this is the label placement. You can change this by editing Form Settings and then selecting Left Aligned for the Label Placement.

    See this documentation:

    http://www.gravityhelp.com/documentation/form-settings/

    Posted 4 years ago on Sunday January 9, 2011 | Permalink
  3. If by "question" you mean form label, you can click on the form title to open the form settings dialog and under the first "properties" tab you'll see an option for "label placement" - choose "left label" save your form and you should be good to go.

    screenshot: http://grab.by/8hJ4

    Posted 4 years ago on Sunday January 9, 2011 | Permalink
  4. Ah...thanks. Maybe you kind folks can answer another question. If I want to change stuff like far a multiple choice box is from its pre-determined responses, would that be in admin-stylesheet or stylesheet or ? I just will tinker with stuff that may be it until I find it...unless someone has an easier method?

    Posted 4 years ago on Sunday January 9, 2011 | Permalink
  5. Actually scratch that...changing it to left aligned looks better for multi-choice spacing... except now the question column is too narrow and the text blox column too much empty space to the right...my page is setup with no sidebars so not sure why it's not spreading out better. I wish I knew PHP better but I do my best!

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  6. If you would like to post a link to your form page, I'll be happy to look at it. Most likely, the width isn't a PHP/sidebar issue, it's just the max-width property on the form wrapper.

    I'm guessing without seeing it, but you can try adding this to your theme stylesheet and see if it fixes the problem for you.

    body .gform_wrapper {max-width:98%!important}

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  7. Thanks! I will try it. Here's a temp page for the form I'm working on:
    http://www.larabbits.org/test/volunteer/volunteer-application/

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  8. I didn't see that that changed anything. Replaced custom.css in my themes custom folder.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  9. My bad code...I fixed it. That does look a bit better.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  10. I see you're using Thesis and are having the weird checkbox/radio input sizing issue. Thesis sets a width of 40% for ALL form inputs - this includes checkboxes & radio buttons. That's why you see the weird spacing.

    screenshot: http://grab.by/8hNm

    Add this to your custom.css. It should fix that issue for you as well.

    body .gform_wrapper .gfield_checkbox li input[type="checkbox"],
    body .gform_wrapper .gfield_radio li input[type="radio"],
    body .gform_wrapper .gfield_checkbox li input {width:auto}

    screenshot: http://grab.by/8hNh

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  11. On my screen the left column is still too narrow even at 100%. Here's what I did:
    body .gform_wrapper {max-width:100%!important; font-size: 12px}

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  12. You'll have to increase the width percentage of the left labels up from 29% to whatever you want.

    body .gform_wrapper .left_label .gfield_label,
    body .gform_wrapper .right_label .gfield_label {
        width: 50%;
    }

    Then you'll have to increase the left margin for the field elements up from 32% to whatever.. basically any element that you see with a "margin-left:32%" will have to be adjusted as well.

    body .gform_wrapper .left_label ul.gfield_checkbox,
    body .gform_wrapper .right_label ul.gfield_checkbox,
    body .gform_wrapper .left_label ul.gfield_radio,
    body .gform_wrapper .right_label ul.gfield_radio  {
        margin-left: 53%;
    }

    After that, you may find that you have to tweak the input sizes for everything to fit. All of these are sized to work together so it requires changes in several places to resize everything appropriately.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  13. THANK YOU for the checkbox fix...looking at the width issue now.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  14. I like how it looks now
    http://www.larabbits.org/test/volunteer/volunteer-application/

    EXCEPT I don't like what it did to the contact info section at top. How can I leave that alone and still make these other changes?

    body .gform_wrapper .left_label .gfield_label,
    body .gform_wrapper .right_label .gfield_label {
        width: 30%; text-align:right
    }
    body .gform_wrapper .left_label ul.gfield_checkbox,
    body .gform_wrapper .right_label ul.gfield_checkbox,
    body .gform_wrapper .left_label ul.gfield_radio,
    body .gform_wrapper .right_label ul.gfield_radio  {
        margin-left: 40%;}
    Posted 4 years ago on Monday January 10, 2011 | Permalink
  15. Name Format > Normal is grayed out...if it were not perhaps I could make the field smaller as a single line? The address form fields I also do not see how to make small.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  16. If you only want these adjusted rules to apply to certain fields instead of all of them, you will need to view the source and get the unique ID of containing list element you want to apply the revised rules to. Then, you'll have to target those using CSS inheritance specifically by ID rather than just applying the new properties to the shared classes.

    Here's an example of targeting a specific field using inheritance from the parent list element.

    body .gform_wrapper .left_label li#field_1_7 .gfield_label, body .gform_wrapper .right_label li#field_1_7 .gfield_label {width:50%; color:red}

    screenshot: http://grab.by/8hUa

    You also don't need to apply the "text-align:right" rule to the label, you can simply select "right label" in the form options and it does this for you.

    If you want to change the specific pieces of the advanced/multi-field groups like the address field, you can refer to this guide to show you how to properly target them via CSS.

    http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  17. I hate to ask you this, but I'm not sure how to find the unique id's for the contact info section to move it back to the left. Can you provide the code for me? I'll keep trying maybe I'll figure it out but if you see a bunch of space to the left I didn't! :-)

    Also, is there a way to make the address fields smaller? It's not under Advanced like the others.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  18. It's official...I have no idea what I'm doing :-) Based on what you gave me this is what made sense to me but it didn't do squat:

    /* gravityforms adjusting contact info area */
    body .gform_wrapper .left_label li#field_1_1 .gfield_label,
    body .gform_wrapper .right_label li#field_1_1 .gfield_label
    body .gform_wrapper .left_label li#field_1_2 .gfield_label,
    body .gform_wrapper .right_label li#field_1_2 .gfield_label
    body .gform_wrapper .left_label li#field_1_3 .gfield_label,
    body .gform_wrapper .right_label li#field_1_3 .gfield_label
    body .gform_wrapper .left_label li#field_1_4 .gfield_label,
    body .gform_wrapper .right_label li#field_1_4 .gfield_label
    body .gform_wrapper .left_label li#field_1_5 .gfield_label,
    body .gform_wrapper .right_label li#field_1_5 .gfield_label
    body .gform_wrapper .left_label li#field_1_6 .gfield_label,
    body .gform_wrapper .right_label li#field_1_6 .gfield_label
    {width:10%
    }
    Posted 4 years ago on Monday January 10, 2011 | Permalink
  19. You were close but your CSS rules had a couple of syntax errors. If you'll notice, the snippet you posted above is missing a couple of commas between the different elements your targeting.

    This works

    /* gravityforms adjusting contact info area */
    
    body .gform_wrapper .left_label li#field_1_1 .gfield_label,
    body .gform_wrapper .right_label li#field_1_1 .gfield_label,
    body .gform_wrapper .left_label li#field_1_2 .gfield_label,
    body .gform_wrapper .right_label li#field_1_2 .gfield_label,
    body .gform_wrapper .left_label li#field_1_3 .gfield_label,
    body .gform_wrapper .right_label li#field_1_3 .gfield_label,
    body .gform_wrapper .left_label li#field_1_4 .gfield_label,
    body .gform_wrapper .right_label li#field_1_4 .gfield_label,
    body .gform_wrapper .left_label li#field_1_5 .gfield_label,
    body .gform_wrapper .right_label li#field_1_5 .gfield_label,
    body .gform_wrapper .left_label li#field_1_6 .gfield_label,
    body .gform_wrapper .right_label li#field_1_6 .gfield_label {width:10%; color:red}

    screenshot: http://grab.by/8i9G

    As far as the address block, no, there isn't a size option in the form editor since this is a group of fields and not a single input. If you want to change the field sizes, you'll have to target the field using CSS inheritance based on it's parent containers. Again, you can refer to the CSS targeting examples I linked up earlier for the proper way to do that.

    Posted 4 years ago on Monday January 10, 2011 | Permalink
  20. Hello,

    I am new to Gravity Forms and I have a couple of questions. Here is my test website: http://topnotchdoc.com/?page_id=2

    • I am trying to add a logo image in the top of my form. How do I do this? What CSS do I target? Can I add my own Div Ids to specify logo or something similar? I am trying to accomplish something similar to this: http://topnotchdoc.com/forms/spine_quiz_p2.php

    • I am setting up a multipage form where each page may have a different background image. In the example above, I have a background image and I have adjusted the position of each checkbox. This question is two fold:
    1.) how can I place the background image in only the one page using a style element?
    2.) What CSS elements are responsible for positioning only the check boxes on this page?

    Here's a sample of the CSS I wrote:

    body .gform_page_2 .pain_form {background-color:#DFEFFF; background-image:url(http://topnotchdoc.com/wp-content/plugins/gravityforms/images/body-front.png); background-repeat:no-repeat; background-position: 50% 0;
    }

    The .pain_form is the CSS Class Name I used for that page.

    • Finally, I really need to have the results of the form show up on a webpage for the user to review at the end of their quiz, then allow them to email the results to a sponsor. Can this be done?

    Posted 3 years ago on Thursday December 15, 2011 | Permalink
  21. @streamcities please start a new topic for your issues. They're unrelated to this topic and deserve individual attention. You can copy and paste from here and then I will remove this post. Thank you.

    Posted 3 years ago on Thursday December 15, 2011 | Permalink
  22. Where do I start a new topic?

    Posted 3 years ago on Monday December 19, 2011 | Permalink
  23. @streamcities You would go to the appropriate support forum that is specific to what you need support with, scroll down to the bottom of the page and there is a form for adding a new topic.

    If you need assistance with Gravity Forms itself that main forum page is here:

    http://www.gravityhelp.com/forums/forum/gravity-forms

    Then scroll to the bottom of the page and add your own support topic and ask your question/detail your issue.

    Posted 3 years ago on Monday December 19, 2011 | Permalink

This topic has been resolved and has been closed to new replies.

Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only