Squiz Custom Feedback Form

(Lewis) #1

Is there a way to create a web page feedback form using Squiz?

The form should be set up something like this:

Was this page useful?

[Yes] [No]

Essentially the two buttons [Yes] and [No] are submit buttons I imagine but Squiz doesn’t seem to allow this.

Is there a way to get around this?

(John gill) #2

There’s no Matrix way of having buttons as fields (as far as I know). This is definitely the kind of thing you need to tackle with JavaScript - i.e. have a select field with the options you want, produce the buttons based on the select field, watch for clicks, then manipulate the Matrix field appropriately before it submits.

Warning: tangent ahead

That said, there are inevitably a heap of cases like this and if you reach for a purely non-Matrix solution every time you end up with a bit of an undelineated soup of pitfalls for future-you.

After much trial and error I’ve concluded that the golden path is to habitually wrap your vanilla JavaScript gadgets into CCTs even if you’re only planning to use them once. It can be tough to hold to this approach, so I’ve been practicing to develop more discipline. It might feel weird to use CCTs in a form bodycopy, but it’s proven to be very helpful.

This “Turn a select field into buttons” feature lends itself to a CCT fairly nicely - drop the SelectToButtons CCT into the form’s custom bodycopy, choose the select field you want, and choose a css class you want to use on the buttons.

Testing it with the form in the bootstrap template on Marketplace (https://marketplace.squiz.net/templates/starter-website-template) ends up looking like.

I’ve attached this sample CCT to demonstrate the concept. It seems to work but usual disclaimers caveats that apply to quick’n’dirty solutions.

SelectToButtons-export.xml (15.1 KB)

(Innes Zenati) #3

Hi Lewis, as John has said you will need to create some buttons via JS. This is what we have on our website and sounds it would work a treat for you too. Let me know if you want me to send over the code to mock something up?

https://www.ros.gov.uk/_nocache?a=83152 - this is added to any specific pages by selecting the relevant option via the metadata.


(Lewis) #4

Thanks @innesz and @JohnGill. Both these examples look great on the frontend and just what we’re looking to achieve with this satellite website.

@innesz I know that our developers have some code for a out corporate site which they use for this instance too. I asked the question here because I want to be in a position (I guess we all do) where we’re able to ‘code without code’ in Squiz!

These two replies have been a great help, thanks! :sunglasses:

(Steven) #5

Hi @innesz,

Your solution is exactly what we are looking to put in place at Fife Council. Would you be willing to share and code/process that can help us achieve this?

Many thanks

(Roman) #6

Hello Innes,
I am adding a feedback form to https://pir.sa.gov.au/ pages. Would you please share your feedback form code with me?
What do you call a “relevant option” - is it radio buttons?

(Innes Zenati) #7

Hey Roman, sorry I haven’t got back to you any sooner. Yes of course, yes these are ‘radio buttons’ I will send the code over in a PM.