The core mission was to go beyond HubSpot's standard tools to design and strategically deploy a sleek, custom-styled Call-to-Action (CTA) modal pop-up. This module needed to be seamlessly integrated with a HubSpot form for powerful lead capture, but without any of the platform's default, messy styling.
Key Technologies Used:
The project began by leveraging the HubSpot Design Manager, which is the developer's area for creating custom website components.
Step 1: Establishing the Custom Asset I navigated directly to the Design Manager to create a new file, which I named "Hidden Popup Form." This initial step was crucial as it’s used to build a fully custom asset from scratch, rather than relying on existing templates.
Navigating to the HubSpot Design Manager to establish the new custom module file, titled "Hidden Popup Form," confirming the start of custom asset development.
Step 2: Custom Code Architecture Inside this new file, I wrote the code necessary for the module. This involved using HTML to create the structure of the pop-up (the overlay and the content box), CSS for all the visual styling, and JavaScript to control when the pop-up would appear and disappear.
The custom module's code view within the Design Manager, showcasing the simultaneous use of HTML, CSS, and JavaScript files to build the complete, functional component.
Step 3: Integrating the Data Form A key requirement was ensuring lead data was captured reliably. I created a standard HubSpot Form (called "Custom Email Form") in the backend. In my custom module, I added a special field that allows content editors to dynamically select this form, ensuring all lead tracking and list management features worked perfectly, even within my custom design.
The HubSpot form settings dashboard, confirming that a standard, published HubSpot form was used for data capture, maintaining full integration with the platform's backend analytics and submissions.