Download file links after submitting form

[mehdi]

Hi,

We have a form on the website page that has several checkboxes. On submitting the form, we want to show the download file links on the thank you page. But the download file links should be shown only for the checkboxes that have been selected.

As in below form, if user checks first checkbox and clicks submit button, then first download file link should be shown on the next thank you page. If user checks both, then 2 download file links should be shown. If user checks 10 checkboxes on the form then 10 links will be shown and so on.

Is this achievable in hubspot?

Thanks!

[tjoyce · Accepted solution]

@mehdi

There are a lot of ways to accomplish this. I personally would head down the route of setting a window storage key value pair on form submit, then read that value again on the thank you page. It's kind of like setting and reading cookies using local storage: The following code won't be exact but , should give you an idea of what direction to head. This is assuming you can use the embed code instead of the HUBL Form module.

hbspt.forms.create({
    portalId: 'xxxxxxxx',
    formId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    onFormSubmit: function($form){
       localStorage.setItem('checkbox1', 'no');
       localStorage.setItem('checkbox2', 'no');
       localStorage.setItem('checkbox3', 'no');
        if($form.find('.nameofyourclass1:checkbox:checked')){
             localStorage.setItem('checkbox1', 'yes');
        }
        if($form.find('.nameofyourclass2:checkbox:checked')){
             localStorage.setItem('checkbox2', 'yes');
        }
        if($form.find('.nameofyourclass3:checkbox:checked')){
             localStorage.setItem('checkbox3', 'yes');
        }
    }
});

Then, on your Thank you page logic, you would identify these values on page load and show or hide download links that match certain comparisons.

$(function(){
    $('.download-links').hide();
    if(localStorage.getItem('checkbox1') == 'yes'){
        $('.download-links.download1').show();
    }
    if(localStorage.getItem('checkbox2') == 'yes'){
        $('.download-links.download2').show();
    }
    if(localStorage.getItem('checkbox3') == 'yes'){
        $('.download-links.download3').show();
    }
});

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

[mehdi]

Hi,

Thanks for your reply, I am curious from where did you got hbspt.forms.create ??

When I edit the hubl Form module, I see {% form form_key='{{ name }}', form_to_use='{{ module.form.form_id }}', ..... %}

Thanks!

[tjoyce]

If you go to your form editor in HS and choose "share" in the top right, you can get an embed code that can be used on any website. You could also use this embed code internally within the HubSpot designer to solve problems like your own. Instead of using the Form module, use a raw_html block and drop the embed code into there.

[mehdi]

Hi, thanks again. Using hbspt.forms.create doesn't redirect to thank you page. It just shows inline thank you message. Any idea how to redirect to thank you page?

[tjoyce]

@mehdi - Sorry, I should have linked you to the documentation for the embeds. There is a redirectUrl option you can add as a parameter or, I do believe, if you edit your form in the HubSpot editor to redirect to a page there, it should just be inherited by the embed script.

[jmichaelTest]

Hi tjoyce,

Came across this post when goggling for another issue. This is my requirement:

1. I have a landing page which has a HubSPot form embedded using form module

2. On submit of the button I want to have access the form values and call an external API 

I think hbspt.forms.create is a good option. However I am not able to figure out how to use hbspt.forms.create in  Landing Pages.

I looked at one of your responses in which you said :
If you go to your form editor in HS and choose "share" in the top right, you can get an embed code that can be used on any website. You could also use this embed code internally within the HubSpot designer to solve problems like your own. Instead of using the Form module, use a raw_html block and drop the embed code into there.

Can you show me how to use raw_html block in my landing page?

Thanks a lot
Johnson

[tjoyce]

Sure @jmichaelTest - In the page editor, click on Settings -> Advanced options; Then go to Footer HTML and drop in a raw_text HUBL tag and hit save. Then refresh the page editor page and in your list of modules on the left, you should see a place to paste in the embed code, all the way at the bottom.

{% raw_html "my_raw_html" label="Enter HTML here", value="<div>EMBED WILL GO HERE</div>" %}

If you don't want your form in the footer, make use of the target attribute for the embed to place your form anywhere you want on the page

hbspt.forms.create({
    portalId: 'xxxxxxxx',
    formId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    target: '.where-i-want-my-form-to-appear'
});

And, that should be it. Hope it helps.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[mehdi]

Hi,

Thank you.  Even though I have marked your answer as accepted but I stumbled upon one simpler solution without writing any code.

I created custom check box property in content settings. Then I used that property on my form. Then in the inline message of the form I could access that property by using personalization tokens. But the only problem is that this doesn't shows multiple checkboxes selections. This always shows only first checked box value and ignores other two.