0

我不是 100% 确定这是否可行，而且由于我没有 JS 或 jQuery 经验，我什至无法尝试自己构建它。

所以这里是概念：我们有（Pardot）表格，如果它们被 cookie 预先填充了客户数据。如果他们是新访客并且从未被 cookie 记录，则表单为空。

我想要实现的是，如果表单不为空（如果我们只是说电子邮件字段已预先填写，则更容易）然后一种机制会将额外的 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>

因此，我建议在表单上提供 class="description" 时应用 CSS 更改

或 href="/form/incorrectProspect/account_id/20742/ - 可在表单上找到。

这有意义吗？你有什么想法可以帮助开始建立这个吗？欢迎任何想法在这里:)。

4

1 回答 1

0

警告：我几乎没有使用过 Edge；我不再使用 CSS 进行主动开发。YMMV。

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

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

如果预先填充，它会变成粉红色。

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

于 2018-05-31T17:45:55.963 回答