Skip Navigation

[Resolved] Are required fields in CRED now pink background upon loading a fresh form?

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 3 replies, has 2 voices.

Last updated by Nigel 6 years, 5 months ago.

Assisted by: Nigel.

Author
Posts
#902259

I am trying to:
My CRED forms have been working fine for 3+ years. I have two forms that have not been altered since October, 2017. Recently, (in the past 3-4 weeks) the REQUIRED fields appear with a pink-ish background color. I definitely did not make this change myself. In fact, the Toolset plugins are the only plugins I have recently updated.

Link to a page where the issue can be seen:
hidden link

I expected to see:
A light-gray background, same as non-required fields.

Instead, I got:
A pink/light-red background color.

Minesh (Toolset Support) attempted to help me with this in this thread:
https://toolset.com/forums/topic/cred-required-fields-are-now-pink-background/

But, his assumptions are incorrect and he does not seem to have a better explanation for this.
This should only occur AFTER the form is submitted and those fields are either empty or non-conforming. Simply loading the page with the fresh form should not show those fields to be in error; that is very misleading to the user, and several people have recently complained or inquired about this to me. Furthermore, the classes Minesh refers to are input:invalid and textarea:invalid, both of which are clearly not normal display classes, but rather require the "invalid" state.

I closed that thread and reposted my issue here.

Thanks,
Jeff

#902340

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screen Shot 2018-05-23 at 09.20.13.png

Hi Jeff

I visited the link to your form in a couple of browsers and in each the required fields are displayed in grey, the same as the optional fields.

From the form markup I can see that the email field is required, for example, but as you can see in the screenshot it looks the same as the other fields.

Did you change something?

#902579

Hey, Nigel -

Sorry about that. Too many people were inquiring why those fields were marked (red) so I put a temporary override in my child theme. I have now removed that so, have a look when you are able.

I hope you understand my issue.

I copied the live site to a staging one so you can dive in, if necessary, and make any tests or changes you see fit.
Login req'd to access staging site as user: username: flywheel pw: cnsvi333_%_$*9

I think you guys already have access to that Admin login but, not sure if you keep that credentials info handy or not. If you need Admin access and do not have it already, let me know.

Thanks,
Jeff

#902779

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Jeff

I looked at the page on your staging site where I could see the pink required fields.

They are pink because your stylesheet has a rule with the following rule:

input:invalid, textarea:invalid {
    background-color: #f0dddd;
}

(Line 101 of style.css)

A field with a required attribute that does not have content is invalid and therefore shown as pink.

You can see that on this quick CodePen demo: hidden link