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.

Style the form layout

  1. Golden
    Member

    Hello!
    After reading some awesome reviews of Gravity Forms capabilities and tech support, I just bought the license. I started with a personal license to test and then will happily upgrade to a developer license.

    I am building my first form and need help styling it. On this page you will see what I want the form layout to be- http://www.treasurefy.com/
    And here's how it currently is - http://www.treasurify.org/testing-gravity-forms/
    I know it looks very sad right now., hope fully soon we will add some good color to it.

    p.s. I am decent with HTML and a newbie with CSS

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  2. Do you intend on putting the form in a sidebar widget? If so, please do that, and select "Left aligned" for the Label Placement. That will get us closer to start. Go ahead and add in all your other form fields as well. Post when you have that done and we will take a look and help you with the CSS. No sense applying the CSS here since this is not where the form is going to live (or, is it?)

    Thanks

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  3. Golden
    Member

    Thanks for the quick response. I just updated the page to better reflect what the form will look like. In addition, I added another image that will better exemplify what I am looking for in a form. Lastly, those are all the fields that I want for this form.

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  4. To save some space, as shown in your image, you can use placeholders to put the labels inside the form fields. Please see this plugin: http://wordpress.org/extend/plugins/gravity-forms-placeholders/

    We will have a few more suggestions after you implement this.

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  5. Golden
    Member

    Done!

    Now how can I change the background color, font size and style, and increase the size of the text fields?

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  6. You can find examples for styling all of the form elements here..
    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    just add the new style rules to the end of your theme stylesheet.

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  7. Is that a sidebar on your page, or, how did you get the form embedded there? It does not look like the output of the Gravity Forms widget. Can you explain how you got the form where it is on the page now? I want to be sure we are targeting the correct elements.

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  8. Golden
    Member

    I did it through HTML coding; I created a a column that takes 1/4 of the width of the content area.

    Posted 6 years ago on Thursday October 25, 2012 | Permalink
  9. 1. I think I would use the Place Holder script to put the labels inside the form fields to save you more space: http://wordpress.org/extend/plugins/gravity-forms-placeholders/

    2. Because you're not using a widget, Gravity Forms thinks this is a form embedded in a regular post or page, and the styling is not adjusted for a narrow space. You will have to format the form yourself to make it fit. Try adding this CSS to one of your theme's stylesheet, wherever the theme provider suggests adding custom CSS:

    [css]
    body .gform_wrapper {
        background-color: #BFEAEF;
        padding: 5%;
    }
    body .gform_wrapper input {
        width: 98%!important;
    }
    /* this is temporarily hide the labels until you add the placeholder script */
    body .gform_wrapper label {
        display: none;
    }

    That will get you closer. You can follow the link which Kevin previously provided to learn about targeting every single element in your form with CSS.

    Posted 6 years ago on Sunday October 28, 2012 | Permalink
  10. Golden
    Member

    Is it possible to do this in a widget, so that I dont need to change the CSS style of the entire page, rather, select the parameters of the widget only?

    Posted 6 years ago on Sunday October 28, 2012 | Permalink
  11. Yes, you can use a widget and we can style that.

    However, the CSS I provided would only affect the form, because it targets the .gform_wrapper div. That will not affect your page at all.

    Posted 6 years ago on Monday October 29, 2012 | Permalink