I have designed few end of survey messages templates and Email template to be sent out to the survey takers. The development team in my company created this for me using HTML and CSS coding. The codes doesn't seem to working at all.
Here is my question - Is CSS/bootstrap.min.js and javascript supported in RIch Content Editor?
Page 1 / 1
CSS and JavaScript are supported in end of survey messages. To add/edit, you must edit in HTML source mode, not the Rich Content Editor.
JavaScript is not supported in email templates. CSS support is dependent on the recipient's email client, but in general, CSS support is very limited. Your best bet is to use very simple, inline css styles if you want it to render correctly for most of the recipients.
JavaScript is not supported in email templates. CSS support is dependent on the recipient's email client, but in general, CSS support is very limited. Your best bet is to use very simple, inline css styles if you want it to render correctly for most of the recipients.
Editing has been done in HTML source mode. Also, we want the email and end of survey messages to be dynamic, so that they can adjust automatically to the screen on which it is viewed(desktop, tablet and mobile).
For example, here is a snippet of the code created ---
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DG_2662a-20 CXM Assessment Report web page design</title> <link rel="stylesheet" type="text/css" href="../02 CSS/DG_2662a-20_Stage 01_Webpage2.css"> <script src="../02 CSS/bootstrap.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <style> .section1 { width: 100%; height: 250px; color: Black; padding-left: 0px; padding-top: 0px; font-family: "Gt Walsheim"; font-size: 15pt; text-align: left; } .section2 { width: 100%; height: auto; background-color: #666666; color: white; padding-left: 15px; padding-top: 10px; padding-bottom: 20px; font-family: "Gt Walsheim"; font-size: 14pt; } .container1 { position: relative; font-family: Gt Walsheim; padding-top: 5px; width: 100%; } .container2 { position: relative; font-family: Gt Walsheim; padding-top: 5px; width: 100%; } .left-item { color: black; background-color: #d9d9d9; padding-left: 25px; font-size: 13.5pt; font-family: GT Walsheim; padding-right: 65px; padding-top: 15px; padding-bottom: 15px; line-height: 28px; } .right-item { background-color: #d9d9d9; width: 100%; padding-top: 15px; padding-bottom: 15px; } .left-item2 { color: black; background-color: #d9d9d9; padding-left: 25px; font-size: 13.5pt; font-family: GT Walsheim; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; line-height: 28px; } .right-item2 { background-color: #d9d9d9; width: 100%; padding-top: 15px; padding-bottom: 15px; } .left-items1 { color: white; padding-left: 25px; padding-right: 25px; font-size: 1.5vw; font-family: GT Walsheim; padding-right: 130px; padding-top: 10px; padding-bottom: 0px; line-height: auto; position: absolute; display: block; } .middle-items1 { background-color: #ffffff; float: left; height: 100%; border-bottom: 1px solid #ffffff; } .right-items1 { color: black; background-color: #ffed00; padding-left: 35px; font-size: 16pt; font-family: GT Walsheim; padding-right: 150px; padding-top:10px; padding-bottom: 0px; line-height: 30px; text-align: left; border-bottom:2pt; border-bottom: 5px solid #ffffff; } .container3 { position: relative; font-family: Gt Walsheim; padding-top: 35px; width: 100%; } .container4 { display: flex; font-family: Gt Walsheim; padding-top: 25px; background-color: black; height: 600px; width: 100%; } .container5 { display: relative; font-family: Gt Walsheim; background-color: black; height: 100px; right: 100px; } .stages { display: flex; font-family: Gt Walsheim; padding-top: 5px; background-color: none; height: 600px; width: 100%; } .col-one, .col-two, .col-three, .col-four, .col-five { margin: 1%; width: 20%; height: 250px; padding: 0 25px; background: #000000; color: white; line-height: 35px; } .c1, .c2, .c3, .c4, .c5 { margin: 1%; width: 16%; height: 250px; padding: 5px 15px; color: white; line-height: 25px; display: flex; width: 100%; } .text-block1 { position: absolute; Top: 100px; right: 20px; color: black; padding-left: 20px; padding-right: 20px; font-size: 20pt; font-family: GT Walsheim; }
Is this too complicated to use in QUaltrics?
For example, here is a snippet of the code created ---
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DG_2662a-20 CXM Assessment Report web page design</title> <link rel="stylesheet" type="text/css" href="../02 CSS/DG_2662a-20_Stage 01_Webpage2.css"> <script src="../02 CSS/bootstrap.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <style> .section1 { width: 100%; height: 250px; color: Black; padding-left: 0px; padding-top: 0px; font-family: "Gt Walsheim"; font-size: 15pt; text-align: left; } .section2 { width: 100%; height: auto; background-color: #666666; color: white; padding-left: 15px; padding-top: 10px; padding-bottom: 20px; font-family: "Gt Walsheim"; font-size: 14pt; } .container1 { position: relative; font-family: Gt Walsheim; padding-top: 5px; width: 100%; } .container2 { position: relative; font-family: Gt Walsheim; padding-top: 5px; width: 100%; } .left-item { color: black; background-color: #d9d9d9; padding-left: 25px; font-size: 13.5pt; font-family: GT Walsheim; padding-right: 65px; padding-top: 15px; padding-bottom: 15px; line-height: 28px; } .right-item { background-color: #d9d9d9; width: 100%; padding-top: 15px; padding-bottom: 15px; } .left-item2 { color: black; background-color: #d9d9d9; padding-left: 25px; font-size: 13.5pt; font-family: GT Walsheim; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; line-height: 28px; } .right-item2 { background-color: #d9d9d9; width: 100%; padding-top: 15px; padding-bottom: 15px; } .left-items1 { color: white; padding-left: 25px; padding-right: 25px; font-size: 1.5vw; font-family: GT Walsheim; padding-right: 130px; padding-top: 10px; padding-bottom: 0px; line-height: auto; position: absolute; display: block; } .middle-items1 { background-color: #ffffff; float: left; height: 100%; border-bottom: 1px solid #ffffff; } .right-items1 { color: black; background-color: #ffed00; padding-left: 35px; font-size: 16pt; font-family: GT Walsheim; padding-right: 150px; padding-top:10px; padding-bottom: 0px; line-height: 30px; text-align: left; border-bottom:2pt; border-bottom: 5px solid #ffffff; } .container3 { position: relative; font-family: Gt Walsheim; padding-top: 35px; width: 100%; } .container4 { display: flex; font-family: Gt Walsheim; padding-top: 25px; background-color: black; height: 600px; width: 100%; } .container5 { display: relative; font-family: Gt Walsheim; background-color: black; height: 100px; right: 100px; } .stages { display: flex; font-family: Gt Walsheim; padding-top: 5px; background-color: none; height: 600px; width: 100%; } .col-one, .col-two, .col-three, .col-four, .col-five { margin: 1%; width: 20%; height: 250px; padding: 0 25px; background: #000000; color: white; line-height: 35px; } .c1, .c2, .c3, .c4, .c5 { margin: 1%; width: 16%; height: 250px; padding: 5px 15px; color: white; line-height: 25px; display: flex; width: 100%; } .text-block1 { position: absolute; Top: 100px; right: 20px; color: black; padding-left: 20px; padding-right: 20px; font-size: 20pt; font-family: GT Walsheim; }
Is this too complicated to use in QUaltrics?
> @pXarma said:
> Is this too complicated to use in QUaltrics?
It is not too complicated for an end of survey message, but you probably need to have CSS load the font (i.e., @font-face) since it is not a standard one.
It is definitely too complicated for many or most email clients (font, flex, etc.). You need to keep email formatting simple (e.g., tables, a standard font and inline styles).
> Is this too complicated to use in QUaltrics?
It is not too complicated for an end of survey message, but you probably need to have CSS load the font (i.e., @font-face) since it is not a standard one.
It is definitely too complicated for many or most email clients (font, flex, etc.). You need to keep email formatting simple (e.g., tables, a standard font and inline styles).
Thanks Tom!! this is really helpful...
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.