Form styling goes weird. Is there an easy way to re-style?

What you are seeing is how your theme styles the Google Form by default. The code for the form is picking up the styles used by your theme. The ability to integrate the Google Form and make it look like it belongs on your web site is one of the primary goals of the plugin.

What you need to do is define some CSS to “tighten” up the form (remove the white space, eliminate the bullets, etc.). It is pretty easy to do, you just need to define some CSS. Here are a couple things to refer to:

• Plugin FAQ
• Plugin Custom CSS
• Tips and Tricks

Hopefully these resources will get you going in the right direction.

Awesome, that worked great once I figured it out! Thanks so much for the help, and the awesome plugin.

And for anyone who happens upon this and is looking for an easy solution, try dropping this code that I came up with in your custom CSS box within the plugin settings and see what you think:

h1.ss-form-title { display: none; }

div.ss-form-container br { display: none; }

div.errorbox-bad div.ss-item-required label {
color: red;
}

label.gform-error {
    float: right;
    color: red;
    font-weight: bold;
}
body.ss-base-body {}
div.errorbox-good {}
div.ss-attribution {}
div.ss-footer {}
div.ss-footer-txt, div.ss-logo {
    display: none;
}

div.ss-form {}
div.ss-form-container {
    font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.ss-form-desc {}
div.ss-form-entry {}
div.ss-form-entry>input {
    background-color: #fcfcfc;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
div.ss-form-heading {}
div.ss-item {}
div.ss-legal {}
div.ss-navigate {}

div.ss-required-asterisk {
    color: grey;
    font-weight: normal;
}
div.ss-scale {}
div.ss-text {}
form#ss-form {}
h1.ss-form-title {}
hr.ss-email-break {}
input.ss-q-short {
    width: 200px;
}
label.ss-q-help {
    display: block;
}
label.ss-q-radio {}
label.ss-q-title {
    font-weight: bold;
}
span.ss-powered-by {}
span.ss-terms {}
td.ss-gridnumber {}
td.ss-gridnumbers {}
td.ss-gridrow
td.ss-gridrow-leftlabel
td.ss-leftlabel {}
td.ss-rightlabel {}
td.ss-scalerow {}
td.ss-scalenumber {}
td.ss-scalenumbers {}
textarea.ss-q-long {
    background-color: #e0e0e0;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
tr.ss-gridrow {}

Looks good. I would add one more thing:

div.ss-form-entry>ul li {
    list-style-type: none;
}

This will remove the bullets on the multiple choice items. You can find a complete explanation on bullets here.

Awesome Mike! That makes it much nicer to look at. Thank you again!