I’ve been working on some advanced usage of HubSpot embedded forms and ran into a major hurdle I was hoping your team could shed some light on.
With a combination of the onFormSubmit and inlineMessage options we were able to chain multiple HubSpot forms together without requiring a page reload for the best user experience possible.
We have it working great - until we test on any iOS device. When a form is submitted on iOS and is using the inlineMessage instead of a redirectUrl the page reloads as if it were using the current pages URL for the redirect location.
I can see from inspecting the source code inside the forms library that you are doing this intentionally - but may I ask why?
I was able to stop the action from happening by removing the redirectUrl property value inside the ctx object using the onBeforeFormReady callback which seemed to work but the submission never makes its way into HubSpots contacts DB.
If there is a way to make this work without requiring a page refresh we could build some really unique and powerful multi-step forms with workflows behind them if someone were to not finish the entire process etc…
There’s no “workaround” yet - this is a core problem with the way iOS/Edge handles 204 No Content responses (which is the response returned by HubSpot when using their inline message functionality).
You can usually make the redirect a non-issue (except for that it’s a crap user experience especially on mobile devices) by checking the url for a submissionGuid parameter which would indicate that a form was submitted on the page.
What is your specific case where the redirect is causing an issue? I might be able to offer some advice - I have been working with the embedded forms intimately for quite some time.
This is something that we’re planning on looking at long term, but we don’t have any current plans that would allow this behavior to change. The navigation is tied to the HTML itself, so there wouldn’t be a way to block the navigation without also blocking the submission of the form data.
This is related to a bug with iOS browsers. Submissions without a redirect will normally return a 204 No Content response if no redirect URL is set, so that the browser won’t navigate to a new page and the thank you message can be displayed. iOS browsers have a bug where they still navigate to the empty 204 page, so to get around that we detect submissions on iOS devices, and redirect back to the page with where the form was submitted, and display the thank you message in place of the form.
Is there any way to either prevent iOS from following that link using something like a return false or e.preventDefault() on the form submission event? Or is there a plan to better handle iOS submissions without a page reload in the future.
I understand this is a browser bug, but because its on iOS it is a giant roadblock for doing amazing things with the callback functions you provide through the library.
.png "HubSpot Employee"){kind=icon}
