Modifying CSS based on form field value (Pardot)

Question

I am not 100% sure if this is doable and as I don't have JS or jQuery experience I can't even try building this on my own.

So here is the concept: We have (Pardot) forms which are pre-filled with customer data if they are cookied. If they are new visitor and never been cookied the form is empty.

What I'd like to achieve is in case the form is not empty (easier if we just say the email field is pre-filled) then a mechanism would apply extra CSS onto the form which would cause the email field to be hidden, it would alter some text decoration and hide the last question.

So essentially applying this CSS change to it:

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;}

Here is a page where you can see such a form: https://idio.ai/resources/uncategorized/form-test-page/

By default it would look like this: http://prntscr.com/jp3rmj

If things are filled in you would only see the form reset question/link and button (apart from the email field I can hide all within Pardot): http://prntscr.com/jp3sog

Now since I've mentioned I think the best would be to monitor the status of the email field.

Here is how it looks when it's pre-filled:

<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="[email protected]" 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>

And when it is empty:

<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>

So I'd suggest to apply the CSS change when class="description" is available on the form

or href="/form/incorrectProspect/account_id/20742/ - this is available on the form.

Does this make sense? Do you have any ideas that would help to start building this up? Any ideas are welcome here :).

Answer 1

Warning: I've barely used Edge; I don't do active development with CSS anymore. YMMV.

A <input type='text'> that has content provided as part of the page source will have a non-empty value attribute. So say your field had ID "emailField" this CSS:

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

would turn it pink if were pre-populated.

Note that this status won't change if modified by the user, or if the content is changed in Javascript. (Unless you call setAttribute("value", "..."); on it.)