HTML editing is available throughout RedJade by clicking on <> from the formatting toolbar to View HTML. Some commonly used HTML codes that you may want to include in surveys are outlined below. The code should be copied in its entirety and pasted into the View HTML editor.




See the following HTML code examples:



NOTE – There are many online resources available that provide guidance on using HTML code, for example:



Online Email Test:

 
The code below will allow the individual to click "START SURVEY" to start their survey and will also embed the entire URL into the email if needed for copying and pasting. The code makes it simple for the survey participant to start their survey.


<p>Click on the link below to start the survey.<br><a href="https://{{survey_url}}">START SURVEY</a><br>This survey is to be completed by the addressee only. No other person is allowed to participate in the test.<br>Thank you in advance for your cooperation.</p>


Or you may paste the following into your browser:

<a href="https://{{survey_url}}&amp;">{{survey_url}}</a>



Automated Redirect After a Survey: 


The code below will allow an automated redirect to another website via HTML. This button works well for an Online Anonymous survey or to redirect someone to a specific website and should be used in the Participant End Screen. Please note that this WILL REDIRECT RedJade when inserted after the specific time. The code below may be modified by the following:

  • The URL for the redirect must be entered in place of https://redjade.net - KEEP SINGLE APOSTROPHES.
  • Change "20" to the amount of time prior to the screen refresh


<html>
  <head>
    <meta http-equiv="refresh" content="20; url='https://redjade.net'" />
  </head>
</html>



Button for Redirect After a Survey: 


The code below will allow a button to be inserted via HTML. This button works well to setup a kiosk for an Online Anonymous survey or to redirect someone to a specific website and should be used in the Participant End Screen. The code below may be modified by the following:

  • The URL for the redirect must be entered in place of INSERT URL HERE - KEEP SINGLE APOSTROPHES.
  • BUTTON TEXT should be replaced with the text on the button you would like visible.
  • Change the background color or line color of the button by using hexadecimal color values.
  • Optionally, change _top to _blank if you wish to open the redirect link in a new tab or window.


</p><p style="text-align: center;">
<button style="background-color:c#568AA7; border-color:#568AA7; color:white" onclick="window.open('INSERT URL HERE - KEEP SINGLE APOSTROPHES', '_top')">BUTTON TEXT</button>
</p>



Insert Image Variable Centered with Ability to Adjust Size: 


The code below will allow an Image from the Sample Forms to be inserted via variable and adjusted using HTML. 

  • Change the size of the image by changing the percentages for width and height.
  • Keep the percentages the same so that your image is not distorted.
  • Final image size depends on the image upload size, size of screen, etc. 

<p style="text-align: center;"><img src="{{sample_image_url}}" width="25%" height="25%"></p>



Insert Flashing Text using HTML: 


The code will allow text to flash inside of a HTML Code Edit.

  • Font Color is set using Hexadecimal
  • Font Size is set in Pixels
  • Font Weight is BOLD Below
  • Font Type is Sans-Serif


<style>
.blink {
animation: blinker 1.0s linear infinite;
color: #1c87c9;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
<p class="blink">CLEANSE YOUR PALATE</p>



Insert a Tooltip Using HTML: 


The code will add an (i) icon and display the entered title text on hover-over.

  • Change the text entered in title= to the text you want displayed.
  • Change font-size: value to increase/decrease the size of the

<p><a href="" title="this is your tooltip" style="font-size:24px" class="fa"> &#xf05a; </a></p>



Insert a Giphy Using HTML: 


The code will display a giphy in you survey.

  • Copy the "<> Embed" link from https://giphy.com/ for the giphy you'd like to display.
  • Paste it in to the View HTML in RedJade
  • Add style="pointer-events: none;" to prevent the giphy from being clicked and opening a new browser page
  • Remove <p><a href="https://giphy.com/gifs/happy-friday-sTczweWUTxLqg">via GIPHY</a></p> to remove the footer text under the giphy.
  • Change the size of the giphy by changing the values for width and height.


<iframe style="pointer-events: none;"  src="https://giphy.com/embed/sTczweWUTxLqg" width="480" height="345" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/happy-friday-sTczweWUTxLqg">via GIPHY</a></p>