Streaming live at 10am (PST)

Feedback design


#1

Hi, I know this is somewhere but can’t find it. How to design and implement this off the webflow university


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


Radio Buttons - Custom CSS Style
#2

It’s possible they use an external module to gather feedback. However, if what you want is to retrieve only this simple kind of info, it’s possible to do it in Webflow by hacking the checkbox or radio button element, placing an image inside it or over it and catching the click.

@craigteel was using this technique on his previous portfolio’s contact form, but it’s not online anymore. @craigteel if you see this do you mind telling us how you did it?


#3

Hahahaha @craigteel


#4

Would love to know how to place an image in a checkbox! I’m pulling my hair out over this…


#5

I’d be interested in hearing more about this hack too.


#6

9rjd6

@WillNeeteson @matthewpmunger this?


#7

OK I see. Wrapping the Checkbox Field will allow placing other elements as siblings. This bypasses the restriction of not placing anything inside the Checkbox Field div. How does the IX trigger the checkbox?

Can this method be used with radios too?


Radio Buttons - Custom CSS Style
#8

Thanks @vincent! Call me dense, but I don’t understand how to ‘wrap the checkbox field’. How do I do this?


#9

This is what I’m understanding of the structure. Add a Div into the Form then put the Checkbox field inside of it. That allows the placement of other elements to be siblings of the Checkbox Field, ie. an image or something else. You’d need to do this for each Checkbox Field.

20


#10

Here you can open the site in Webflow.


#11

unfortunately no. The checkbox element must catch the click, so it has to be the recipient of the image swap IX. And the overlay image has to be a 2 level parent minimum, so you can’t filter easily with IX1. Didn’t try with IX2 to see if it eases the pain. So on the radio button smileys demo, I need a IX per radio button, that’s a lot.

So there’s room for innovation here.


#12

@matthewpmunger&@vincent
I see! Thank you very much!

I was trying to achieve something like this:

52

But this option works just as well. Thank you both!!


#13

How can you do this?!


#14

That’s what I can’t understand! I first saw it here and here.

Spent hours trying to work it out, cloned the projects and dissected every element but my brain just couldn’t handle it. It doesn’t have anything to do with custom coding as far as I can tell and I can’t see any other way it could have been done.


#15

Ah I see. Definitely potential here building feedback forms or other visual forms while utilizing the built-in Webflow forms.

Those are also good examples of how much more can be done with the elements already given to us.

Forms can be fun too!


#16

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.