Forums

On more than one of my sites, the reCAPTCHA error message (displayed when user enter wrong reCAPTCHA code) is unredable - white font on light red/pink background. Is there anywhere in Chrono Forms that this can be controlled?

Hi John,

I just looked at one of my test forms and the styling appears to be in a div with a class of cf_alert so you could add some css for this. It's worth checking the page source to confirm the div class though.

Bob

Thanks for your quick response! Here are snippets from the pagesource. If I'm interpreting them correctly, the color of the error message text should be CF3738 (red) and not the white (light blue using another template) that is actually displayed. So, it appears that color of the text is somehow being overridden by some other CSS. Any thoughts on a work-around?
---------------------
<style type="text/css">
span.cf_alert
{
background:#FFD5D5 url(http://zygr.com/components/com_chronocontact/css/images/alert.png) no-repeat scroll 10px 50%;
border:1px solid #FFACAD;
color:#CF3738;
display:block;
margin:15px 0pt;
padding:8px 10px 8px 36px;
}
</style>
---------------------
<span class="cf_alert"><ol><li>The reCAPTCHA wasn't entered correctly. Go back and try it again
<br />
( reCAPTCHA said: incorrect-captcha-sol )</li></ol>
</span>

Hi John,

I'd use FireBug in FireFox to see what CSS is actually being used for the message.

Bob

The text in the alert is "1. The reCAPTCHA wasn't entered correctly. Go back and try it again ( reCAPTCHA said: incorrect-captcha-sol )". So, it is being treated as an ordered list instead of regular text. Therefore, the color specified in the following code is not what is being applied; the ordered list style is being applied instead. Do you know if there is a way to change the error message so that it is not an ordered list?

<style type="text/css">
span.cf_alert
{
background:#FFD5D5 url(http://zygr.com/components/com_chronoco ... /alert.png) no-repeat scroll 10px 50%;
border:1px solid #FFACAD;
color:#CF3738;
display:block;
margin:15px 0pt;
padding:8px 10px 8px 36px;
}

Hi John,

It appears to be in chronocontact.html.php around line 193. Here's the code that outputs the messages:

<span class="cf_alert"><?php echo '<ol>'.$MyForm->formerrors.'</ol>'; ?></span>

Bob

Great! Thanks, Bob.

Do you advise changing the styling to include formatting of ordered lists or should the error message be changed from an ordered list to regular text?

And in either case, would a change like this be included in a future release?

John

Hi JOhn,

I've just changed the look of one of these error messages (Server Side validation in my case) using the Form Code | CSS Styles box with - for example

span.cf_alert {
  background-color:yellow;
  border: 1px solid red;
  font-weight:bold;
}

Sorry, but I have no idea what might (or might not) be in a future release.

Bob

Thanks, Bob! You are invaluable.