You can create a custom message that is shown after a user successfully completes a quiz. Here's an example test certificate.
Here's the custom message content:
Cert# ${e://Field/ResponseID}
You will need to change:
1) the user's name variable: (shown as: ${q://QID3/ChoiceTextEntryValue} in custom message above)
2) the course name in the template (is listed as: Fork Lift Safety Training above)
3) Add your organization name and logo
You can create a custom message that is shown after a user successfully completes a quiz. Here's an example test certificate.
Here's the custom message content:
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10*/
w.print();
return true;
}
Cert# ${e://Field/ResponseID}
	You will need to change:
	1) the user's name variable: (shown as: ${q://QID3/ChoiceTextEntryValue} in custom message above)
	2) the course name in the template (is listed as: Fork Lift Safety Training above)
	3) Add your organization name and logo
document.write() is a strongly discouraged method for JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
I’d recommend looking into other methods of appending to the new window’s document, particularly using jQuery: https://api.jquery.com/append/
I know you could also use the at-media print method to exclude certain elements when printing the document: https://developer.mozilla.org/en-US/docs/Web/CSS/@media
That being said, CSS files uploaded to Qualtrics’ library is recognized as a text/plain instead of a text/css file, leading to errors if you import it unfortunately. And the only ways I’ve found to get around it are not really recommended.
Update: The best way you could do this with CSS and very little JavaScript is just:
- Create a <style type=”text/css” media=”print”> tag on the page of your certificate via the rich content editor of the certificate Text/Graphics question per se and then inside that, set styles to make what you don’t want to show in the print not show.
 - Make the print button run window.print() when clicked.
 
My certificate works fine on Submit but when you try to print it the certificate is split across two pages. (see screenshot). I have tried multiple CSS tags like: background-position: center top; to no avail. I’d appreciated any help on getting this cert to print on one page.
After hours of fiddling with the custom CSS, we finally found the answer.
In the @media print, we used the -300px for the top and -50 for left which brought the certificate image (.centered-background) up to the top of the page. Now we had the certificate on the one page, instead of it splitting two pages. Then setting the @page to landscape brought everything together. Now, it was a matter of getting the name of the person (.content1) to be positioned on the certificate after moving it up and over. The trick was to use !important after the top 3px and left 325px. Without the !important, the name wouldn't move.
/* Print-specific styles */
  @media print {
    .centered-background {
      width: 800px;
      height: 600px;
      overflow: visible;
      position: absolute;
      top: -300px;
      left: -50px;
    }
@media print {
  .content1 {
  position: absolute;
  top: 3px !important;
  left: 325px !important;
  transform: translate(-50%, -50%);
  z-index: -1; /* Ensure content is on top of the background */
  }
}
/* Targets all the pages */
@page {
size: landscape !important; 
}
Here’s the screen shot of how it looks now.
How did you get the image to show up in the email? I am trying to get the image of the certificate to even show up in the email that the people get when they pass and get the name on the certificate.
By creating a simple Workflow email that’s kicked off with a Survey Response, you can send the certificate to the Respondent’s email address by putting their piped answer to your email question in the To window of the email form which would look something like this: ${q://QID18/ChoiceTextEntryValue/3}. Then, at the bottom of email form check the box “Include Response Report” which will attach the cert to the email. Hope that helps…!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
