fix(shortcode): load modal forms in form grid via AJAX

[kevinwhoffman]

User Story

As a developer, I want to load modal forms in the form grid via AJAX so that I don't unnecessarily render multiple hidden forms that are never shown.

Current Behavior

I currently see that every form in the grid also renders a complete donation form that is hidden until the user clicks on the card. This is a waste of resources as the user will likely only click one card in any given visit.

Expected Behavior

I expect to load the form via AJAX, similar to how it's done for modal or one-button launch display styles.

Possible Solution

Investigate how modal/one-button launch forms are displayed for single forms and see if we can borrow some of that functionality for the form grid.

Visuals

This screenshot shows how every card in the grid is rendering a complete form on page load and then hiding the forms. This is not necessary.

See video for expected behavior: https://screencast-o-matic.com/watch/cFeOY6DAHY

Related

• feat(grid): improve UX/UI of donation form grid feat(grid): improve UX/UI of donation form grid #2943

Tasks

• Research how single forms are launched in modals via modal/one-button launch display styles.
• Report a recommended solution in this issue.

[kevinwhoffman]

@Sidsector9 Please wait until @DevinWalker merges #2943 into the 2.1 branch, and then create a new branch starting from the 2.1 branch.