I’m a front-end developer and we’re creating a two-part landing page for our client. Both pages were created in HubSpot. In the first page is a typical landing page with a contact form, and using the Forms API, I’m saving the data to session storage before redirecting to the second-step, which is using the user’s zip code to find the nearest client’s centers to the user on page load.
That all works fine and dandy, but because the location results are dynamically pulled in, they only have a button, not a form, that will submit additional information (using the Forms API again) about the location they chose, so I’m using an AJAX call to submit the form data. Now before it was working, and I don’t know when it stopped working (I last looked at it yesterday and it was fine then), but I’m getting this error from the AJAX call (domain name and form portal ID is x’d out for privacy).
XMLHttpRequest cannot load https://forms.hubspot.com/uploads/form/v2/xxx/a74ca565-fd11-4b32-a733-e2e4c5828b82. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://signup.mxxxr.com’ is therefore not allowed access.
I don’t understand why the page is all of a sudden getting this error. The page was made in HubSpot so it’s not an external page and shouldn’t be a CORS problem.
----------- Update ---------
So it turns out the client updated their HubSpot account to use their own domain instead of a generated one from HubSpot, so I guess that’s where the CORS problem is coming from.
A solution I’m trying to use is the form’s embed code. I placed the
<script></script> tags of the form on the page and the form itself is hidden from the user. When a user presses one of the buttons that gets generated from the results, I’m using jQuery to update the values of the form field, however, it won’t seem to submit when I use
$(<form selector>).submit(); after changing the values of the input fields.
What could be preventing that?