Getting field value on form submit

New Contributor

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.

Reply
0 Upvotes
5 Replies 5
Highlighted
Community Manager

Hey @gabrielnoal 

 

Thank you for sharing this information.

 

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

 

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

 

Thank you

Sharon

Reply
0 Upvotes
Highlighted
Top Contributor

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. 

Highlighted
New Contributor

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)

 

 

Reply
0 Upvotes
Highlighted
Occasional Contributor | Elite Partner

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

Hi @BenSBM ,
Thank you for your answer.

But how can I check the event using Hubspot Landing Page?
Because I could check the evento of onFormSubmit  if i took the embeded code and paste on my website but i'm using hubspot landing pages.

Reply
0 Upvotes