联系表格7 CSS样式

时间:2018-07-11 19:44:33

标签: css wordpress css3 stylesheet

我最近有了一个高级主题,mailchimp的表单看起来真的很酷。

我想知道我是否可以在3个基于字段的联系表单中使用样式 “请求回叫”-名称输入字段,数字输入字段和“呼叫我”按钮。

通过Chrome检查器进行检查时,以下用于mailchimps表单字段

.subscribe-box .form-control {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 50px;
    box-shadow: none;
    color: #4c5462;
    font-size: 18px;
    height: 65px;
    padding: 0 158px 0 50px;
}


.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

}

看起来像这样

SUBSCRIBE FORM FIELD WITH BUTTON ABSOLUTE

因为我要使用联系表格。我想让我的表单字段内联(单行),并且在“数字表单字段”上有一个“调用”按钮。

像这样的事情 THAT I"D LOVE TO HAVE 但不必在电话视图中内联

以下是我的ContactForm

[text* text-833 "NAME"] 
[tel* tel-572 "PHONE"] 
[submit "CALL ME"]

感谢任何帮助/输入 问候

1 个答案:

答案 0 :(得分:0)

从我读过的书中,您在应用这些样式时需要帮助。

您可以使用一种自定义CSS编辑器插件(例如this one)来实现此目的。从那里,您可以将这些样式应用于所有表单。

另一种方法是使用“ class:your-class-name”向每个短代码添加一个类。例如:

[text* text-833 "NAME" class:textstyle] 

然后再次从您的自定义CSS编辑器中应用这些样式。