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.

Styling My Form

  1. Hi,

    I too know next to nothing about CSS styling etc. I tried following the advice given to others but it is just mumbo jumbo speak to me. I haven't a clue!

    Please help! I just want my form to look good on my page.

    Cheers,
    Cindy

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  2. The URL to my form page is http://www.cindyrevellphotography.com/free-quote/

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  3. Well, "looking good" is pretty relative, but I can help you get it to look better. Your theme is throwing all sorts of wonky styles in there and causing the issue.

    Open up your theme's stylesheet (usually the style.css file) and paste this CSS snippet at the very end of the file.

    [css]
    /* un-float the labels */
    
    #content .gform_wrapper form label {
    	float:none;
    }
    
    /* remove the bullet graphics and indents from the form list */
    
    body .gform_wrapper form .gform_body ul,
    body .gform_wrapper form .gform_body ul li {
    	list-style-type:none!important;
    	list-style-image:none!important;
    	list-style:none!important;
    	background-image:none!important;
    	background:none!important;
    	padding:0!important;
    	margin:0!important
    }
    
    /* remove extra horizontal padding and floats from inputs */
    
    #content .gform_wrapper form input[type="text"],
    #content .gform_wrapper form input[type="url"],
    #content .gform_wrapper form input[type="tel"],
    #content .gform_wrapper form input[type="email"],
    #content .gform_wrapper form input[type="number"],
    #content .gform_wrapper form input[type="password"],
    #content .gform_wrapper form textarea {
        float: none;
        padding: 5px 0 !important
    }

    That should get you to about 99%. You may need to make some tweaks from there to suit your needs, but it should look much better.

    test screenshot: http://bit.ly/sYyvbH

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  4. The screenshot looks good! Can you please do 1 other styling for me? Under "Your Requirements", could you please split the radio boxes into two columns to shorten the form a bit?

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  5. I spoke too soon. There were two stylesheets - style.css and style.min.css. I pasted the code into both of them just to be sure. It didn't change anything :(

    Posted 12 years ago on Friday October 28, 2011 | Permalink
  6. If you're not sure where exactly to put your custom styles, you should probably contact your theme provider and ask them. Lots of folks set it up differently. The styles will work if they get loaded in the page via the correct stylesheet. I see that the "style.min.css" file does get loaded, but don't see your custom Gravity Forms rules in there.

    http://www.cindyrevellphotography.com/wp-content/themes/duotive-three/style.min.css

    For the "your requirements" checkboxes, you can use one of the CSS Ready Classes and apply them via the form editor to that field. There are classes that create 2, 3 and 4 column layouts for the checkboxes and radio buttons. You can find out how to use those here.

    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    look for "gf_list_2col" - that should be what you want.

    Posted 12 years ago on Friday October 28, 2011 | Permalink