iframe creates a huge empty form.

is there a way of correcting the large white border when using iframe?

without the iframe, it is correctly positioned and on a smaller screen there is not the extraneous white border.

At the moment you are not using the iFrame method, but from my tests you are referring to this border:

You can test and clone the demo form:  

https://form.jotform.com/53185424523958? 

In addition you can also adjust the height of the iFrame code, like in the example below:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/53185424523958" frameborder="0" style="width:100%; height:680px; border:none;" scrolling="no"> </iframe>

Let us know if we can assist you further.   

I've not been leaving it in place as it looks so bad, I've changed the iframe height to 100px and it still looks the same.

Have you tried embedding the sample form my colleague provided you? If not, please remove the current  embedding form, clone her form in your account and embed it in your site. Try with the Embed code method:

Thanks for all suggestions, but I will leave leave it with the source code, as it is giving me the best results,

I moved your question to a new thread as it is a different situation. You will find your answer here:

http://www.jotform.com/answers/706154 

Let us know if we can assist you further.