Form Fieldsets collapse and expand | Community
Skip to main content
Nihal
Level 3
January 22, 2024
Solved

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.

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
January 22, 2024

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 reply

6 replies

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
January 22, 2024

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!).

Translate
    Darshil_Shah1
    Darshil_Shah1
    Community Manager
    January 22, 2024

    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.

    Translate
    NihalAuthor
    Level 3
    January 22, 2024

    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.

    Translate
    Vinay_Kumar
    Vinay_Kumar
    Community Manager
    January 22, 2024

    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.

    Translate
      uditmathur
      uditmathur
      Community Manager
      January 22, 2024

      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.

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...