Associate Headshot Sign Up Form
The headshot form enables users to sign up for a headshot time. There are 2 forms, one for each studio, that should have the same times, and that allow only 1 entry per time. Once the slots are full, the forms’ modal triggers (button elements), should disappear.
This app is powered by:
- Gravity Forms
- GP Limit Choices (Gravity Wiz)
- Bootstrap Modals, React & PHP
Although there is a hook for when a choice runs out of selections, it doesn’t work for our use case as it only overrides the individual field’s output for a custom message. I did not find a simple way to handle removing a button if a form was full.
How It Works
- WordPress renders the page and sets an auth cookie for JS to grab. (The globals are defined in the config file for security and are generated by Gravity Form’s settings).
- React renders a loading spinner while fetching the data and checking whether to render the form buttons or an alert (see
App.tsxandhooks/useGetFormData.tsx - If the buttons are rendered, they’re wired up with Bootstrap data-* attributes to toggle the appropriate modal.
Steps 1 & 2 use a Bootstrap-style render method to pass data between JS and ACF (data attributes).
Why React?
I started writing this with vanilla JS, but once I realized I needed to handle a reactive Loading state and render a few things depending on the loading state, I switched to React. Maybe there’s a relatively simple way to do that in vanilla JS, but React was quicker for me and it’ a peer dependency of @wordpress/scripts so it was ready to go.