PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Editing Error Boxes

  1. gsbz2
    Member

    The format of my form is thrown off with the error message "There was a problem with your submission and the errors have been highlighted below." and I don't have enough room for the message and the huge highlighted boxes.

    To resolve this issue, I would like to just change the color of the input box border and background of the input box. Can you tell me how, I should edited the css code to accomplish this?

    Posted 7 years ago on Monday March 25, 2013 | Permalink
  2. Do you have a link to your form? Another big question, do you want to edit the error styles for all forms, or only this specific form in this specific instance?

    Posted 7 years ago on Monday March 25, 2013 | Permalink
  3. gsbz2
    Member

    http://gwynbollinger.com/test/contact-me/
    This is the only form I am using presently, and I would just like to edit this instance.
    I would like to keep the error message, but eliminate the large "blue" boxes. As I mentioned, I would prefer to just highlight the box border and change the background of the box.
    Thanks for your prompt reply---

    Posted 7 years ago on Monday March 25, 2013 | Permalink
  4. David Peralty
    Administrator

    There is a rule in your style.css creating the blue boxes upon error:

    #wrap .gform_wrapper .gfield_error {
    background-color: #3399FF!important;
    margin: 5px 0 !important;
    padding: 0!important;
    }

    If you change it to background-color: none!important; or remove the color call then it won't have the big blue box.

    Posted 7 years ago on Monday March 25, 2013 | Permalink
  5. gsbz2
    Member

    Thanks for your assistance! I think I have resolved the blue box issue, and the styling will work for the time being. Can you tell me how I can eliminate/reduce the space between the titles and the input boxes on the error page. I would like the format to look similar to contact me pages. I have tried using Firebug to inspect the elements, but I am not finding anything to correct the issue.

    Posted 7 years ago on Tuesday March 26, 2013 | Permalink
  6. This should do the trick for you:

    [css]
    body .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label, body .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container {
    margin-top: 0;
    }
    Posted 7 years ago on Tuesday March 26, 2013 | Permalink
  7. gsbz2
    Member

    Thanks for the info. that worked! And thanks for your assistance!!!

    Posted 7 years ago on Tuesday March 26, 2013 | Permalink
  8. No problem, glad to help!

    Posted 7 years ago on Tuesday March 26, 2013 | Permalink

This topic has been resolved and has been closed to new replies.