Question

我不是100％确定这是否可行，而且由于我没有JS或jQuery经验，我甚至无法自己构建这个。

所以这是概念：我们有（Pardot）表格，如果他们被煮熟，预先填写客户数据。如果他们是新访客并且从未被烹饪，那么表格是空的。

我想要实现的是以防表格不是空的（如果我们只是说电子邮件字段是预先填写的，则更容易），那么机制会在表单上应用额外的CSS，这将导致电子邮件字段要隐藏，它会改变一些文本装饰并隐藏最后一个问题。

所以基本上将这个CSS更改应用到它：

form.form p span.description {font-size: 14px;}
.col-sm-3.email {display: none;}
.email.col-sm-9 {background-color: #ffffff; padding:0;}
p.email {background-color: #ffffff; padding: 0; margin: 0;}
.email input {display: none;}
.Marketing_consent_gained {display: none;}

以下是您可以看到此类表单的页面：https://idio.ai/resources/uncategorized/form-test-page/

默认情况下，它看起来像这样：http://prntscr.com/jp3rmj

如果填写了内容，您只会看到表单重置问题/链接和按钮（除了电子邮件字段，我可以隐藏在Pardot中）：http://prntscr.com/jp3sog

既然我已经提到过，我认为最好是监控电子邮件字段的状态。

以下是预先填写的内容：

<div class="col-sm-9 col-xs-9">
<p class="form-field  email  pd-text required required-custom    ">
<input type="text" name="*the ID of the field*" id="*the ID of the field*" value="sbi85g@gmail.com" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, *some IDs specific to one form*);" placeholder="Work email *">
<br><span class="description">Not *prospect's name*? <a target="_self" href="/form/incorrectProspect/account_id/20742/campaign_id/8326/form_id/14870">Click Here</a>.</span>
</p>
</div>

当它是空的时候：

<div class="col-sm-9 col-xs-9">
<p class="form-field  email  pd-text required required-custom    ">
<input type="text" name="*the ID of the field*" id="*the ID of the field*" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, *some IDs specific to one form*);" placeholder="Work email *">
</p>
</div>

所以我建议在课程=＆＃34;描述＆＃34;时应用CSS更改。可在表格

上找到

或href =＆＃34; / form / incorrectProspect / account_id / 20742 / - 表格中提供。

这有意义吗？你有什么想法可以帮助你开始构建它吗？欢迎任何想法：）。

Answer 1

警告：我几乎没用过Edge;我不再使用CSS进行积极的开发了。 YMMV。

具有作为页面源的一部分提供的内容的<input type='text'>将具有非空value属性。所以说你的领域有ID＆＃34; emailField＆＃34;这个CSS：

#emailField:not([value=""]) {
    background-color: pink;
}

如果预先填充，

会把它变成粉红色。

请注意，如果用户修改了此状态，或者在Javascript中更改了内容，则此状态不会发生变化。（除非你打电话给setAttribute("value", "...");。）

根据表单字段值修改CSS（Pardot）

1 个答案: