CMS Development

AzharBondi
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

Hi, 

 

I have read some posts a bit similar to mine but I am still confused to be honest about applying a simple way that can :

 

Add the email input field value to the redirect URL ( redirecting to an external website/link) when clicking Submit Button.

 

Note: I am using the form within a custom module. I can add the URL in the form settings in the page editor.

 

When clicking "submit", the syntax/format I am looking to achieve is :  

 

https://externalwebsite/?email= myemail

 

 

this is the HTML + HubL of my custom module (Form)

 

<div class="form-box form-box-{{ module.background_color }} shadow-box align-{{ module.align }}">
  <div class="wrap-course-info">
    <{{ module.title_tag }}>{{ module.title }}</{{ module.title_tag }}>
    {% if module.description %} <p class="title-description2">{{ module.description }}</p>{% endif %}
    {% if module.text %} {{ module.text }}{% endif %}


    {% form
	form_to_use="{{ module.form_field.form_id }}"
	response_response_type="{{ module.form_field.response_type }}"
	response_message="{{ module.form_field.message }}"
	response_redirect_id="{{ module.form_field.redirect_id }}"
	response_redirect_url="{{module.form_field.redirect_url}}"
	gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}"
  %}

  </div>
</div>

 

 

This is the javascript I am currently using based on this post's answer by @Teun  

window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      const input = document.querySelector('select[name="email"]');
      const context = document.querySelector('input[name="hs_context"]');
      const contextObject = JSON.parse(context.value);
      const redirectUrl = contextObject.redirectUrl; // Retrieve the redirectUrl from the form settings

      if (input) {
        if (input.value && redirectUrl) {
          window.location.href = redirectUrl + `?email=${input.value}`;
        }
      }
    }
  });

 

Output : Redirected to the page but with the 'submissionGuid' and not the email parameter as intended.

 

Any help will be so much appreciated ! 

 

Thank you in advance, 
Best regards.
Azhar

 

0 Upvotes
1 Accepted solution
AzharBondi
Solution
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

What worked for me:

 

window.addEventListener('message', event => {
if(event.data.type==='hsFormCallback'&&event.data.eventName==='onFormSubmitted'){
window.location.href='https://yourwebsite/' + `?email=${event.data.data.submissionValues.email}`;
}
});


           

 

View solution in original post

8 Replies 8
AzharBondi
Solution
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

What worked for me:

 

window.addEventListener('message', event => {
if(event.data.type==='hsFormCallback'&&event.data.eventName==='onFormSubmitted'){
window.location.href='https://yourwebsite/' + `?email=${event.data.data.submissionValues.email}`;
}
});


           

 

BarryGrennan
Guide

Include email "input field" of a form in the External Redirect URL

SOLVE

Circling back to your previous code.

 

Looking at it now, you haven't made the approriate chages to @Teun's solution.

His solution refers to a select field

'select[name="input_name"]'

which you've changed to 

'select[name="email"]'

 

I'm assuming that the field for emails on your form is an input not a select, so you'd want

'input[name="email"]'

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

 

 

AzharBondi
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

Hi again @BarryGrennan , 

Thank you for the correction ! I fixed that but still after I hit submit I get redirected without the email ...

AzharBondi_1-1700560287053.png

 

0 Upvotes
BarryGrennan
Guide

Include email "input field" of a form in the External Redirect URL

SOLVE
AzharBondi
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

Hi @BarryGrennan , 

First of all thank you for replying ! 
I applied what Stephanie suggested but this is how the URL appears it seems like it's not detecting the email for some reason.

AzharBondi_2-1700157345668.png

 

AzharBondi_1-1700157236959.png


The intended behavior is that the email gets filled automatically here in this input field ! 

And this is the code snippet

 

AzharBondi_3-1700157425217.png

 

Any idea why it's not working as intended?

Thank you ! 



 

0 Upvotes
Stephanie-OG
Key Advisor

Include email "input field" of a form in the External Redirect URL

SOLVE

@AzharBondi - HubL is a server-side language, so your {% form %} field is loaded on page load and won't be updated when the form is submitted. 

 

To update the URL when the form is submitted you'd need to use JavaScript with an onFormSubmit event.

 

In the article Barry linked to, I added the parameters to the Redirect link field in the sidebar of the page editor and noted that "it appears that you can only do this when setting the redirect URL at the page/template level and not when setting it directly in the Forms tool." so perhaps it won't work when trying to add the parameter in a module's {% form %} field either.

AzharBondi
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

Hi @Stephanie-OG , 

thank you for taking the time to reply! 
I have two questions please:
1/ Where exactly should I add the JavaScript snippet (onFormSubmit event) ? to my custom module(module.js) ?

 

2/ When you said  that you "added the parameters to the Redirect link field in the sidebar of the page editor"

 

Did you mean that you added the link with this format here like shown in the screenshot ?
https://samplewebsite.com/?email={{contact.email }}

 

AzharBondi_0-1700559678942.png

 

 

Thank you in advance ! 

 

0 Upvotes
AzharBondi
Contributor

Include email "input field" of a form in the External Redirect URL

SOLVE

Hi @Teun !
Any idea on how can I solve this please?
Thank you !

0 Upvotes