Ok I answered my own question by messing around in the code for a bit. In case anyone else is looking for a way to do this here's what I did:
I put the form code inside a div and gave it a class name. I named mine "contact-form". Inside the CSS I created the "contact-form" class and gave it an attribute of a negative margin-bottom. Trial and error'd it until I got it lined up where I wanted it which ended up needing a -200px bottom margin.
Then I duplicated that class and set up the @media for a max-width of 512px. In that one I changed the margin-bottom to 10px.
I also had to change the form code's default height to about 45px to 50px taller than the default as it still wasn't showing the submit button, it was acting as if it needed a scroll bar which I didn't want to use unless I had to.
That's it! That took care of it. This should be something that is addressed in the form code though so we can adjust it easier within the code for our breakpoints instead of having to go through all this finaggling to get it to work right. I was under the impression that it was supposed to be responsive, out of the box, but that's truly not the case unless you want that huge gap under your form.
EDIT: And ....... of course now I find that it's the error messages it needed all that extra space for. Once again this is something that should be addressed in the form code so that it doesn't need to take up so much space after the form just to make space for the form's error messages when there aren't any. The form should expand and adjust the container it's in accordingly, but it does not do that.
So ..... I'm back to square one with a large gap that I cannot seem to fix with any spacing hacks in the code. Someone else ever done anything with this? I can't be the only person who's ever used this form that put things like maps and address boxes after the form. there's no way this gap can remain like this, it looks like something is wrong .... and of course it is :/