CMS Development

gabrielnoal
Participant

Getting field value on form submit

SOLVE

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.

0 Upvotes
1 Accepted solution
BenSBM
Solution
Contributor | Elite Partner
Contributor | Elite Partner

Getting field value on form submit

SOLVE

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

View solution in original post

7 Replies 7
prosa
Top Contributor

Getting field value on form submit

SOLVE

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. 

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.
gabrielnoal
Participant

Getting field value on form submit

SOLVE

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)

 

 

0 Upvotes
BenSBM
Contributor | Elite Partner
Contributor | Elite Partner

Getting field value on form submit

SOLVE

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
Participant

Getting field value on form submit

SOLVE

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.

0 Upvotes
gabrielnoal
Participant

Getting field value on form submit

SOLVE

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

0 Upvotes
BenSBM
Solution
Contributor | Elite Partner
Contributor | Elite Partner

Getting field value on form submit

SOLVE

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
Community Manager
Community Manager

Getting field value on form submit

SOLVE

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes