topic Re: Custom dropdown-element for forms prepopulated with data in APIs & Integrations

Custom dropdown-element for forms prepopulated with data

Falke — Tue, 30 Apr 2024 12:50:16 GMT

Hi there,

I have little experience working with Hubspot, so I wanted to ask for general directions to look further into to achieve this: I'm tasked to expand a Hubspot form with a dropdown element, that is prepopulated with contact and company data already stored in Hubspot. It should be reusable across different forms and automatically update itself if there is new data available. The end goal is to also include a search-box to filter the results, because there are thousands of data rows stored already. The form will be embedded on a Typo3 site.

I originally thought I could simply make a module containing some HTML to display the dropdown and some Javascript to request and filter the data to populate the dropdown with and handle the search box. And then just select and place this module when building the form in the Hubspot editor.

But when I tried to create a new Module there is no option to plan to use it in forms - only in templates and pages (like the documentation confirms), which is not what I need, especially as I'm going to embbed the form externally.

I also looked into the API and private apps - but if I understood correctly, doing it this way, I could make a specific form and use the API to request data from and send submits to Hubspot, but there is no way to easily reuse the logic for different forms. And I would loose the ability to drag/drop forms directly in Hubspot, because I would need to define everything in the private app for one specific form.

Or is copying and editing the basic form.module the way to go? (documentation) If so... how can I select a modified copy as a base for a specific form? And is this really the appropriate place to define a custom element in?

Am I missing something obvious here? Is there no way to create a custom element (HTML/JS/CSS) to be placed in a form? I know there will be significant coding involved, and that's no problem, but as I lack experience with Hubspot specifically I'm unsure how to approach this and get started. I'm happy for any directions you can give me!

Re: Custom dropdown-element for forms prepopulated with data

BérangèreL — Wed, 01 May 2024 06:41:20 GMT

Hi @Falke,

Thank you for reaching out to the Community!

I have found for you similar threads that might help you:

- The solutions from @Anton and @webdew on this post "How do I add custom css to a form in Hubspot?"
- The solution from @miljkovicmisa on this post "How can i add my personal css into forms and websites"

I hope this helps!

Have a great day!

Best,
Bérangère

Re: Custom dropdown-element for forms prepopulated with data

Falke — Mon, 06 May 2024 07:39:48 GMT

Hi @BérangèreL,

thank you for the links to the other threads! Do I understand that correctly: I could create a form using the form builder with some basic fields (let's say a name and a message) and then add a custom dropdown element directly in the embed-code "onFormReady"? Can I just add a new element like that or does it need to be present in the form builder already? I guess at least a dummy needs to be present for the data to be collected correctly? For example having a dummy-Hubspot-dropdown in the formbuilder and then completely replacing it (keeping the ID) in the embed code?

Thank you again and have a nice day!