Skip To Content

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 Settings tab and click the General 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.

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 out 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

Styles help you control the colors of basic elements in your survey. The Style tab is located on the Settings tab.

Experiment with survey styles

Click the default settings to choose a color or enter the hexadecimal color name in the field provided. Colors can be customized for the survey text, background color, toolbar text, toolbar background, and input text. You can also use an image as the background of your survey, but be sure that the image you're referencing is in the media subfolder of your survey project folder.

Label HTML formatting

You can use HTML formatting in both label and note fields. 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="http://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</H>

<H2>Header 2</H>

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>