WordPress.org

Ready to get started?Download WordPress

Forums

Fast Secure Contact Form
Changing the color of the popup bubble ("Please enter an ema (7 posts)

  1. menathor
    Member
    Posted 2 years ago #

    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!

    http://wordpress.org/extend/plugins/si-contact-form/

  2. tdstalli
    Member
    Posted 2 years ago #

    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,

    http://72.41.205.131/?page_id=11

  3. Mike Challis
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  4. tdstalli
    Member
    Posted 2 years ago #

    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.

  5. Mike Challis
    Member
    Plugin Author

    Posted 2 years ago #

    It it only doing that with the email address field?
    like on this page?
    http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_email

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

  6. tdstalli
    Member
    Posted 2 years ago #

    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.

  7. tdstalli
    Member
    Posted 2 years ago #

    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

    http://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages

    and here

    http://thereforei.am/2011/07/01/css-selectors-for-html5-input-validation/

    Thanks, Mike for pointing me in the right direction.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic