Can you place a form inside of an Accordion Block?

Hello!

Is it possible to place a form inside of an accordion block?

Also, is it possible for the accordion block to have a background colour, but the content within the drop down area itself remain white/white background?

I can private message the site URL and password if this is possible.

Thanks!

Yes, it is possible. but it requires custom code. 

What kind of custom code? Can someone provide an example?

You can add a Form Block under Accordion Block, then share page url, we can give code to move Form Block into Accordion.

Hi there!

I'm Luke Anthony Houghton, founder and digital consultant at ProjektID. With years of experience in digital-first thinking, I help professionals like you embrace automation and optimise time management, significantly reducing workload and expanding potential. At ProjektID, we offer a range of accessible solutions tailored to enhance user interaction and streamline your digital processes.

I noticed your query about adding a form inside an accordion dropdown block on Squarespace. It sounds like you're looking for a straightforward and efficient solution, and I have just the right plugin for you.

I have developed Cx+ [CxPlus], a new standard of user interaction and customer experience for Squarespace websites. Cx+ currently contains 18 Squarespace dedicated plugins all for an affordable monthly or annual subscription. Upon subscribing to Cx+, you will gain access to the Cx+ system that provides detailed instructions for implementing each plugin into your Squarespace website.

The 'Position Block Content into List Order (Accordion Block retrofit)' plugin is the solution for you. This plugin allows you to strategically place Squarespace blocks within list items, with the option of displaying them as tabs for a cleaner look on various screen sizes. It's specifically designed to enhance the Accordion Block by reallocating block content to the appropriate list item description section. This means you can easily include images, forms, or any other content within your accordion blocks, just like the example you provided.

Here's why you should consider Cx+:

• User-centric Design: Our plugins are tailored to improve user experience by structuring and organising content optimally.
• Cost-effective: Enjoy advanced functionality without the high costs usually associated with custom coding.
• Comprehensive Support: Gain access to a rich library of step-by-step tutorials and detailed subscription insights, ensuring you can deploy each plugin with precision.

To learn more and explore the full potential of our plugins, visit our Cx+ subscription page at www.projektid.co/cxplus.

Transform your Squarespace site today with Cx+ and experience a new standard of user interaction and customer experience.

Best regards,

Luke Anthony Houghton
Founder & Digital Consultant, ProjektID

Hi @tuanphan or @creedon! Any chance you could help me out? I want to add a form block to one item in an accordion and a product block into the second item. 

Here's my site:

https://www.virginialegalinterpreters.org/calendar-1

password: Wednesday%

1 hour ago, valia said:

I want to add a form block to one item in an accordion and a product block into the second item.

Please see the following.

For step two of the install instructions you would use the following in place of what the instructions describe.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  
  <script type="application/vnd.twc.em">
  
    {
    
      /*
      
        the format of each data structure is a selector source and destination,
        an action, and optional callback
        
        following is an example data structure. copy the example data structure
        below and paste after the example data structure. remove the forward
        slash asterisk and asterisk forward slash lines from before and after
        the example data structure. repeat for as many as many elements as you
        need to manipulate. this has been done once initially
        
        */
        
      /* "[ enter selector source here between double quotes replacing square brackets ]" : {
      
        "selectorDestination" : "[ enter selector destination here between double quotes replacing square brackets ]",
        
        // action value is after, append, before, prepend or replace
        
        "action" : "append",
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
        
        // sourceCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        "sourceCopy" : false,
        
        // callback is optional, use when you want to manipulate the structure
        // of the source element. replace undefined with the name of your custom
        // function
        //
        // your callback must accept and return a JavaScript object
        
        "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
        
        }, */
        
      "#block-e8fa1398bd714c35b6af" : {
      
        "selectorDestination" : "#block-yui_3_17_2_1_1725146240654_6957 .accordion-item:first-child .accordion-item__description",
        
        // action value is after, append, before, prepend or replace
        
        "action" : "append",
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
        
        // sourceCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        "sourceCopy" : false,
        
        // callback is optional, use when you want to manipulate the structure
        // of the source element. replace undefined with the name of your custom
        // function
        //
        // your callback must accept and return a JavaScript object
        
        "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
        
        },
        
      "#block-yui_3_17_2_1_1725146240654_17387" : {
      
        "selectorDestination" : "#block-yui_3_17_2_1_1725146240654_6957 .accordion-item:last-child .accordion-item__description",
        
        // action value is after, append, before, prepend or replace
        
        "action" : "append",
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        "selectorParentDestination" : "[ enter selector parent destination here between double quotes replacing square brackets ]",
        
        // sourceCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        "sourceCopy" : false,
        
        // callback is optional, use when you want to manipulate the structure
        // of the source element. replace undefined with the name of your custom
        // function
        //
        // your callback must accept and return a JavaScript object
        
        "callback" : "[ enter callback name here between double quotes replacing square brackets ]"
        
        },
        
      }
      
    </script>

After you've gotten the code working and moving the blocks, you will want to verify that those moved blocks still function as expected. Sometimes moving dynamic elements like this can cause issues.

You will still need to deal with getting rid of the descriptions you added.

Let us know how it goes.

Oh my gosh, I can't thank you enough for all the work you put into that! Sadly, your instructions are well beyond my non-existent coding skills. I think I'm going to have to ditch the accordion altogether. I am grateful for your help, though!