Error msgs not contained in my widget size

Your problem is a set height with an overflow on the div that contains your form. When the validation errors are displayed, the form is taller vertically so it gets cropped by the overflow on the parent container.

[css]
.builder-module-4 .widget {
    height: 320px;
    width: 286px;
}

You would need to override the default validation styles for that form (base the CSS inheritance off the form ID so it doesn't change all of your forms) to remove the padding, borders or whatever you need that forces the extra height. This snippet will get you started.. it appears that you'll have some more work to do because of other theme styles, but it should point you in the right direction.

[css]

body #gform_wrapper_2.gform_wrapper div.validation_error {
	display: none
}
body #gform_wrapper_2.gform_wrapper li.gfield.gfield_error.gfield_contains_required {
    margin-bottom: 0 !important;
    margin-top:  0 !important;
}
body #gform_wrapper_2.gform_wrapper li.gfield.gfield_error,
body #gform_wrapper_2.gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
    background-color: none !important;
    border: none !important;
    margin-bottom:  0 !important;
    padding:  0 !important
}

You could always make the parent container height taller by default to allow for the possibility of validation errors.

Or, even another idea is to make the parent overflow property auto so if the form has the errors, you can still scroll through the form and submit it without the button being obfuscated.

[css]
.builder-module-4 .widget {
    overflow-y: auto
}

screenshot: http://bit.ly/uMZXOQ