Getting field value on form submit

[gabrielnoal]

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.

[prosa]

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. 

[gabrielnoal]

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)

[BenSBM]

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');
  }
});

[gabrielnoal]

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.

[gabrielnoal]

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

[BenSBM · Accepted solution]

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');
  }
});

[sharonlicari]

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