Style your survey

Survey123 Connect provides tools to configure the presentation of your survey, allowing it to stand out to users. You can change the survey's information presented in the gallery, the title present when you've opened the survey, and the colors and styling of your survey to make it visually distinct. You can also insert media into your survey and add HTML formatting.

Thumbnail, title, description, and tags

The thumbnail and survey name are important to visually differentiate your surveys in the Survey123 field app gallery. This is particularly important if you're creating multiple surveys for your own use or if field crews download more than one survey.

Use a thumbnail to differentiate your surveys.

To change the thumbnail and other properties of a survey item, complete the following steps:

  1. Open your survey in Survey123 Connect.
  2. Click the Details tab.
  3. Click the thumbnail image to browse to an image file. For best results, use images that are 600x400 pixels in size.
  4. Optionally, enter text for the item title, summary, and description of the survey.
Caution:

Survey123 Connect requires all image files used for thumbnails to have a lowercase file extension. Uppercase file extensions are not recognized by Survey123 Connect, and these thumbnails won't be published with the survey.

Your thumbnail may not display correctly if its file name contains spaces, symbols, or special characters.

Set the survey title

The survey title appears when you open the survey from the gallery. It can provide a more detailed description of your survey. The survey title is not the same as the survey name, which is displayed in the gallery.

Create a title for your survey.

You can set the survey title by entering the value in the form_title column of the settings worksheet.

Define your title on the settings worksheet.

Use images in your survey

Using images in your surveys can be helpful in many ways. It's not just a matter of making your surveys pleasing to the eye; images in your survey can help people make determinations when filling in information. Providing images in your surveys can assist with making visual identifications or estimations.

Add an image to your survey.

To add an image to your survey, complete the following steps:

  1. Preview your survey in Survey123 Connect.
  2. On the toolbar on the side, click the browse button to open the folder location of your survey project.
  3. Add your images to the media subfolder.
  4. In your survey workbook, make sure there's a media::image column.
  5. When you add a note field type to contain your image, enter the file name of the image in this column. Be aware that image names are case sensitive.

You can also use images for select field type questions. This will display a set of images to choose from rather than text descriptions.

Use images in a selection list.

To add images to your select field type questions, complete the following steps:

  1. Preview your survey in Survey123 Connect.
  2. On the toolbar on the side, click the browse button to open the folder location of your survey project.
  3. Add your images to the media subfolder.
  4. In your choices workbook, make sure there's a media::image column.
  5. When you add an entry to your choice list, enter the file name of the image in this column. Be aware that image names are case sensitive.
  6. In your survey workbook, make sure there's an appearance column.
  7. Set the appearance of your select field type to compact.

Style settings

Style settings allow you to control the colors of various elements in your survey. The Style panel is located on the right of the Form tab.

Experiment with survey styles.

Text and background colors can be customized for the survey header, body, input fields, and footer. Click the palette button to choose a color, or enter the hexadecimal color code or HTML color name in the field provided. The contrast button above the text color inputs provides an indication of readability. Click the button to see the contrast ratio between the text and background colors; a ratio below 4.5 is not recommended, as indicated by a red contrast button.

You can also use an image as the background of your survey. The image file you select as the Background image will be copied to the media subfolder in your survey project folder.

HTML formatting

You can use HTML formatting in both label and note fields, as well as hints and the labels of choice lists. Applying formatting to these instructions can help draw attention to important information. Supported HTML formatting is as follows:

<font color="red">Text in red</font>

<a href="https://www.esri.com">Link to esri web site</a>

<b>This text is bold</b>

<i>This text is in italics</i>

<h1>Header 1</h1>

<h2>Header 2</h2>

Add a line break<p>into a label

<center>This text is centered</center>

<blockquote>Blockquote (indented)</blockquote>

<u>underlined</u>

<tt>typewrite</tt> font

<s>strikethrough</s> font

<ul><li>Unordered list,</li><li>with two items</li></ul>

<ol><li>Ordered list,</li><li>with two numbered items</li></ol>

Note:

Links in choice labels don't function in the Survey123 web app in the following situations:

  • When the appearance type set in Survey123 Connect is minimal or autocomplete.
  • When using the rank question type in Survey123 Connect.
  • When using the Dropdown or Ranking question types in the Survey123 web designer.

By default, a hyperlink created with HTML formatting opened in the Survey123 web app will open the destination in the same tab as the survey. To open this link in a new tab instead, add target="_blank" to the a href tag, for example:

<a href="https://www.esri.com" target="_blank">Link to Esri website</a>

Thank you screen

A thank you screen appears when data is submitted by the user in the Survey123 web app. This screen can be edited on the Settings tab of the web designer and supports rich text editing, including links and images. A check box is also available to provide the option to send another response.

For surveys designed in Survey123 Connect, this thank you screen can be edited by opening the Design page for this survey in the Survey123 website. To save these changes, click Publish and confirm.