Form selection fields on mobile device

Hi Community, I’m using a multi-step form on our site and in the Designer everything works well. However, when published and viewed on my mobile device (iphone 7) one interaction is not occurring per the design. When you select an option in the form (multi-choice buttons) they turn purple to indicate selected. On live site, on mobile, the colour does not change to purple but stays grey, so you can’t tell if you have selected an option or not (it does appear slightly more grey, but not the purple as intended). Nor does the cross turn to a tick.

Screen shot is live on mobile device.

And second is view on the designer.

In both cases the option ‘engineering’ has been selected.

Please help.


Here is my public share link: https://preview.webflow.com/preview/pumped?utm_medium=preview_link&utm_source=designer&utm_content=pumped&preview=fd8bde722bced475cdde36e5b19adfa3&pageId=5db6cefb5e46c1feff79b78d&mode=preview
(how to access public share link)

Hello @ash81!

So I reviewed this and on the first page when you enter your name and email its works fine because it is using the focus state. With multiple selections on desktop you switch it to pressed and and hover which works great on desktop.

The issue rises on mobile using that as you don’t get the input of “pressed” or “hover” since you are not using a mouse. So instead you will want to use a element trigger “Mouse Click(tap)” this allows you to get input from “taps” that you would on a mobile device.

It works great in this situation as you can change the field to its selected state on the first tap and it has a register for the second tap where you can change it back to unselected.

If you need more help with understanding first I would look at webflow university about interactions if you aren’t too familiar. In any case I would be happy to help with an example of what I am talking about if you need it. :slight_smile:

Have a great day,

Sean

Hi @DasSean!

Sorry it’s taken me so long to get back to you on this and thanks so much for diagnosing this issue I’m having. I’ve watched a few of the Webflow University videos and somewhat have my head around it.

Unfortunately I can’t seem to figure it out though! I cannot see any element triggers that initiate the change from the cross to the tick on the desktop and the existing issue remains on mobile. I mostly understand your email conceptually but don’t have a good enough grasp of the logic.

If you would be happy to provide an example of what I need to do, that would be amazing.

Thank you!

Adam

@ash81 Sorry for my late response as well.

I have no audio for this video but this should demonstrate what you need to do.

@DasSean, Thank you! I was able to follow along and it’s now all working perfectly. I appreciate your help very much. It was incredibly satisfying to publish the site and interact with this via mobile device.

Have a great week.

Adam

1 Like