Viewing Survey123 form on Web-Pale blue "wrapper"?

[neiden]

I just published a survey from ArcGIS Connect that will be accessed by the public via a web form. In connect, I matched my survey to my agency's style guide (background color, text color, etc.) and was happy with the results. However, the survey is "wrapped" in a pale blue color...how can I fix this? It's important that this be branded according to agency guidelines and be more seamless to our public.

Just spent the last hour exploring every setting, etc. to no avail...where is this pale blue background coming from and how can it be changed? Anyone else run into this??

Thanks!

Nikki  

[JamesTedrick · Accepted solution]

Hi Nicole,

The surround color can currently be modified through manual editing of settings.  To accomplish this, open the <Surveyname>.info file in the survey's folder.  Have Survey123 Connect closed or not on the form (otherwise, it will not allow manual edits).  Add in the following immediately before the displayInfo entry (after the first { 😞

"webformInfo": {
   "theme": {
      "webPage": {
         "backgroundColor": "#FFBBFF"
      }
   }
},

The FFBBFF is a color code- supply one that matches you're desired color (FFFFFF would be white, for example).  

The attached file shows the same but at the end of the file (which changes comma placement).  You may want to check to make sure you've done this properly by testing the entire text at a site like JSONLint - The JSON Validator.  

We plan to make this accessible as a user-configurable setting in the future.

[FranciscoAndrade1]

James,

Is there a list some where of the possible manual editing of settings for the web view of survey123?

As an example updating the wording on the post-submit screen when the survey is created via Connect.

[JamesTedrick]

Hi Francisco,

We do not have a published documentation of the settings, but are considering it for a future release.

With regards to the thank you message, currently it cannot be set manually due to an incompatibility between the web designer and Connect - that is planned to be addressed in a future release.

[Anonymous User]

James

I tried this back in September and it worked great. However, now that I'm back to editing this survey (and on a newer version of Connect), no matter which method I try to insert the code (at the start or the end), i'm still left with the green background. What's more odd is it appears Connect is modifying the .info file before publishing. If I add the code to the very beginning, it looks like Connect is moving the code to the end of the info file, but the background doesn't change. So if I edit the code, save the file, open Connect, and publish and go back and edit the info file, the code I added is changed. Is this a bug of somekind? Any ideas? The code checks out valid on the Json validator, but I can't get it to work again. It worked this past fall.

[MattCobb]

Nathan Fazer‌

I am having the same issues as Nathan.  This code used to work to change the wrapper, but now the webform still defaults to the greenish color despite modifying the .info file and republishing.

[Anonymous User]

Matt - I uninstalled Connect 3.1.126 and installed Connect 3.0.142 and the wrapper is changing again. Obviously it's a bug with the latest version of Connect. I submitted a bug/support case to Esri about this as well.

Update 1/17: Esri Support came back that the code changed between v3.0 and v3.1. I've attached the sample code they sent me. Basically after "webforminfo": { is what has changed.

[Anonymous User]

Hi James,

Is it possible to modiffy the color of the sections name and border?

Thanks.

[JamesTedrick]

Hi Javier,

By section titles, are you referring to group titles?  You can set that in the form with HTML formatting.  Can you tell me what element you are thinking of when you say 'border'?

[Anonymous User]

Hi James,

I've successfully change the style of the group title with your tip using the font tag in the label. The element what I'm refering by the border is the one shown in the following image. As far as I see there is no html tag to change that green style.

Thanks.