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.

Set Label Field Position and Setting 2 Forms Next to Eachother

  1. Hi,

    I tried the search but that didn't work out for me, not sure why. The form I am trying to edit is;
    http://gepiept.nl/wp/plaats-een-klusje

    If you'll click through you'll see the field I want to change about halfway the page; the 2 dropdowns with field label: "Deze klus moet worden uitgevoerd op" and "om". I am trying to

    - Set a icon for this field (if you could point me in the right direction that would be great!)
    - Get the label field next to the input field
    - Getting those 2 fields next to each other

    So, ideally it would be like this;
    http://postimage.org/image/n9iqum38r/

    I was hoping to find the answer for the latter in http://www.gravityhelp.com/forums/topic/data-fields-in-same-row but that didn't work. Any help would highly be appreciated!

    Posted 7 years ago on Thursday December 20, 2012 | Permalink
  2. You can add the CSS Class Name "gf_inline" to the two drop downs on the advanced tab of the form builder. You can also add the CSS class of "left_label". The CSS Class Name field for both fields will then look like this:

    [css]
    gf_inline left_label

    Be sure to put a space between the two attributes.

    That will get the two fields side by side, with the label on the left.

    You might have to add an HTML field right before the first drop down, with this content:

    [html]
    <br style="clear:both;" />

    Please explain what icon you want to use and where you want to show up, for which fields. Thank you.

    Posted 7 years ago on Thursday December 20, 2012 | Permalink
  3. Thanks for the reply, it worked partially. Because of the length of the first label field it get's misaligned, is there any way around this?

    The icon would purely be for clarification and decoration, to style the form a bit. I would like the icons to appear in front of the Label Fields. Example; http://postimage.org/image/446pox3w5/

    Posted 7 years ago on Thursday December 20, 2012 | Permalink
  4. Can you make the change on the live page and post the link again so we can see the progress? We can help with the additional CSS required. I received a 404 Not Found error when trying to access the initial link you posted.

    Posted 7 years ago on Saturday December 22, 2012 | Permalink
  5. Yeah I changed something in the functions.php .. which i shouldn't have done haha ;p It's back online now > http://gepiept.nl/plaats-schoonmaak-klusje/

    Thanks for the support! It took me 2 days of pondering whether I needed GF but seems like to have been a good choice :)

    Posted 7 years ago on Sunday December 23, 2012 | Permalink
  6. The width of the left label is set to 29% by Gravity Forms. You can override this by adding this CSS to your theme's style.css:

    [css]
    body .gform_wrapper .left_label .gfield_label {
     width: 60%;  /* change this 60% to whatever width you want */
    }

    There may not be a good way to have the text not wrap onto two lines because the label has so much text. You might need to put the label in an HTML field above these drop downs, or maybe you can shorten the text.

    Posted 7 years ago on Sunday December 23, 2012 | Permalink
  7. It works, the second field label is overlapped by the field itself but that's okay. Thanks for the help Chris :)

    Got any thoughts on the icons? I tried adding a new CSS class and assigning that to specific fields but that didn't work, the code I tried;

    [css]
    #navlist
    {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    }
    
    #navlist li
    {
    padding-left: 10px;
    background-image: url(http://gepiept.nl/wp-content/uploads/2012/12/arrow.png);
    background-repeat: no-repeat;
    background-position: 0 .5em;
    }
    Posted 7 years ago on Friday December 28, 2012 | Permalink
  8. I could not get your form to load. The site comes up, but the page is blank. That is a different problem.

    However, if you added a class to the fields in the form builder of "navlist" then your CSS is incorrect. You are targetting ID not Class. Change #navlist to .navlist and it will apply to classes.

    Your CSS could be a little more specific as well, but the first problem is that you are targetting an ID rather than a Class, which is what Gravity Forms will add: a CSS class name.

    Posted 7 years ago on Saturday December 29, 2012 | Permalink