Support » Plugins and Hacks » [Plugin: Fast Secure Contact Form] Changing the color of the popup bubble ("Please enter an ema

[Plugin: Fast Secure Contact Form] Changing the color of the popup bubble ("Please enter an ema

  • Hey Mike,

    First of all, awesome plugin mate. I’ve got things set up and configured nicely but there’s one last thing I need to fix before I can go live with the form.

    I’m using a dark theme (black / grey backgrounds, white text). I’ve configured the custom CSS fields in Fast Secure’s setup page so that everything looks great, but the bubble which pops us as part of the email address validation is transparent with black text (something to do with my theme, I’m sure). Is there any CSS property I can specify in the header of my page to force this bubble to be a solid color (white)?

    Or can I disable this (I’m guessing regex fail?) popup altogether somehow, so that that if it fails it just falls back on the required field error label (“A proper e-mail address is required”)? The email validation is important, so I don’t want to lose that.

    Thanks for your help – appreciate it!


Viewing 6 replies - 1 through 6 (of 6 total)
  • I was just going to post the same question. My theme is a twentyten child, with white background. If I could just change the css so the popup was not a transparent background, that would be great. In my case it is just an issue with Chrome. In firefox the popup is already black and the other browsers put the text inline. Not sure why this is. Anyway you can see an example here,

    Plugin Author Mike Challis


    You can adjust this setting on the contact form edit page:
    “CSS style for form input errors on the contact form:”
    The default is ….
    text-align:left; color:red;
    change it to whatever CSS you want.

    If you still need help, I need a URL or screen shot.

    Wow Mike, thanks for such a speedy reply. I changed the background color in the form settings, and it worked in all browsers except Chrome. I wonder if I put the code into my style page if that would help. It is even an issue on your own contact form on your thank you page, but yours does not look as bad as mine. Why do the different browsers handle this one thing differently? Firefox with a black background popup, Chrome with a transparent background popup and the others in line.

    Plugin Author Mike Challis


    It it only doing that with the email address field?
    like on this page?

    If there are different colors, that may be the difference browsers have with HTML5 email fields.

    Correct, only on the email field. And for me it is only a problem with chrome, because the background is transparent, so the label for the field below is showing through.

    I found the answer. In my style sheet I added styles to this
    ::-webkit-validation-bubble-message {}

    more info about it can be found here


    and here

    CSS Selectors for HTML5 Input Validation

    Thanks, Mike for pointing me in the right direction.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: Fast Secure Contact Form] Changing the color of the popup bubble ("Please enter an ema’ is closed to new replies.