邮件表单破坏网站布局

Question

我有这个模板。我所做的只是下载整个模板并将其上传到服务器，当您使用表单提交查询时，布局中断和发送的成功消息不会显示。这可以在http://www.sgrooms.esy.es查看。布局来自http://www.wowthemes.net/demo/hypnos/，表单可以正常工作。 我已经比较了我可以看到的文档，但我看不到错误。

是否有人能够帮助我，而不必等到他们的支持开放？

这是我认为出错的代码：

<!-- CONTACT
================================================== -->
<section id="contact-page" class="maincolorbg">
<div class="container">
    <div class="starter-template">
        <h1>Contact</h1>

        <div class="smallsep">
        </div>
        <p class="lead">
            Send us a message to request a free no obligation quotation,<br/>
            or simply enquire and get prompt answers within 24 hours.
        </p>
    </div>
    <form id="contact" name="contact" method="post">
        <fieldset>
            <div class="row">
                <div class="col-md-4 wow fadeIn animated animated" data-wow-delay="0.1s" data-wow-duration="2s">
                    <label for="name" id="name">Name<span class="required">*</span></label>
                    <input type="text" name="name" id="name" size="30" value="" required/>
                </div>
                <div class="col-md-4 wow fadeIn animated" data-wow-delay="0.3s" data-wow-duration="2s">
                    <label for="email" id="email">Email<span class="required">*</span></label>
                    <input type="text" name="email" id="email" size="30" value="" required/>
                </div>
                <div class="col-md-4 wow fadeIn animated" data-wow-delay="0.5s" data-wow-duration="2s">
                    <label for="phone" id="phone">Phone<span class="required">*</span></label>
                    <input type="text" name="phone" id="phone" size="30" value=""/>
                </div>
            </div>
            <div class="wow fadeIn animated" data-wow-delay="0.8s" data-wow-duration="1.5" style="margin-top:15px;">
                <label for="Message" id="message">Message<span class="required">*</span></label>
                <textarea name="message" id="message" required></textarea>
            </div>
            <div class="wow fadeIn animated" data-wow-delay="1s" data-wow-duration="2s">
                <input id="submit" type="submit" name="submit" value="Send"/>
            </div>
        </fieldset>
    </form>
    <div id="success">
    <span>
    <p style="margin-top:20px;">
        Your message was sent successfully! I will be in touch as soon as I can.
    </p>
    </span>
    </div>
    <div id="error">
    <span>
    <p>
        Something went wrong, try refreshing and submitting the form again.
    </p>
    </span>
    </div>
</div>
</section>

这是css：

#contact label {
text-transform:uppercase;
font-weight:300;
}
#contact input,#contact select,#contact textarea {
font-family:inherit;
font-size:inherit;
line-height:inherit;
width:100%;
border:0px;
color:#333;
}
#contact input,#contact select {
border:0px;
height:40px;
margin-bottom:0px;
}
#contact input#submit {
width:auto;
margin-top:20px;
background-color:#333;
color:#fff;
padding:0px 20px;
text-transform:uppercase;
font-weight:300;
}
#contact textarea {
height:200px;
}
.required {
color:#e9266d
}

#success,#error {
display:none
}
#success span,#erro span {
display:block;
position:absolute;
top:0;
width:100%
}
#success span p,#error span p {
margin-top:6em
}
#success span p {
color:#9bd32d;
}
#error span p {
color:#c0392b;
}
.error {
text-transform: none;
font-style: italic;
display: inline-block;
}

Answer 1

这是我自己想出来的。

如果有人发现相同的问题，请查看下面的答案。

    <div id="success">

        <p style="margin-top:20px;">

            Your message was sent succssfully! I will be in touch as soon as I can.
        </p>

    </div>
    <div id="error">
    <span>
    <p>
        Something went wrong, try refreshing and submitting the form again.
    </p>
    </span>
    </div>
</div>
</section>