Javascript Dropzone将重叠拖放到表单字段上

我刚刚实现了本教程中分享的关于将dropzone与其他表单字段集成为完整表单的建议

我现在遇到的问题是，拖动图像的表单上载空间现在与整个表单重叠：

这是我的表单代码：

<form action="<?php echo base_url("dropzone/upload");?>" class='dropzone'>
                <!--<form role="form">-->
                    <div class="form-group">
                        <label for="example-subscription-email">Email address</label>
                        <input type="email" class="form-control input-lg" id="example-subscription-email" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="example-subscription-password">Password</label>
                        <input type="password" class="form-control input-lg" id="example-subscription-password" placeholder="Password">
                    </div>
                    <button style="margin-bottom: 20px;" type="submit" class="btn btn-lg btn-danger">Get Better Photos!</button>
                    <!--<a href="#share" class="btn btn-lg btn-facebook"><i class="fa fa-facebook-square"></i> Share</a>
                    <a href="#share" class="btn btn-lg btn-twitter"><i class="fa fa-twitter-square"></i> Share</a>-->
                </form>

---

问题已解决。当我试图在非表单元素上实例化dropzone时，我必须在dropzone.js中定义目标url

像这样：

var u = window.location.hostname; 

Dropzone.prototype.defaultOptions = {
  url: u + 'dropzone/upload',

这就解决了问题

现在我有这个：

---

你能把这个放到JSFIDLE中吗？我想你需要看看你所有的CSS和javascript来解决这个问题。