I have been working on this as well and finally stumbled across the answer on the bootstrap page.
The key is setting the clickable:
option to wherever you want your active Dropzone area to be. Using your example, if you want your preview area to also be your drop/click area, set clickable:'#dropzonePreview',
and that will make that area active. If you want the "Drop Files" image displayed in there as well use this:
<div id="dropzonePreview" class="dz-default dz-message">
<span>Drop files here to upload</span>
</div>
This allows you to use a single Dropzone form (thus all fields get submitted as one) while still allowing you to have a smaller area designated for dropping/clicking.
One note though, don't make it too small, as if you drag and drop outside the area it loads the image in the browser in place of the page.