Problem
Website needed a filter to help users quickly find assemblers/distributors, including a popup attached to each card directing them to a contact form for that assembler/distributor.
Solution
Created a filtering solution that met client expectations, combining the functionality of both Elementor and Gravity Forms, along with custom JavaScript and PHP code.
Highlights
Take a closer look at the specifics of the different elements and functionality I included in this project.
Filter
Using Gravity forms, I created a form that passes the value of the selection to the URL when submitted. This then, through custom code, is pulled and passed to the Elementor loop element to query and display the matching cards on the page.
Popup
Each card is directed to a popup when clicking the “Contact Us” button. The heading of the popup is dynamically displayed through JavaScript and the embeded Hubspot form is displayed with a time delay to allow for the popup element to load into the DOM.
