Изменение CSS на основе значения поля формы (Pardot) - PullRequest
Новая
       8

Изменение CSS на основе значения поля формы (Pardot)

0 голосов
/ 31 мая 2018

Я не уверен на 100%, выполнимо ли это, и, поскольку у меня нет опыта работы с JS или jQuery, я даже не могу попробовать сделать это самостоятельно.

Так вот концепция: у нас есть(Пардо) формы, которые предварительно заполнены данными клиента, если они приготовлены.Если они являются новыми посетителями и никогда не были приготовлены, форма пуста.

Чего я хотел бы добиться, так это в том случае, если форма не пуста (проще, если мы просто скажем, что поле электронной почты предварительно заполнено), тогда механизм будет применять дополнительный 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>

Поэтому я бы предложил применить CSSизменить, если class = "description" доступно в форме

или href = "/ form / invalidProspect / account_id / 20742 / - это доступно в форме.

Имеет ли это смысл?Есть ли у вас какие-либо идеи, которые могли бы помочь начать это? Любые идеи приветствуются здесь:).

1 Ответ

0 голосов
/ 31 мая 2018

Предупреждение: я едва использовал Edge;Я больше не занимаюсь активной разработкой с помощью CSS.YMMV.

A <input type='text'>, содержимое которого предоставляется как часть источника страницы, будет иметь непустой атрибут value.Допустим, ваше поле имеет идентификатор «emailField», этот CSS: 

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

сделает его розовым, если он будет предварительно заполнен.

Обратите внимание, что этот статус не изменится, если пользователь его изменитили если содержание изменено в Javascript.(Если только вы не позвоните setAttribute("value", "...");.)

...