CMS Development

gabrielnoal
Participante

Getting field value on form submit

resolver

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 Avaliação positiva
1 Solução aceita
BenSBM
Solução
Colaborador(a) | Parceiro Elite
Colaborador(a) | Parceiro Elite

Getting field value on form submit

resolver

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

Exibir solução no post original

7 Respostas 7
prosa
Top colaborador(a)

Getting field value on form submit

resolver

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
Participante

Getting field value on form submit

resolver

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 Avaliação positiva
BenSBM
Colaborador(a) | Parceiro Elite
Colaborador(a) | Parceiro Elite

Getting field value on form submit

resolver

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
Participante

Getting field value on form submit

resolver

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 Avaliação positiva
gabrielnoal
Participante

Getting field value on form submit

resolver

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

0 Avaliação positiva
BenSBM
Solução
Colaborador(a) | Parceiro Elite
Colaborador(a) | Parceiro Elite

Getting field value on form submit

resolver

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
Gerente da Comunidade
Gerente da Comunidade

Getting field value on form submit

resolver

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 Avaliação positiva