Formatting Options for Web Form

292
7
10-04-2018 11:01 AM
Highlighted
New Contributor III

I'm happy with how my survey appears in Survey123 Connect and the Survey123 mobile app.  However I have a few issues with my survey's published web form.  Some of these I just gave up on, but there are 3 remaining that I'd like to see if I can address.  They're numbered in the attached screenshot.

1) The label for this question is formatted as bold, but it doesn't show up as bold text on the web form.

2) In order to require a follow up question if Other is selected in Planting Organization, I have the following rows in the xls form:

typenamelabelrequiredappearancerelevant
select_multiple OrganizationPlantingOrganizationPlanting Organization(s)yesminimal${IsCwsPlants} = 'yes'
textPlantingOrganizationOtherSpecify Other Organizationyesselected(${PlantingOrganization},'Other')

For some reason, these questions display off to the side of the previous question and do not show the question label.

3) Once a group is expanded, the green lines surrounding the group make sense.  However, when collapsed, the small line to the left of the group label looks weird.  

Everything looks and work as I intend when using the native apps.  If there's anything that I can do to remedy these issues in the web form (particulaly the first two), I'd appreciate any suggestions.

Thanks,

Brian

Reply
0 Kudos
7 Replies
Highlighted
Esri Frequent Contributor

Hi Brian.

On #1: This looks like a BUG. Thanks for reporting this. I just validated that the bold html tags are ignored in the webform (but they should not).

On #2:I cannot reproduce the problem. What browser are you using?  Also, are you familiar with the or_other shortcut?  If you set the question type to select_one PlantingOrganization or_other, then Survey123 will automatically add a new text question when you select other.

On #3: Hmmm... Lets ask Zhifang Wang

Reply
0 Kudos
Highlighted
New Contributor III

Ismael, thanks for the quick reply.

#2: It displays the same in Chrome and IE11.  It's shared with the public, but when I open the survey in Firefox it redirects me to an ArcGIS Online login when I start to fill out the survey. 

I am familiar with "or_other", however using "or_other" doesn't allow a custom label, or the ability to require the other field.  If a user selects "other", I want to know what that "other" is.

If it helps, I can DM you with the survey URL or send the xls form.

Reply
0 Kudos
Highlighted
Occasional Contributor III

Ismael Chivite‌ was issue #1 ever resolved? HTML bold format tags published from Connect to the web form still appears to be ignored for labels, but work for hints.

Reply
0 Kudos
Highlighted
Esri Frequent Contributor

Hi Rob Ward‌  Looking in more detail about this. I see that the labels of questions and labels are already bold by default in the web form. Hints do not get shown in bold by default, so that is why you see a difference when you apply the bold property.  If you want to make your labels of questions and notes stand out, I suggest you use a color instead. For example:

<font color='blue'>Text in red</font> Text in default color

Will that work?

Highlighted
Occasional Contributor III

Thank you, yes that is helpful. I will give it a go.

Reply
0 Kudos
Highlighted
Occasional Contributor

Hi Ismael,

The default bold makes total sense for field labels except when it is a note field, where you might not want anything bold or just a key phrase in a larger sentence to be bold. I can sort of work around by putting the note's message in the hints field (and just bold-ening what I want) but since some kind of label is required, it's not a full solution. And this is only a problem for the web form. It looks like the field app (at least Connect's preview) recognized bold tags within a note's label.

Treg

Reply
0 Kudos
Highlighted
Occasional Contributor

Just found today that Ismael has already provided an answer to this in one of his many excellent blog posts:https://community.esri.com/groups/survey123/blog/2017/11/14/understanding-notes-in-survey123 ...Just provide an html tag in the label and that will satisfy the requirement for needing a label for a note and then you can use the hint (or a calculation in Ismael's example) to provide the actual note information with the proper html formatting.

Reply
0 Kudos