Surveys with style

21434
31
08-23-2015 07:19 PM
IsmaelChivite
Esri Notable Contributor
8 31 21.4K

 

Updated September 2021. New HTML style syntax and renewed screenshots.

 

Here are 6 quick tips to make your surveys look better using Survey123 Connect: Thumbnails, Titles, Images, Styles, Label HTML formatting and emojis.

 

1) USING A SURVEY THUMBNAIL

The thumbnail is important to visually differentiate your surveysbin the Survey123 mobile app gallery.  This is particularly important if field crews download more than one survey.

humbnails.png

 You can change the thumbnail image of your survey from the Details tab of your survey in Connect. Alternatively, you can also change the thumbnail from the Survey123 website or directly in the item details page of the Form item in ArcGIS.

 

2) SETTING A SURVEY TITLE

The name and the title of your survey are different things. The name is just the name of the Form item. The title is what users of your form will see in the Survey123 field and web apps.

IsmaelChivite_0-1632335596494.png

 

In Survey123 Connect, the survey title is controlled through the form_title property in the Settings worksheet of your XLSForm. 

 

IsmaelChivite_1-1632335704113.png

 

3) USING IMAGES IN YOUR SURVEY

It is not just a matter of making your surveys look good, which is important... images in your survey can help people make the right calls when filling out information.

For example, say you are creating a Wolf Reporting survey. Well... you will want to make sure people can tell the difference between a wolf and a coyote. You may think you know the difference, but lots of people don't.

Here is an example showing how an image, for informational purposes, has been embedded into a form. 

 

IsmaelChivite_0-1632336329670.png

 

To add an image into a form using Survey123 Connect, you first need to copy your image into the survey's media folder. Then, you reference it in XLSForm:

  • In Survey123 Connect, while previewing your survey, click on the Files option in the side bar. This will open your survey's directory, where you will find the media folder.
  • In your XLSForm, add the name of your image file, including the extension, into the media::image column. In the example below, I added an image to a note question with no label.

 

IsmaelChivite_1-1632336590802.png

 

You can also use the media::audio column to associate audio files with questions, groups and notes in the survey worksheet. You can also associate them with choices in the choices worksheet!

 

4) USING STYLES

Styles help you control the colors of basic elements in your survey. You can open the style dialog in Connect by clicking on the painter's palette icon in the right vertical bar.   In the example below I changed the background and text color in the form to create a dark theme.

IsmaelChivite_0-1632336860580.png

 

5) LABEL HTML FORMATTING

 

You can use HTML formatting to highlight words in your questions, display warning notes as red and much more. Here is one example where we use a note to hint that values in questions above are not adding to 100. Note that we use HTML formatting to display the warning in red.  We also bold some words in the questions.

 

HTMLFormatting

The complete list of HTML tags accepted is listed in our style your survey help topic. Some common things you may want to do:

  • Center the label of a group or note: <div style="text-align:center">Centered label</div>
  • Change color of text in a label: <div style="color:red">Label in red</div>
  • Change the background color of a group: <div style="color:white; background-color:blue">Label with blue background</div>

6) Emojis

 

I bet you did not know about this one. You can use emojis in your forms. In the example below, I took weather emojis from EmojiMedia and pasted them into the Labels of choices in a select_one question. Fun!

 

31 Comments
WilliamClark1
New Contributor II

I'm having trouble with the title in the Survey123 initial screen, where there's the icon to start a new survey. The one I made says Form 1 and I don't know how to change it. I've typed a new title in the Title block under Settings but that didn't change that first Form 1 icon. I've changed the PNG that shows there, and I've changed the title in the Excel Form so that is shows the right title in the form itself. Capture.PNG

RonKnepper
Occasional Contributor II

Yeah it doesn't like spaces in the title from what I gather.  When you create one you can set your title but once its created goto settings and you can change it there too

WilliamClark1
New Contributor II

That's the problem though, I have changed it in there in Settings but it's not applying the change.

RonKnepper
Occasional Contributor II

Ok its kinda a pain now that I played with it and really should change this but in order to change the existing form the only way I could do it was to goto your My Survey Designs folder, find that form and manually rename each description file to the new name.  You have to do all the files with that name though.  Best to make sure you set the name up front

RonKnepper
Occasional Contributor II

The folder on your drive, mine is under ArcGIS

WilliamClark1
New Contributor II

I had a sneaking suspicion that I may have to do that, but thought I'd ask first.

Thanks a bunch.

Mark

WilliamClark1
New Contributor II

Also, note that in the App when I go to Download surveys it shows that name under that's under settings, but when I actually download it the original Form 1 name shows up.

WilliamClark1
New Contributor II

Ron, I have another question. Does Survey 123 allow users to cache an area where there's no cell service so they can still collect points? We're thinking about deploying some maps and forms fairly soon and this functionality would be very useful for our County (Tulare County, CA)

Mark

RonKnepper
Occasional Contributor II

Kinda we were play with this.  offline the basemap displays grey but if you are at the location needed w/gps it will collect your point but not see the basemap (the pinpoint moves but there is no reference)

WilliamClark1
New Contributor II

I've been looking at Survey 123 again and it appears that I may be able to wait until I have an internet connection to upload my data points, so I can use it to gather data when not connected. Is that true?

Also, I keep getting a Code 400 error when uploading my test points so I'm not sure what's wrong but I can't add data to my Geodatabase.

It looks like the perfect solution to our Ag Pest trapping and monitoring program if we can get these things ironed out.

Mark

IsmaelChivite
Esri Notable Contributor

Hi William,

You can capture data while offline.  Simply save your work locally in the device and once you are connected, go to the outbox and send. The most common use of Survey123 is offline, rather than connected.

  Error 400: Other users have reported that submitting photos in some scenarios cause error 400. Are you taking photos? You may want to send your form to survey123@esri.com so we can have a look.

WilliamClark1
New Contributor II

Okay, it will let me collect data offline, but can I get it to show me a map, preferably an aerial, while I'm working offline. Our ag commissioner people won't be happy with just showing a pinpoint in a blank screen.  I can use Collector, but I can't control the data inputs there and they have retired computer phobic types placing traps and collecting the data so we'd like to make it as friendly as possible.

PamBond
New Contributor III

I added audio files to a choices list

When creating the form using Survey123ConnectBeta (version 1.2.12), it shows the audio in the dropdown list (I used minimal styling - maybe this is the problem)

When I view the survey using the Survey123 on my Android phone, the audio symbols are not displayed (no little blue sound icons).  Where did I go wrong?  Maybe I am asking too much of the app at this stage in the game.

I appreciate any ideas or explanation.  Thanks!

IsmaelChivite
Esri Notable Contributor

Hi,

this could very well be a software defect. Could you zip the contents of your Survey?

1) Open Connect and Tap on your Survey

2) Use the Yellow button to open the location of the Survey in your local computer

3) Navigate one directory app and zip the entire survey folder (including XLS file and media folder)

4) Include the ZIP file as an attachment to this thread , or alternatively send to survey123@esri.com

we will look into this and report back.

Also, could you please try not using the 'minimal' appearance and see what happens? If I recall correctly the audio buttons show well with the default appearance so this may be just an issue with minimal.

Ismael

PamBond
New Contributor III

Thanks for the quick reply Ismael.  I just sent you a zipped file via email.

I did create a survey that didn't use the minimal style and it did not work either.

RenatoSalvaleon
Occasional Contributor III

Autosync please instead of Send.

Lake_Worth_BeachAdmin
Occasional Contributor III

When I add emojis, (same site referenced in article) in the survey they just show up as black outlined, hollowed vectors. not the colored nice ones in the examples.... i am literally hitting copy and paste into the excel sheet. where am i going wrong?

JamesTedrick
Esri Esteemed Contributor

Hi Joe,

A couple of reasons why they don't appear as you'd expect:

- different programs will render emojis differently; see    Emoji Blog • Does this come up as black and white or color... 

- apparently Excel in particular is rather poor on this; see http://professor-excel.com/emojis-excel/  

Lake_Worth_BeachAdmin
Occasional Contributor III

So how did OP do this? Were did he copy the emojis into if not the excel sheet? 

JamesTedrick
Esri Esteemed Contributor

Hi Joe,

Ismael copied them into Excel from the website; they render fine on mobile devices (it's just a limitation on Window's part).

RogerMesen-Delgado
Occasional Contributor

Hello,  

I just want to ask if is possible change the image in the form in a dynamic way for example with a select one before the image and invoque the image with a concat function (or another one), I tried with concat and it does not work.

Concat in the media::image field

 Thanks, 

JamesTedrick
Esri Esteemed Contributor

Hi Roger,

What you are trying to do works with image questions that have the annotate appearance.

Th_re_B_Christensen
New Contributor III

Greetings,

Is there a way to change the default color of the Survey123 in-form icons (e.g., bar code, folder, camera) so they show-up better against dark backgrounds?

Thank you,

~TC

BrandonArmstrong
Esri Regular Contributor

Hey TC!

There is not currently a method to change the color of the annotate or barcode icons in the out-of-the-box version of Survey123, however, this may be something that can be done by modifying the Survey123 source code using AppStudio for Desktop.  Having said that, it would then require a custom build of Survey123, and familiarity with modifying the source code.

For the time being, the best approach might be to change the background image to something that will be more friendly with the icons.

Best,

Brandon

MollyWatson1
Occasional Contributor

I am having a problem getting my survey title centered when viewing the survey in a web browser. I've tried it in multiple browsers and it looks the same in all browsers. I've cleared the cache and removed cookies and this does not help either. The survey title is offset to the right. I played around with the survey settings in my excel spreadsheet by using the <center> or <H2> formatting in the form_title field, but they do not change the position of the title. When I view the survey in the desktop Survey123, it is centered. Does anybody know how to get the title centered when viewing in a web browser?

KatherinePadilla
Occasional Contributor

Hello, I have been using the below label in my surveys and recently both the apple and android devices are not honoring the HTML but Survey123 connect and desktop do honor the HTML formatting.  Any ideas what may be going on here?

<center><p style="font:15pt Open Sans">Pollution Prevention Monitoring Section</p></center><p><center><p style="font:14pt Merriweather">Los Penasquitos and Scripps HA Bacteria TMDL Survey</p><center>

Survey123 Connect Version: 3.11.123

Survey123 Desktop Version: 3.11.164

Survey123 iPadOS 14.4.2 Version: 3.12.277

Survey123 Connect Version 3.11.123.PNGSurvey123 Desktop Version 3.11.164.PNGSurvey123 iPadOS 14.4.2 Version 3.12.277.PNGSurvey123 iPhoneOS 14.4.1 Version 3.11.164.PNGSurvey123 Android 11 Version 3.12.277.png

Survey123 Android 11 Version: 3.12.277

IsmaelChivite
Esri Notable Contributor

Hi @KatherinePadilla The HTML tags originally described in this blog are no longer supported with version 3.13 (September 2021). I will update now the information in the article to avoid confusion.

Specifically, if you want to center text, you will want to use a div" <div style="text-align:center">My centered text</div>

Ming
by
Occasional Contributor

Hello @IsmaelChivite @BrandonArmstrong , are there anyway to change the image position? Tried many ways like to use alignment=left or right, but failed to change the default position center.

Ming_0-1645830922432.png

 

Waffle_House
Occasional Contributor II

@Ming Could use <img> tag with inline styling but would have to link to the image on the internet (AGOL would work but have to make image public so URL doesn't change)

Ming
by
Occasional Contributor

@Waffle_House Thank you very much for the help, but I tried as this and it doesn't work, any correction?

Ming_0-1651501916588.png

 

IsmaelChivite
Esri Notable Contributor

@ZhifangWang  See above question from @Ming and suggestion by @Waffle_House 

I was expecting this to work:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Square_200x200.svg/300px-Square_200x200.svg.png" align="right">

 

But it does not work in the web app. Any ideas?