How can I get the form fields/boxes side by side?

If it were just a few simple things, I'd say to try using the CSS ready classes but they may not be ideal for your form layout.

http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

There isn't a provision for 5 content columns though and with the amount of fields you have, they wouldn't end up working right or being grouped logically in your admin.

I would suggest using the inline HTML fields to create div elements around the groups of fields, then using CSS to float the new div/groups into 5 columns. You have to be a little creative with the markup & placement but it's not difficult to do. Here's a post that details how I added fieldset containers to a form.. you should be able to modify that slightly for divs instead.

http://www.gravityhelp.com/forums/topic/fieldsets#post-17019

Either way, it's going to take some work and a pretty good understanding of CSS to pull it off. If you're not really comfortable with it, you might consider contracting a developer to help you put it all together. Here's a good place to find one if you need.

http://wpcandy.com/pros/experienced/with-gravity-forms

Yep, you'd basically remove the fieldset stuff from the previous example and use div elements like this..

First HTML block content

</li><!-- close the html field li -->
</ul><!-- close the list -->

<div id="field_column_1"><!-- open the first div -->
<ul class="gform_fields top_label description_above"><!-- reopen the list -->

---- Put form fields for the first column here...

Second HTML block content

</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the first div -->

<div id="field_column_2"><!-- open the second div -->
<ul class="gform_fields top_label description_above"><!-- reopen the list -->

---- Put form fields for the second column here...

Third HTML block content

</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the second div -->

<div id="field_column_3"><!-- open the third div -->
<ul class="gform_fields top_label description_above"><!-- reopen the list -->

---- Put form fields for the third column here...

Fourth HTML block content

</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the third div -->

<div id="field_column_4"><!-- open the fourth div -->
<ul class="gform_fields top_label description_above"><!-- reopen the list -->

---- Put form fields for the fourth column here...

Fifth HTML block content

</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the fourth div -->

<div id="field_column_5"><!-- open the fifth div -->
<ul class="gform_fields top_label description_above"><!-- reopen the list -->

---- Put form fields for the fifth column here...

Sixth (last) HTML block content

</li><!-- close the html field li -->
</ul><!-- close the list -->
</div><!-- close the fifth div -->

Once you've done that, you would want to target those div elements and float them so they all work in columns.. here's a quick CSS example that you can tweak to get started.. place it at the end of your theme stylesheet and style away.

[css]
body .gform_wrapper div#field_column_1,
body .gform_wrapper div#field_column_2,
body .gform_wrapper div#field_column_3,
body .gform_wrapper div#field_column_4,
body .gform_wrapper div#field_column_5 {
	width:18%;
	height:400px
}
body .gform_wrapper div#field_column_1,
body .gform_wrapper div#field_column_2,
body .gform_wrapper div#field_column_3,
body .gform_wrapper div#field_column_4 {
	margin-right:1%;
	float:left
}

Hope that points you in the right direction.

It won't be filtered out. It's possible, if you really study the code and implement it correct, to implement Fieldsets using the HTML blocks positioned correctly and using the correct HTML to close and open tags properly.