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.

Text field beside question instead of below

Gravity Support Forums » Plugin Support » Gravity Forms

  1. larabbits
    Member

    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 13 years ago on Sunday January 9, 2011 | Permalink

  2. Carl Hancock
    Administrator

    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 13 years ago on Sunday January 9, 2011 | Permalink

  3. Kevin Flahaut
    Administrator

    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 13 years ago on Sunday January 9, 2011 | Permalink

  4. larabbits
    Member

    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 13 years ago on Sunday January 9, 2011 | Permalink

  5. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  6. Kevin Flahaut
    Administrator

    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 13 years ago on Monday January 10, 2011 | Permalink

  7. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  8. larabbits
    Member

    I didn't see that that changed anything. Replaced custom.css in my themes custom folder.

    Posted 13 years ago on Monday January 10, 2011 | Permalink

  9. larabbits
    Member

    My bad code...I fixed it. That does look a bit better.

    Posted 13 years ago on Monday January 10, 2011 | Permalink

  10. Kevin Flahaut
    Administrator

    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 13 years ago on Monday January 10, 2011 | Permalink

  11. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  12. Kevin Flahaut
    Administrator

    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 13 years ago on Monday January 10, 2011 | Permalink

  13. larabbits
    Member

    THANK YOU for the checkbox fix...looking at the width issue now.

    Posted 13 years ago on Monday January 10, 2011 | Permalink

  14. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  15. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  16. Kevin Flahaut
    Administrator

    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 13 years ago on Monday January 10, 2011 | Permalink

  17. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  18. larabbits
    Member

    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 13 years ago on Monday January 10, 2011 | Permalink

  19. Kevin Flahaut
    Administrator

    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 13 years ago on Monday January 10, 2011 | Permalink

  20. streamcities
    Member

    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:

    [css]
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 12 years ago on Thursday December 15, 2011 | Permalink

  21. Chris Hajer
    Key Master

    @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 12 years ago on Thursday December 15, 2011 | Permalink

  22. streamcities
    Member

    Where do I start a new topic?

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

  23. Carl Hancock
    Administrator

    @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 12 years ago on Monday December 19, 2011 | Permalink

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