APIs & Integrations

RW_AC
Member

Manipulating forms after loading on Hubspot landing pages

Hi Folks

 

I have a series of landing pages (around 50 total) that collect details about prospective students for our college. Some landing pages are totally generic, some are related to an area of study and some to a specific course.

 

The form we use for each page is almost identical but has slight changes based on the context of the page. E.g. some pages may have one or two fields hidden, some may not. Each page also needs to have a default value set for certain hidden fields.

 

Hubspot Support initially told me that I would need to create a new form for every unique instance of it (in thiscase meaning 50 forms). Im trying to avoid this situation by manipulating the form on the landing page after it loads using jQuery.

 

The particular code im executing is:

 

$("select[name*='intended_area_of_study__c']").val("Business").change();

 

But it will not effect the form automatically. I can manually execute this in the web broser console and it will work.

 

I discovered the advanced form features page in the developer reference.

So I have tried to use the onFormReady function but to no avail. I have the following code in the Footer HTML of the landing page:

 

hbspt.forms.create({
	portalId: '883XXXX',
	formId: 'b9f5f6d6-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
	onFormReady: function($form){
$("select[name*='intended_area_of_study__c']").val("Business").change();
	}
});

 

 

But again sadly this does not work. Any suggestions would be highly appreciated to solve this problem.

0 Upvotes
2 Replies 2
Willson
HubSpot Employee
HubSpot Employee

Manipulating forms after loading on Hubspot landing pages

Hey @RW_AC ,

 

I've just tested this out using an example on my own test site and this appeared to work using the following:

      <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
        <script>
            hbspt.forms.create({
            portalId: 'xxxx',
            formId: 'xxxx',
            onFormReady: function($form, ctx){
              $('input[name="firstname"]').val('myFirstName').change();
             }
          });
      </script>

 

Would you be able to test using the code above, updating the values where relevant. 


Thanks!

Product Manager @ HubSpot
dennisedson
HubSpot Product Team
HubSpot Product Team

Manipulating forms after loading on Hubspot landing pages

Hey @RW_AC 

Do you have an example page with the form on it so we can take a look?

Sidenote, I thought I was responding to this message when I was actually looking at this message @piersg was helping with. My comment in the thread was actually intended for this one 🙄.  It is Friday and my mind is apparently mush...

0 Upvotes