How to change color of Request Response dialog box | XM Community
Skip to main content

My survey uses dark blue as the background with a white question container.

Some of my questions have Response Requirements - REQUEST RESPONSE turned on.

If a respondent tries to skip the question, the request response dialog box appears in dark blue with black text which makes it practically unreadable.

How can I change either the text color or the background color of this box? I tried contacting Qualtrics support but they said I needed to use custom code and referred me to this platform. I am hoping I can do it with CSS but I don’t know what I would enter.

 

Try adding the below CSS to the Style section of the survey’s Look & Feel:

.JFEScope .PageErrorDialog {
background-color: #ffffff !important;
}

.JFEScope .PageErrorDialog .ErrorTitle {
background: inherit !important;
background-color: #ffffff !important;
}

.JFEScope .PageErrorDialog .ErrorButtons button {
background: inherit !important;
background-color: #ffffff !important;
}

 


Awesome! That worked perfectly! I could not have fixed this without your help (I tried everything). Thank you so much 😀


Hi @Tom_1842 

Thank you so much for this answer. It was super helpful for me as well. 

 

I was wondering if there’s a way to get rid of the warning triangle icon in the message?

In general I’m looking to either replace it with something more friendly or remove it at all. Maybe change it to listening icon like the one here

 

THANKS!!


@deveer One way to change the symbol that displays next to the Request Response message for Classic layout is to add the below CSS to the Style section of the Look & Feel, updating the URL as needed:

.JFEScope .PageErrorDialog .ErrorIcon.Warning {
background: url(https://uploads-us-west-2.insided.com/qualtrics-us/attachment/eb57b3e8-f510-40eb-aff7-7c8d6374853b.png) no-repeat !important;
background-size: 100% 100% !important;
}

 


The CSS code didn’t work for me. Do I need to change something? 

 


Thank you @Tom_1842  for your kind response… I’m actually going to leave here the CSS code that I’m using now so if it helps someone I’m happy:

 

By Copy Pasting this code to the Java Script of a question you’ll get the option of request a response dialog that is customized and with translations (taking into consideration surveys with more than one language). 

 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
    jQuery("#NextButton").click(function() { 

if("${e://Field/Q_Language}" == "VI") {

setTimeout(function() {
jQuery("#ErrorMessage > span").html("Chúng tôi hiểu rằng bạn đã dành công sức để chia sẻ ý kiến! Vậy nên, Đội ngũ Trải Nghiệm Checkout của chúng tôi sẽ đọc ý kiến một cách cẩn thận. Chúng tôi rất mong đợi đọc ý kiến chi tiết từ bạn."); 
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(1)").html("Câu hỏi tiếp theo");
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(2)").html("Tôi sẽ để lại ý kiến của mình"); 
}, 5);  

};

if("${e://Field/Q_Language}" == "EN" ) {

setTimeout(function() {
jQuery("#ErrorMessage > span").html("We know writing feedback requires effort. The Checkout Experience Team reads every comment. We’re looking forward to reading your detailed one too."); 
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(1)").html("Next question");
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(2)").html("Sure, I'll provide feedback"); 
}, 5);  

};

if("${e://Field/Q_Language}" == "ZH-S") {

setTimeout(function() {
jQuery("#ErrorMessage > span").html("我们了解填写意见回馈耗时费力。 Checkout Experience 团队将仔细阅读每一则评论,我们也期待阅读您详细的评论。"); 
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(1)").html("下一个问题");
jQuery("#Page > div > div.PageErrorDialog > div.ErrorButtons > button:nth-child(2)").html("当然,我会提供反馈"); 
}, 5);  

};
        
});

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

 

 

 

Also, I’m putting here the colors CSS + as bonus changing the look and feel of an NPS questions so the buttons are square and not small rounds.+ Changing the icon and color of force response and validation error. 

 

 

.Skin .ValidationError::before {
  content: "\00a0"; /* Adding one non-breaking space for minimal space */
  display: inline-block;
}

.Skin .ValidationError {
  background: url(https://payoneer.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_SvLMHSzh2ze23Hy) no-repeat left top !important;
font-size: 16px; /* Adjust the font size as needed */
}


.Skin .ValidationError {color: #da54d8 !important
}


#SurveyEngineBody .Skin .MC .MAHR table.ChoiceStructure td,#SurveyEngineBody .Skin .MC .SAHR table.ChoiceStructure td,#SurveyEngineBody .Skin .NPS table.ChoiceStructure td {
    text-align: center
}
#SurveyEngineBody .Skin .LabelWrapper {
    width: 100%;
}
#SurveyEngineBody .Skin .MC .QuestionBody label {
    vertical-align: 1px;
}

#SurveyEngineBody .Skin label.MultipleAnswer, #SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer {
    cursor: pointer;
    background: #f1f1f1!important;
    background: rgba(0,0,0,.06)!important;
    border: none;
    transition: background .2s ease-in-out;
    display: block;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
span.LabelWrapper label>span {
    display: inline-block;
}#SurveyEngineBody .Skin .MC label.q-checkbox, #SurveyEngineBody .Skin .MC table.ChoiceStructure label.q-radio {
    display: none;
}
#SurveyEngineBody .Skin .MC .QuestionBody table.ChoiceStructure label {
    vertical-align: 1px;
}
#SurveyEngineBody .Skin label.q-radio {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
#SurveyEngineBody .Skin label.q-checkbox, #SurveyEngineBody .Skin table.ChoiceStructure label.q-radio {
    border: 2px solid #111;
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    background: 0 0;
}

#SurveyEngineBody .Skin label.MultipleAnswer.q-checked, #SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer.q-checked {
    background: #0092f4!important;
    border-color: #000;
    color: #fff;
}
#SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody {
    color: #000;
    font-size: 16px;
    overflow-y: hidden;
    padding: 0 20px 20px 20px!important;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px){
#SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody {
    padding: 0 10px 10px 10px!important;
}
}


.JFEScope .PageErrorDialog {
background-color: #ffffff !important;
color: #ffffff !important;
}

.JFEScope .PageErrorDialog .ErrorContainer {
color: #000000 !important;
}

.JFEScope .PageErrorDialog .ErrorTitle {
background: inherit !important;
background-color: #caeaff !important;
color: #000000 !important;
}

.JFEScope .PageErrorDialog .ErrorButtons button {
background: inherit !important;
background-color: #caeaff !important;
color: #000000 !important;
font-size:13.5px;
}


.JFEScope .PageErrorDialog .ErrorButtons button:hover {
background: inherit !important;
background-color: #edfcf5 !important;
color: #000000 !important;
font-size:13.5px;
}

inputotype="text"], textarea{

font-size: 22px!important;

}
 

 

Here how all looks like

 

 

 

When hovering

 

Error: 

 


Leave a Reply