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中，找到“Fields”部分（在我的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插件，并为您提供许多其他功能，以制作响应式和复杂的表单。

如何使联系表格7响应

3 个答案: