Adding warning to text entry box | XM Community
Skip to main content

In a text entry box question, is it possible to add a standard text that disappears when the respondent starts typing? I'd like to add a warning such as: “Please note that your answers will be registered verbatim” or something like that.

I think you might be referring to placeholder text. Try adding the below to the OnReady section of the Text Entry’s JavaScript:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

 


I think you might be referring to placeholder text. Try adding the below to the OnReady section of the Text Entry’s JavaScript:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

 

Hi @Tom_1842 , this is not working for some reason. Does it matter which Style I'm using?


Hmm, what is your setup exactly? The below are all working on my end:

Flat, Modern, Classic Layouts

Text Entry Question Type any size:

jQuery("#"+this.questionId+" .InputText").attr("placeholder", "Please note that your answers will be registered verbatim");

Form Field Question Type:

jQuery("#"+this.questionId+" .InputText").eq(0).attr("placeholder", "1 Please note that your answers will be registered verbatim");
jQuery("#"+this.questionId+" .InputText").eq(1).attr("placeholder", "2 Please note that your answers will be registered verbatim");
jQuery("#"+this.questionId+" .InputText").eq(2).attr("placeholder", "3 Please note that your answers will be registered verbatim");

Multiple Choice Question Type with 'Allow Text Entry' enabled:

jQuery("#"+this.questionId+" .TextEntryBox").attr("placeholder", "Please note that your answers will be registered verbatim");

 

Simple Layout

Add to Header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Text Entry Question Type any size:

jQuery("#question-"+this.questionId+" .text-input").attr("placeholder", "Please note that your answers will be registered verbatim");

Form Field Question Type:

jQuery("#question-"+this.questionId+" .text-input").eq(0).attr("placeholder", "1 Please note that your answers will be registered verbatim");
jQuery("#question-"+this.questionId+" .text-input").eq(1).attr("placeholder", "2 Please note that your answers will be registered verbatim");
jQuery("#question-"+this.questionId+" .text-input").eq(2).attr("placeholder", "3 Please note that your answers will be registered verbatim");

Multiple Choice Question Type with 'Allow Text Entry' enabled:

jQuery("#question-"+this.questionId+" .text-input").attr("placeholder", "Please note that your answers will be registered verbatim");

 


Still nothing. I'm using the Simple Layout, and the question is Text Entry multiple lines.

Is it relevant that there is a Display logic enabled? the question appears based on a previous selection.

 


I edited my comment to add that jQuery needs to be included in the Header for Simple layout. Try adding the below to the survey’s Header in the General section of the Look & Feel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 


Thank you @Tom_1842 , that did it! Just to be sure: is this addition in the header necessary whenever adding custom JS to questions? Also, adding that line introduced some space between the logo and the survey, how do I remove that?


jQuery is included by default for Flat, Modern, and Classic Layouts but not for Simple Layout at this time. Adding it is only necessary for Simple Layout. Also, most IDs and class names are different for Simple Layout. The above code on adding placeholder text is a good example on how things are a little different vs the Flat, Modern, and Classic Layouts.

To remove the space between the logo and the survey for Simple Layout, add the below CSS to the Style section of the Look & Feel:

#page #header-container {
display: none;
}

 


You're awesome @Tom_1842 , thanks!


May I know how to include the translations for the placeholder text here?


May I know how to include the translations for the placeholder text here?

Hi @KSaran, this is how I did it (in my case Dutch is the default):

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

Qualtrics.SurveyEngine.addOnReady(function() {
var placeholderText = "";

// Get the language code from the survey object
var Q_Language = Qualtrics.SurveyEngine.getEmbeddedData('Q_Language');

// Set the placeholder text based on the language code
if (Q_Language === "EN") {
placeholderText = "Please note:";
} else if (Q_Language === "DE") {
placeholderText = "Bitte beachten Sie:";
} else if (Q_Language === "FR") {
placeholderText = "Veuillez noter que:";
} else {
placeholderText = "Let op:";
}

// Set the placeholder text for the text entry questions
jQuery("#" + this.questionId + " .InputText, .TextEntryBox").attr("placeholder", placeholderText);
});

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

 


Leave a Reply