Community forum for knowledge and support

Updated 6 months ago

Multi Step Form Radio Selectors

At a glance

A community member is having issues with the radio selection in a multi-step form built using the Multi Form 24 component. They have followed the necessary steps, but the radio buttons are pre-selected on the published website, even though the community member has set them as required fields. The community member is unable to continue to the next step until they manually select an option, even though the visual appearance suggests the option is already selected.

In the comments, another community member indicates that the issue was resolved via direct message. The solution was to style the "Checked" state of the radio button, and also ensure that the input active Finsweet attributes were included for other elements. A link to a relevant documentation resource is provided.

Useful resources

Hi everyone!

I was curious if you could help me with a small question/issue that I am having with Multi Step Form Radio Selectors.

I have used the Multi Form 24 in one of my projects and am having issues with the Radio Selection. I checked out the Formly Docs but did not see anything about this issue. Also, it said if you have questions reach out to us on Slack, but the link is expired and I am not sure who to reach out to. Thought if you guys are partners, then you can help me with this as well or connect me with their specialists to fix this situation.

Let me break down the issue:

I have added all the necessary attributes and custom codes for the multi-step form to work, and it does. The only issue is the Radio Buttons...

As you can see in the screenshot below, I noticed that the "selected" option gets the "is-active-inputactive" class assigned to it which has its custom styles applied to it. Now on the published website, when you get to this "step" the option is visually Pre-selected (like it's in the designer view), but on the back end, it is not selected since it's not letting me continue to the next step since I set these inputs as Required. Once I press on either of the options, Visually nothing happens, but on the back end (I assume) it does select the option and lets me continue, since the button lights up as if in "you're good to go"

I would like this to work as it should, meaning not have any pre-selected options and let the user choose, show them visually which one they selected, and move on...

I did not find any interactions or anywhere I could potentially look and understand how to solve this so your help would be really really appreciated.

Here is the staged page for you to check.

M
G
2 comments

Resolved via DM!

Needed to style the "Checked" state of the radio button in this case and all is good.

Be sure to also have the input active Finsweet attributes included for other elements though.

Read this doc for more info as well
https://www.relume.io/resources/docs/how-to-use-formly-with-relume

Glad we got it resolved Greg! πŸ’ͺ

Thanks for your help!

Add a reply
Sign up and join the conversation on Slack