Please help! What is wrong with this plugin?

Do this to start.. in the actual HTML, move the form container div BEFORE the left content. That way the floated form will align properly with the left content.. like this..

<section id="bookingForm">
<header>
<h1>Book your free, no obligation<br><span>15 minute mortgage consultation</span> with Rachel today ...</h1>
</header>
<div class="formContainer">{FORM HERE}</div>
<p>We'll show you exactly how much you can borrow and what your repayments will be.</p>
<p>We'll search over 1500 lenders to find you the best mortgage rates and cheapest deals available.</p>
</section>

See how that works, then we'll take a look from there

Okay, so the formatting looks better to start.. and it should work better with the validation errors as well.

EDIT: Looking again, I see the validation errors still break out of the form container. You can solve that by changing the height to min-height and adding an overflow property.

#bookingForm {
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #E3E3E3;
    clear: both;
    margin: 20px 0;
    min-height: 280px;
    overflow: hidden;
    width: 566px;
}

So, this is the deal with the form. When using the Ajax submission method, the form automatically adds an anchor so when it's submitted, it returns the viewport to the top of the form. This was added for long forms where you need to return to the top of the form for validation notices, confirmation text, etc.

Right now, there's no way to turn this OFF other than switching back to the normal post method. You could also try using a redirect/confirmation page rather than the inline confirmation message so you wouldn't have that effect.

You can't remove the anchor code from the Ajax submission method. In the normal submission method, you would need to enable the anchor to move the viewport so you can see the confirmation message or errors - and then you're back to square one.

You can always try using some JQuery/CSS customizations to create pop-up style alerts.

http://forum.gravityhelp.com/topic/confirmation-via-pop-up-box#post-1887

http://screenr.com/n32

You would have to look at the sample and customize it for both confirmation and error messages.

You can find info on targeting/changing the validation error styles here.

http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/#validation

I tested and see the confirmation popup in the top left corner of the page. You will need to adjust the positioning so it's relative to the form itself.

In a multi-page form when you click "Next" or "Previous" the form is submitted again so that validation occurs at each step.

If validation did not happen after each step, it would mean it would only happen on the final submit action which would be highly annoying if a user made a mistake on the first page. Validation happens at each step of the process so the form can be submitted without complication on the final page.

You are running into issues because of your implementation. It's not how most people implement the form, it's very much a custom implementation. Most people simply use the shortcode in a post or page. The forms work as intended out of the box and with most themes. However we can't control your theme code and how you implement the function call itself within your theme because the code outside of Gravity Forms itself is completely outside our control.