CMS Development

AzharBondi
Contributor

Target the URL using right syntax to communicate between HubL and Javascript

Hi, 

 

I would love to be able to change the URL in the page editor where I have a dedicated URL field for that

> response_redirect_url="{{ module.form_field.redirect_url }}"

 

Right now, I am using a hard coded URL which is not very convenient for the marketers when they want to make the changes!

This is the code that I am using to do a redirect to page when I submit a 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 }}"

  %}


  <script>
  
    window.addEventListener('message', event => {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      
     window.location.href = "mywebsite.com" + `?email=${event.data.data.submissionValues.email}`;
     console.log("email", event.data.data.submissionValues.email, event.data.data);
     console.log("Dynamic URL:", event.data.data.submissionValues.redirectUrl);
      }
       
    });
           
  </script>

  </div>
</div>

 

 

This Console printed > Undefined

 

 console.log("Dynamic URL:", event.data.data.submissionValues.redirectUrl);

 

 

These are the ones I tested to substitute the URL "mywebsite.com": 

 

1/ 

AzharBondi_0-1701089621741.png

 

2/ 

 

AzharBondi_2-1701089782065.png

 

3/ 

AzharBondi_1-1701089708519.png

 

 

any ideas how can I target : response_redirect_url="{{ module.form_field.redirect_url }}" within the JavaScript snippet?

Best regards,

Azhar Bondi

 

0 Upvotes
2 Replies 2
AzharBondi
Contributor

Target the URL using right syntax to communicate between HubL and Javascript

Hey @Jaycee_Lewis ! 

 

Yes, I still couldn't figure out how to solve this and I assume it is related to what you mentioned above !
If I solve it, I will share the solution here ! 

Thank you

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Target the URL using right syntax to communicate between HubL and Javascript

Hey, @AzharBondi 👋 Did you get this resolved? I wonder if the issue you shared is related to HubL running server-side and JS being client-side. And the JS can't access your HubL variable the way you are expecting.

 

I'd love to hear your thoughts.

 

Best,

Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes