-
-
Save hijonathan/9898070 to your computer and use it in GitHub Desktop.
<form class='form-inline' id='my-custom-form'> | |
<div class="form-group"> | |
<input type='email' class='form-control' placeholder='Your email address' required> | |
</div> | |
<button class="btn btn-primary" type='submit'>Sign up</button> | |
</form> | |
<!-- Actual form that gets submitted to HubSpot --> | |
<div class="hidden" id='hubspot-form'> | |
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script> | |
<script> | |
hbspt.forms.create({ | |
portalId: 'YOUR_PORTAL_ID', | |
formId: 'TARGET_FORM_ID', | |
onFormReady: function($form) { | |
$form.attr('target', 'hubspot-iframe'); | |
} | |
}); | |
</script> | |
<!-- iFrame that data will get submitted to. This hack stops the page redirect. --> | |
<iframe name="hubspot-iframe" id="hubspot-iframe"></iframe> | |
</div> |
// Send form data to HubSpot from the client. | |
function submitToHubSpot(data) { | |
var $form = $('#hubspot-form form'), | |
k; | |
// Loop through each value and find a matching input. | |
// NOTE: Doesn't support checkbox/radio. | |
for (k in data) { | |
$form.find("input[name='" + k + "']").val(data[k]); | |
} | |
$form.submit(); | |
} | |
// Here's how you'd use this. | |
$('#my-custom-form').on('submit', function() { | |
var formData = {}; | |
$(this).serializeArray().forEach(function(data) { | |
formData[data.name] = data.value; | |
}); | |
submitToHubSpot(formData); | |
// We sent the data. Now do whatever else you want. | |
alert('Gee, thanks Jonathan! Now I can focus on onboarding my customers with Appcues!'); | |
window.location.href = 'http://appcues.com'; | |
}) |
If you need to support checkboxes/radio buttons, I found this from Hubspot and it works:
In order to use jQuery to manipulate the values of form inputs using .val() or .prop(), you must trigger a change event using change() or trigger('change') for the change to properly register.
Since HubSpot forms are rendered after the DOM builds, you must either trigger the manipulation after the window loads, or modify the embed to use the onFormReady parameter.
$('input[value="checkbox_1"]').prop('checked', true).change();
Thanks for sharing!
This is still an issue with Hubspot! We are continuing to monitor the solution we went with, but so far, no issues.
Basically, I used the iframe/target method presented above, but with no secondary form and no submitjacking. (As far as I can tell there actually isn't a true submitjacking going on above either, i.e. there is no preventDefault()
.)
This works because the Hubspot response/redirect is happening within the frame, behind the scenes, instead of on the page itself.
On submit, using the onFormSubmit
method provided by Hubspot, we are simply hiding the form and showing a custom form flip.
So, the full code looks like this:
<div class="form-wrapper">
<div class="hbspt-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
css: '',
portalId: 'xxxxxx',
formId: 'xxxxxx',
target: '.hbspt-form',
onFormReady: function($form) {
$form.attr('target', 'hubspot-iframe');
},
onFormSubmit: function($form) {
jQuery('.form-wrapper .hbspt-form').hide();
jQuery('.form-confirmation').show();
}
});
</script>
</div>
<iframe class="hidden" name="hubspot-iframe" id="hubspot-iframe"></iframe>
<div class="form-confirmation">
<div class="form-confirmation-inner">
<!-- custom form flip here -->
</div>
</div>
</div>
Thanks! This worked great.