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.

Form styling and spacing problem with WooThemes

  1. Hi,

    I've added my for to a WooThemes template (http://www.vocomedia.co.uk), but have a few issues I'd like help with:

    1) I want the form to be a lot shorter. There's a lot of white space between fields and I can't seem to reduce this.

    2) I'd like to centre the submit button, but the code posted elsewhere on this forum doesn't work for my theme.

    3) I want to reduce the size of the title text and also include a small image. How do I add an image to the header of the form?

    4) I'd like to add rounded corners to the border of the form. Is there any easy way to do this that works in all browsers?

    Thanks - lots to learn!

    Posted 7 years ago on Tuesday November 13, 2012 | Permalink
  2. As a paying customer am I going to get a response to this question?

    Posted 7 years ago on Friday November 16, 2012 | Permalink
  3. David Peralty
    Administrator

    Hi there, can you link to your form page please? None of these are Gravity Forms issues, but instead theme styling issues.

    Posted 7 years ago on Friday November 16, 2012 | Permalink
  4. The form is on the link in my original post. My homepage: http://www.vocomedia.co.uk

    Posted 7 years ago on Friday November 16, 2012 | Permalink
  5. Try dropping these styles into your theme's stylesheet:

    [css]
    body .gform_wrapper .gfield, body .gform_wrapper .ginput_container {
    margin: 0;
    }
    body .gform_footer.top_label {
    text-align: center;
    }
    body .gform_wrapper .gform_title {
    font-size: 1.5em !important;
    }
    body .gform_wrapper {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    }

    If you want to target just this specific form, you could instead use these rules:

    [css]
    body #gform_wrapper_4 .gfield, body .gform_wrapper .ginput_container {
    margin: 0;
    }
    body #gform_wrapper_4 .gform_footer.top_label {
    text-align: center;
    }
    body #gform_wrapper_4 .gform_title {
    font-size: 1.5em !important;
    }
    body #gform_wrapper_4 {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    }

    The form description area can hold HTML - so you can place an image via HTML in the description area.

    Posted 7 years ago on Friday November 16, 2012 | Permalink