Data Entry Prompt HTML

Use HTML in variable prompts to add links, images, and custom styling.

Role required: Project Management

This page covers HTML and CSS code examples for variable prompts. No product screenshot applies—the examples are code snippets to paste into the prompt editor.

Open the prompt editor

  1. Sign in at https://my.studytrax.com.
  2. Open the project.
  3. Go to Projects → Variable Groups (confirm in app).
  4. Open the variable group and select the variable.
  5. Edit the Prompt field.

Email links

Create a mailto link that opens the user's email client:

<a href="mailto:coordinator@example.org">Email coordinator</a>

With subject and body:

<a href="mailto:coordinator@example.org?subject=Study%20Question&body=Hello%2C%0A%0A">Email coordinator</a>

With cc:

<a href="mailto:coordinator@example.org?cc=backup@example.org">Email coordinator</a>

Replace coordinator@example.org with your actual address. URL-encode spaces as %20 and newlines as %0A.

Hyperlinks

<a href="https://example.org/resource" target="_blank">View resource</a>

Use target="_blank" to open in a new tab.

Images in prompts

<img src="https://example.org/diagram.png" alt="Diagram" />

Keep images small to avoid layout issues. For pick-list option images, use the Data Entry Override field instead.

Pick-list option images

In the Data Entry Override for a pick-list variable, use an img tag:

<img src="https://example.org/option-icon.png" alt="Icon" style="height:20px;" />

Heading rows

Use <hr> for a horizontal rule separator:

<hr />

Set the variable's Layout Type to Heading to span the full width of the form. This is useful before consent iframes or major sections.

Consent in an iframe

Display a PDF consent document inline using an iframe inside a 100%-width table:

<table style="width:100%;">
  <tr>
    <td>
      <iframe src="https://example.org/consent.pdf" style="width:100%; height:600px;"></iframe>
    </td>
  </tr>
</table>

Browser note: Chrome typically shows the full PDF viewer with page navigation. Edge may render smaller or centered. Test in both browsers if participants use varied devices.

CSS styling examples

Hide required-error message on one question

<style>
  #field-container-VARCODE .required-error { display: none; }
</style>

Replace VARCODE with the variable's code.

Checkbox background color

Change background when checked vs unchecked:

<style>
  .internal-control input[type="checkbox"]:checked + label {
    background-color: #d4edda;
  }
  .internal-control input[type="checkbox"]:not(:checked) + label {
    background-color: #f8d7da;
  }
</style>

Red prompt text

<p style="color:red;">Important: Review before continuing.</p>

Or use a span:

<span style="color:red;">Required by protocol</span>

Restyle hint text

The hint font can be styled to match the prompt:

<style>
  .hint-text { font-size: 14px; font-style: normal; }
</style>

Related