如何使一個聯繫表7響應

Question

我需要讓我的聯繫表格7響應。它在圖像右側對齊，但在縮小屏幕尺寸時覆蓋圖像。

圖片CSS

#ImageDiv{ 
margin-right: auto; 
max-width:800px; 
top: -30px; 
position: relative; 
left: -25px; 

}

<div id="ImageDiv"><img alt="" src="https://image.png" height="auto" /> 

聯繫表7

<div style="background-color:green;padding:5px 5px 5px 5px"> 
<div style="text-align: center;color:white;padding-bottom:5px">HEADER</div> 

<div style="margin-bottom:5px"><div style="color:white; display:inline-block;padding-right:10px;width:30%">Name:</div> 
<div style=" display:inline-block;width:65%">[text* your-name]</div></div> 

<div style="margin-bottom:5px"><div style="color:white; display:inline-block;padding-right:10px;width:30%">Surname:</div> 
<div style="display:inline-block;width:65%">[text* your-name]</div></div> 

<div style="margin-bottom:5px"><div style="color:white; display:inline-block;padding-right:10px;width:30%">Email:</div> 
<div style="display:inline-block;width:65%">[text* your-name]</div></div> 

<div style="margin-bottom:5px;text-align:center">[submit "SUBMIT"]</div> 
</div> 

Answer 1

我不知道是否我完全理解你的問題，但我已經構造了的jsfiddle我認爲你想要達到目標。

聯繫表格7插件的瀏覽器輸出允許你使用CSS大致是：

#form-holder form input { 
width:100%; 
box-sizing:border-box; 
} 

http://jsfiddle.net/K5HKt/1/

Answer 2

我一直在爲此而努力了。 這是什麼爲我工作：

在styles.css，找到「領域」部分（在我的css它是第4.2節）。

尋找：

input[type="text"], 
input[type="email"], 
input[type="url"], 
input[type="tel"], 
input[type="number"], 
input[type="date"], 
input[type="password"], 
input[type="search"], 
select[multiple], 
textarea { 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
-moz-transition: 0.3s; 
-o-transition: 0.3s; 
-webkit-transition: 0.3s; 
transition: 0.3s; 
background: #f6f6f7; 
border: 1px solid #eaeaeb; 
color: #acaeaf; 
line-height: normal; 
padding: 0.6429em 0.7143em; 
-webkit-appearance: none; 

然後，我只是說：

width:85%; 

所以我現在有：

input[type="text"], 
input[type="email"], 
input[type="url"], 
input[type="tel"], 
input[type="number"], 
input[type="date"], 
input[type="password"], 
input[type="search"], 
select[multiple], 
textarea { 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
-moz-transition: 0.3s; 
-o-transition: 0.3s; 
-webkit-transition: 0.3s; 
transition: 0.3s; 
background: #f6f6f7; 
border: 1px solid #eaeaeb; 
color: #acaeaf; 
line-height: normal; 
padding: 0.6429em 0.7143em; 
-webkit-appearance: none; 
width:85%; 

這爲我工作。

Answer 3

現在，您可以使用Smart Grid-layout design for cf7插件，它具有一個網格狀的編輯器，以及給你許多其他功能，使敏感和複雜的形式。