Getting field value on form submit

Developer Support CMS Development
,
1

Hi everyone,

I’m trying to do a dynamic redirect on base one of my form fields.
I already look for a lot of ways of do that and I find out it would be posible if I add a event listener when form submit to get my field value and redirect my user to one page or another.

I find this link (https://community.hubspot.com/t5/APIs-Integrations/Getting-form-field-on-form-submit/m-p/316974 and many others that people sugest to use:

<script>
	hbspt.forms.create({
		portalId: "my_portal_id",
		formId: "my_form_id",
		onFormSubmit: function($form){
			if($('input[value="my_field_name"]').val() === 'No'){
				callStripe();
			}
		}
	});
</script>

But it look’s like this is for add embeded code to my web site and this is not what I want.

I already tried to code something like that in the form module.js and it doesn’t work.

const logSubmit = (event) => {
 console.log(event)
 event.preventDefault();
}

window.addEventListener('submit', logSubmit);

It look likes this runs before the form is rendered.

I need something that I can add at my module.html or module.js that get the form values and redirect the user to the correct page after submits.

2

Hey @gabrielnoal

Thank you for sharing this information.

I’ll tag a few experts that could share their thoughts with you.

Hey @alyssamwilie @Kevin-C @prosa could you please share your expertise with @gabrielnoal ?

Thank you

Sharon

3

hi there can you share the code you are trying to run? I’ve used the provided example and I was able to create a redirection after form submission. But make sure in your form configuration you have only a message and not a redirect. I would recommend showing a message and adding a spinner with a timeout to trigger the redirection.

4

Hi @prosa ,
I already tried a lot of ways and any of those worked for me.

I’m used to work with ReactJs and I tried to add a event listener on form submit and add a log to see if it works, but it never logs. Also I tried to get the element by name, id, tag but all of those returns a empty array. It looks like the code runs before the form is rendered.
This is my last try.

My module.html

{% if module.title is truthy %}
	{% set no_title = False %}
{% else %} 
	{% set no_title = True %}
{% endif %}

{% if module.form.form_id %}
	{% form
 form_key='{{ name }}',
 form_to_use='{{ module.form.form_id }}',
 title='{{ module.title }}',
 no_title='{{ no_title }}',
 follow_up_type_simple='{{ module.follow_up_type_simple }}',
 simple_email_for_live_id='{{ module.simple_email_for_live_id }}',
 follow_up_type_automation='{{ module.follow_up_type_automation }}',
 form_follow_ups_workflow_id='{{ module.form_follow_ups_workflow_id }}',
 response_response_type='{{ module.form.response_type }}',
 response_redirect_id='{{ module.form.redirect_id }}',
 response_redirect_url='{{ module.form.redirect_url }}',
 response_message='{{ module.form.message }}',
 notifications_are_overridden='{{ module.notifications_are_overridden }}',
 notifications_override_email_addresses='{{ module.notifications_override_email_addresses }}'
 gotowebinar_webinar_key='{{ module.form.gotowebinar_webinar_key }}'
 sfdc_campaign='{{ module.sfdc_campaign }}'
	%}
{% else %}
	{% form
 title='{{ module.title }}',
 no_title='{{ no_title }}',
 %}
{% endif %}

My mudule.js

const logSubmit = (event) => {
 console.log(event)
 console.log("REDIRECT")
}

window.addEventListener('submit', logSubmit)
5

Try adding a listener for ‘message’ and check if it is the HubSpot onFormSubmit event:

window.addEventListener('message', function (event) {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
 console.log('onFormSubmit');
 }
});
6

Hi @BenSBM ,
Thank you for your answer and sorry for the delay to answer.
But how can I check the event using Hubspot Landing Page?
Because I could check the event of onFormSubmit if i took the embeded code and paste on my website but i’m using hubspot landing pages.

7

I keep stucked at the same place, could someone help me, please?

8

Hi @gabrielnoal

That javascript snippet should work on any site, whether it is a HubSpot website or landing page, or on a third party service. It adds a listener for when a HubSpot form is submitted and is independent of being on a landing page.

I set up a quick test in my portal, and added a form module and made sure it was set to “Display an inline thank you message”. I then created a test page in HubSpot, and upon submit the eventListener previously posted printed a message to the console. The same worked in a custom module with a form field.

window.addEventListener('message', function (event) {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
 /* print to the console on submit, or add in custom redirect in here */
 console.log('onFormSubmit');
 }
});