Set Form Field Value with HubL

[Jon_Sasala]

Hello all. I am looking to set a hidden form value based on data from the page where it is submitted. Is there a way with HubL you can set hidden values that populate form fields?

This would allow us to include page information in the actual form submission. For example, if we have dynamically generated HubDB pages, and one form that appears on all of them, I would like the page ID to be included in the form submission.

Any advice is appreciated. Thanks for your help.

[DBoroi5]

@stef1 @Jon_Sasala I tried this and not getting property to populate. 

Inserted this into dynamic page with form Footer: 

<!-- start Main.js Do Not Remove -->
<script src='{{ get_asset_url('/EBIS Power/Event Form.js') }}'></script>
<!---End Main.js-->

JS file contained: 

   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       $('input[name="webinar_id"]').val("{{dynamic_page_hubdb_row.webinar_id}}");
   }
});

Form contained hidden unformatted number field webinar_id 

HubDB table included column webinar_id

[stefen · Accepted solution]

@Jon_Sasala if you have control of the form's markup, you can easily include whatever HubL variable as the value of the input. However, if you're using a HubSpot form embed, you can pre-populate fields using 2 options: url query parameters or javascript on page load.

Query Parameters:

use a link from a previous page that includes query paremeters e.g.: example.com/contact?email=john@example.com — this will pre-populate the email field with john@example.com.

Javascript:

After the form loads on the page, use a script to pre-populate a field like so:

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       $('input[name="email"]').val("john@example.com");
   }
});

[Jon_Sasala]

Thanks for the solutions, Stephen.

I am trying to avoid the URL UTM route, so we will explore Javascript.  In your experience, will HubL tokens populate javascript properly? For example:

   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       $('input[name="listing_id"]').val("{{dynamic_page_hubdb_row.hs_id}}");
   }
});

 Thank again!

[stefen]

@Jon_Sasala yes, I've done that before without any issues. Just have to make sure to use inline scripts in a HubL module area or directly in the HubL html template.