SOLVED

Form Fieldsets collapse and expand

Go to solution
Nihal
Level 3

Form Fieldsets collapse and expand

Hello, I've been trying to see if we can add an option on the form fieldset to expand and collapse as we click on the fieldset. Is there anyone who has tried doing this? can help us with this request.

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Form Fieldsets collapse and expand

No one has actually shown any code, I’ve noticed. 😉

 

You’d do it like this:

MktoForms2 :: <legend> as toggle

 

This is essentially making <fieldset><legend> elements act like <details><summary> does natively.

 

I’m in no way vouching for the UX here, of course. You’d probably want to add additional JS to leave a fieldset in the open state if a value has been filled in. And if any fields are required, you need to open their containing fieldset in onValidate (or else the person will have no idea why the form doesn’t submit!).

View solution in original post

6 REPLIES 6
uditmathur
Level 7 - Community Advisor

Re: Form Fieldsets collapse and expand

Hi Nihal,

Can you elaborate on your requirement.

If your requirement is to show some additional form fields based on the input of a particular field then YES this can be achieved by using Visibility Rules. You can get details on how to set visibility rule here.

 

If your requirement is something for accordion functionality you can refer to this article which might be helpful for you.

Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Form Fieldsets collapse and expand

This is not a native form setting wherein you can show or hide fields in the fieldset using a toggle, but I'm sure with a bit of customization using JavaScript and a bit CSS, you can certainly pull this off.

Nihal
Level 3

Re: Form Fieldsets collapse and expand

Hi Darshil, would it work to add custom JavaScript and CSS on the Marketo Form level? As we are not using the Marketo Landing page.

Vinay_Kumar
Level 10 - Community Advisor

Re: Form Fieldsets collapse and expand

Yes, it's possible to add custom JavaScript and CSS directly to a Marketo form, even if you're not using a Marketo landing page.

Remember that any customization involves potential risks, and it's crucial to thoroughly test in different environments to ensure compatibility and proper functionality.

Dave_Roberts
Level 10

Re: Form Fieldsets collapse and expand

I'd normally recommend adding additional CSS and JS at the web property level (your website or whatever property the form is actually displayed on) whenever that's possible rather than adding the CSS and JS to the form itself. 

 

It is possible to add CSS into the Custom CSS piece of the Marketo Forms and to add JS into a Rich Text element on the form itself (although this is kind of frowned upon from a dev perspective - maybe more of a "last resort" kind of tactic). 

 

The advantage of adding the CSS/JS at the web property level is that you are able to use the form in a more global context should you want/need to push that same form to a different destination in the future without needing to clone the form and make changes and end up maintaining multiple copies of the same form and a branching network of rules and lists to handle the differences between the iterative forms. 

The reasons that I've normally heard for doing the CSS/JS on the form itself is that you don't have access to the web property (maybe your website) and/or that it take forever to get anything done on your website and you'd like to be more in control of the pace and ability to change things as needed. If that's the case, adding the code to the form can be a good short-term solution to work around a real business problem, but I'd almost always recommend finding a better solution to the underlying business issue than continuing down this path b/c over time it can lead to a big mess of redundant forms that are difficult to organize and manage and present a real obstacle when something changes with your branding or something like GDPR comes along where you've got a update all the forms with something new. Global forms is a clear winner for future-proofing your stuff and make situations like this much easier to manage as well as being a more elegant solution within your campaign architecture in Marketo. 

SanfordWhiteman
Level 10 - Community Moderator

Re: Form Fieldsets collapse and expand

No one has actually shown any code, I’ve noticed. 😉

 

You’d do it like this:

MktoForms2 :: <legend> as toggle

 

This is essentially making <fieldset><legend> elements act like <details><summary> does natively.

 

I’m in no way vouching for the UX here, of course. You’d probably want to add additional JS to leave a fieldset in the open state if a value has been filled in. And if any fields are required, you need to open their containing fieldset in onValidate (or else the person will have no idea why the form doesn’t submit!).