We have a single-page website that, when the non-Hubspot form is submitted, hides the form and shows a success message instead. This form submits perfectly when Hubspot is not running (such as on our local machines), but has undesired behavior once Hubspot is added.
This form is submitted to our server (and detected successfully by Hubspot) via Jquery. Here's the code for it:
$("form.jquery-form-submit").on("submit", function (e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
form.hide();
form.siblings(".alert-success").show();
$.post("/contact", formData)
.done(function () {
@if(env('APP_ENV') == 'production')
gtag_report_conversion('{{ url()->current() }}');
fbq('track', 'Lead');
@endif
});
return false;
});
As you can see, we prevent the default form behavior since we don't want to redirect the customer or refresh the page. We also added action="javascript:void(0);" and onSubmit="return false;" on the form tag to add additional prevention.
But even with all this in place, our page refreshes making the customer unsure of whether or not their request has been received since our success message is also erased by the submission triggering a page refresh.
One solution would be to just use Hubspot forms, but this seems like a very poor solution as this now means that we can't use our own form for any features on our website where Hubspot is also running. Not a quality solution to eliminate an entire category of web technology in order to run Hubspot.
Any assistance on this would be greatly appreciated.
Hi @Ryan_Paiva, can you clarify what you mean by "when Hubspot is not running (such as on our local machines), but has undesired behavior once Hubspot is added"? What do you mean by when HubSpot is running? Are you referring to when the tracking code is added to your page?
.png "HubSpot Alumni"){kind=icon}
