Question

我的网站我使用WordPress Contact Form 7从我的用户那里获取一些信息。该网站使用materialize css Framework构建。

现在我想使用我的自定义css样式并将css样式具体化到表单中。所以我使用以下代码。但它没有造型。

有人告诉我，我该如何设计这种形式？

<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
[email* your-email id:icon_prefix class:validate]
<label for="icon_prefix">Your Email</label>
</div>
</div>

Answer 1

我修改了与@ user7346350相同的解决方案，用于工作税区和图标焦点

 $('input').focus(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active');
    $(this).parent().siblings('i').addClass('active');
}});

$('input').blur(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active');
    $(this).parent().siblings('i').removeClass('active');
}});

$('textarea').focus(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').addClass('active');
    $(this).parent().siblings('i').addClass('active');
}});

$('textarea').blur(function(e) {
var name = $(this).attr('id');
if ($('label[for="'+name+'"]').length > 0) { 
    $('label[for="'+name+'"]').removeClass('active');
    $(this).parent().siblings('i').removeClass('active');
}});

Answer 2

我最近在一个项目上遇到了同样的问题。通过将此jquery代码添加到我的js文件中，我能够在表单中保持实现样式：

    [BeforeStep()]
    public void RecordStep()
    {
        var stepContext = ScenarioContext.Current.StepContext;
        var scenarioTitle = ScenarioContext.Current.ScenarioInfo.Title;

        List<string> steps;
        if (!this.scenarioSteps.TryGetValue(scenarioTitle, out steps))
        {
            steps = new List<string>();
            this.scenarioSteps[scenarioTitle] = steps;
        }

        steps.Add($"{stepContext.StepInfo.StepDefinitionType} {stepContext.StepInfo.Text}");
    }

此代码的作用是将类“active”添加到焦点的文本字段的标签中，并在模糊时将其删除。所以，你的代码是正确的。只需添加此代码段添加，您也可以在文本字段中进行转换。

您遇到此问题的原因是由于联系人表单7添加为您的电子邮件字段的父级的包装范围元素。

如何使用materialize css和Own样式表来设置WP Contact Form 7插件表单的样式？

2 个答案: