Surveys - Customize HTML layout to match enterprise visual code

SuiteCRM Forum - English Language SuiteCRM General Discussion
1

Hello everyone.

I’d like to ask some guidance on anyone who might have played around with the Surveys module. Specifically in editing the survey layout (HTML+CSS). Could anyone point me into the files which I need to edit for this?

Example survey page: https://crmaddress/index.php?entryPoint=survey&id=1fee1d21-8dcd-8b90-8f7a-5f933829dafe

Example Survey created with standard layout.

image
image1858×1208 123 KB

Thanks!

2

Hey,

I haven’t played around with the Survey modules much at all, but I’ve had a look

As far as I can tell, it looks to me like the Survey is being generated by the file at:
modules/Surveys/Entry/Survey.php

A lot of the Styling seems to be generated based on the content from around Line ~82 and below.

(More Specifically, the “displaySurvey” function at ~145
and the various “displayXXXX” functions below it, ie: "displayTextField")


One thing to note is that changes here might be non-upgrade safe, so upgrading the CRM may overwrite these files

Typically, this can be avoided by creating a file with the same Directory Structure/File name in the /custom/modules/ or /custom/extension/modules/ locations

Though, I haven’t tried it with Surveys before, so im not sure how/if it can be done

3

John, thanks so much for your quick research on this.
I’m not a developer myself, but I’ll fool around with my basic HTML and CSS to see if I can get it a little more presentable.

I’ll post my progress over here once I’m done with it.

Thanks again,
Oscar

1 Like
4

No worries!

Will be good to see what you can come up with! :slight_smile:

5

John, as promised, thanks to your help I was able to customize my Survey landing page even with very basic HTML/CSS skills. I have only you to thank for this. Below are the screenshots (with some editing to publish them here)

I did try to use the custom/modules/Survey/Entry folder, but that didn’t work out, so I had to replace the actual original files (not update safe). I will keep a backup of them so I can replace them once a new version of SuiteCRM comes up.

Thanks again!

image
image1058×813 99.9 KB

image
image364×642 22.6 KB

6

Hey,

That’s great to hear!

It is unfortunate that the /custom/ folder didn’t work

But, i’m glad to hear it all worked out!

Thanks for the update, and let us know if anything else pops up! :slight_smile:

7

Exactly which files did you customize? There is more than one way of making upgrade-safe customizations, if one didn’t work I might know of a second one for you to try :slight_smile:

1 Like
8

Hi pgr
I edited two files in the “Entry” folder:

Survey.php
Thanks.php

9

Both can be overriden in an upgrade-safe manner using the Extension Framework, specifically, the entrypoint extensions.

There are many examples of this online, for example this blog post seems helpful:

https://www.kelenyi.com/2019/12/18/create-a-custom-entry-point-in-suite-crm/

10

I can make the survey look different by using some special code (CSS). Just copy and paste the codes I give you at the beginning of the survey form.

.btn-primary { width:100%; height:50px; background-color: #1d808d; color: white; font-size: 18px; } .form-control{ width:100%; height:60px; }