Style the form layout

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.

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.

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.