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.

Custom Field Size

  1. dn11233455
    Member

    I got Gravity Forms today and I am still not sure what to make of it. My biggest problem is that I have absolutely no frontend way to change the position of the labels or the size of the textboxes. I know this can be done with CSS, but is there any way to do it in the frontend? Considering I was able to do with with Contact Form 7 I just figured it would be a feature but it is not. It may seem trivial, but in many cases my forms need to be a certain size and when the zip code field is twice as big as it should be (even when set to the small field size) and when I have no way to set a max length on anything it gets incredibly annoying. I could do the styling with CSS, but I have multiple forms and I don't want to have to write CSS code every single time (after all I bought this plugin for its ease of use). Is there any quick frontend way to change the size to a custom (not preset) value? If not, is there a plugin I can use?

    Posted 12 years ago on Saturday June 23, 2012 | Permalink
  2. dn11233455
    Member

    I figured out how to set the maximum length. I just had to use a standard text field. Still no easy way to position or resize the boxes, but I like just about everything else about Gravity Forms.

    Posted 12 years ago on Saturday June 23, 2012 | Permalink
  3. You will need to resort to CSS for custom width sizing if the preset sizes don't work for you. You can do this globally by applying a class to each of the fields and setting the style one time (which, to me seems a lot easier in the long run as you make more forms - to just drop a class in that is defined in your stylesheet, rather than recreating it in the admin each time).

    Not sure what your goal is for positioning, but we have these ready classes for use:
    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    Posted 12 years ago on Sunday June 24, 2012 | Permalink
  4. triceratops
    Member

    Thanks! Putting this in style.css worked ....

    [css]
    #input_2_7_3 {
    width: 30% !important;
    }
    #input_2_7_6
    {
    width: 30% !important;
    }

    Just one final question if you don't mind. I would like to move the last name field to the left so ther isn't a big space in between the two fields. Is there an easy way to do this?

    Thanks
    Mark

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  5. Mark, do you have a link to your form?

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  6. triceratops
    Member

    Here it is ...
    http://www.starlightstudio.jp/wordpress/?page_id=54

    Thanks.

    Posted 12 years ago on Friday July 6, 2012 | Permalink
  7. Try placing this:

    [css]
    #input_2_7_6_container {
    float: none;
    }
    Posted 12 years ago on Friday July 6, 2012 | Permalink
  8. triceratops
    Member

    Thanks.
    That just moved it a few pixels to the left unfortunately. Anything else I could try?

    Mark

    Posted 12 years ago on Saturday July 7, 2012 | Permalink
  9. Place both of these, adjust the width as necessary:

    [css]
    #input_2_7_3_container {
    width: 25%;
    }
    #input_2_7_6_container {
    float: none;
    }
    Posted 12 years ago on Saturday July 7, 2012 | Permalink