Customize authentication page of a survey | XM Community
Skip to main content

Dear Qualtrics Community,
I have a survey project that respondents need to authenticate using their school email address. So all emails have the same domain (@xxxxxx.xx). I'd like to custom my authenticator page so that students only need to type in the letters before "@" in their email address (which is their user account). Is there a way to add "@xxxxxx.xx" within the authenticator box or right after the box (see highlighted spots below)? Any suggestions would be highly appreciated.
I thought of customizing authenticator message, but the message would always show above the box, isn't it?
image.png

You can add this script to the header:


Do a search and replace for the domain.

I'm also looking to customize our Authenticator further, so I hope this is a good place to post.
We're currently using the following (working) jquery script to auto-convert input on our Authenticator to uppercase:
jQuery('div[id^="Authenticator"] .InputText').on("input", function() { this.value = this.value.toUpperCase(); });
I've been trying to convert it to regular javascript (i.e. to fit into the format you have written above), because I want to add a function to check their input and, if they submit w/o any input (i.e. null/blanks), it will change their input to "." or something so they can bypass the authentication w/o having to type something.

Just add this line to your existing code, right after the Upper Case statement:

if(this.value == "") this.value = "."


This works to add the "." to the input fields, but before they click the next button. I guess I should have said that I want it to add the "." only after they click the Next/Submit button (and no input is found).
Something like this (but I can't get it to work): jQuery('div[id^="Authenticator"]').on("submit", function() { if(this.value == "") this.value = "." });

document.querySelector("#NextButton").onclick = function () {
    if (document.querySelector(".InputText").value == "")
        document.querySelector(".InputText").value == ".";
};

Ok, here's where I'm at (I can't get the NextButton script to work):


ahmedA How to hide the next button in authentication page.

Leave a Reply


Terms & Conditions