活动textarea导致布局问题

Question

我在Wordpress网站上有一个联系表单，它在功能上做了应该做的事情，但是当我点击textarea来写我的消息时，它会“跳过”提交按钮并破坏整个布局。对于表单的功能，我使用Contact forms 7 Wordpress插件。 Chrome和Firefox都会出现此问题。我逐行注释掉代码，看起来像宽度：100％;造成了这个问题。

（链接到website）

截图：

contact form without the textarea active

when the textarea is selected

表格的结构。

 <div class="forma">
   <span class="naslov">Feel free to use the form to contact me</span>
   [text* your-name placeholder "Name"]
   [email* your-email placeholder "Your email address"]
   [text your-subject placeholder "Subject"]
   [textarea* message id:contact-message 10x5 placeholder "Your Message"]
   [submit "Send"]
  </div>

导致问题的CSS

.forma input, .forma textarea {
    width:100%;
    padding:10px;
    border:0;
    outline:0;
    border-radius: 8px;
    box-shadow:0 1px 1px rgba(0,0,0,0.1);
    resize:none;
    box-sizing: border-box;
    font-family:GT-Walsheim-Pro-Regular;
    margin-bottom: 8px;
    margin-top: 4px;
}

非常感谢所有帮助。