The validation error messages are designed to complement the survey theme you are using. If you are looking to change colors of text/background of your validation error messages, while there is no built-in method for changing the colors, you can absolutely change this with a little CSS!
Just go to the Style tab and scroll to the bottom of the survey preview and click the link to access to HTML/CSS Editor. Copy and paste any of the below CSS code in the field on the Custom CSS tab to customize the error messages you would like to change!
.sg-error-message, .sg-question-errorlist{ background: #FFC199; /*Change background color*/ border-left: 9px solid #FF6600; /*Change left border color*/ color: #2c3e50; /*Change text color*/ }
background will change the background color. border-left changes the left border color. And color changes the text color. For each of these simply replace the hex code (e.g., #FFC199) with either the color of your choice, such as "black," "purple," etc., or another hex code. Use a color picker like this one to find a hex code: www.colorpicker.com
For soft-require validation, refer to the below screenshot for CSS classes:
Admin
— Bri Hillmer on 01/30/2017
@Cmuntean: Thanks for this feedback! This will help others looking to do a similar level of customization to the soft-required messages!
Bri
Documentation Coordinator
SurveyGizmo Customer Experience Team
— Cmuntean on 01/28/2017
Thanks Dave,
It works!
You may make the added screenshot more readable, as the previous ones, by using a higher contrast and a larger font size. :-)
Also, you may expand the "field of possibilities" by pointing out changes in the background color of answers list or in the font size of warning message:
.sg-question-has-warnings {
background: #FCFCC7;
}
.sg-question-warninglist {
font-size: 16px;
}
Those two changes proved useful for my project, but I had to "dig". :-(
Admin
— Dave Domagalski on 01/27/2017
@Corneliu: Thank you for exploring our content!
This should be possible for soft-required validation as well. I have updated this document with CSS classed for the soft-require warning. You will find these in the screenshot at the bottom of the article.
I hope this helps clarify!
David
Documentation Specialist/Survey Explorer
SurveyGizmo Customer Experience
— Cmuntean on 01/26/2017
HI,
Instructions above are extremely helpful for changing colors of error messages when we deal with REQUIRED answers.
However, my intention is to implement similar adaptations for SOFT-REQUIRED answers, and I was unable to find a solution (CSS code) for this error messages category.
Is there any possibility to implement such adaptations for soft-required answers?
Yours,
Corneliu
Admin
— Bri Hillmer on 03/11/2016
@CCEM: You sure can! Here is the tutorial that covers how! I'll make sure it's linked here as a related tutorial to help other customers find it!
http://help.surveygizmo.com/help/article/link/change-text
Bri
Documentation Coordinator/Survey Sorceress
SurveyGizmo Customer Support
— CCEM on 03/11/2016
Hi Team,
Can we also edit Error Messages text ? For example change from "This question is required " into "Please specify your age" which related to the question text .
Thank you so much for you support.
Lee