FORM in custom modules

[MichalC]

Hello, is there any possibility that HS developers have changed something in the way of loading hs forms in custom modules? I have an issue while adding two same custom modules to one landing/website page. What I've noticed is that now hs form is loaded in container with ID "hs_form_target_{{ module name }}".  So in case you are adding two same custom modules, you've got two same IDs on one page. And if I get it right, the form from the second module is loading in the first container and overrides the correct one while the second module is empty.   Is there any way to avoid it?

M.

[piersg · Accepted solution]

I think you just need to remove form_key="{{ blockname }}" . When I use the above code, Hubspot gives the wrapping div a unique id in each iteration of the module e.g. "hs_form_target_form_34625612" and "hs_form_target_form_127648987", whereas yours is repeating "hs_form_target_ctaDefault06".

[MichalC]

@piersg thank you!  that was the issue.

[piersg · Accepted solution]

I think you just need to remove form_key="{{ blockname }}" . When I use the above code, Hubspot gives the wrapping div a unique id in each iteration of the module e.g. "hs_form_target_form_34625612" and "hs_form_target_form_127648987", whereas yours is repeating "hs_form_target_ctaDefault06".

[piersg]

Hi @MichalC, how are you adding the form to your custom module? 

My recommendation would be to add a form selector field in the custom module, then use this HubL where you want the form

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

This will allow you to have the same module multiple times on one page and have different forms in each iteration/version of said module

[Mariuszsz]

@piersg And how does your json file look like? Thanks!

[piersg · Accepted solution]

It varies but usually like this

{
    "id" : "[ID]",
    "name" : "form",
    "display_width" : null,
    "label" : "Form",
    "required" : false,
    "locked" : false,
    "type" : "form",
    "default" : {
      "response_type" : "inline",
      "message" : "Thanks for submitting the form."
    }
  }

There's more info on form field JSON here: https://developers.hubspot.com/docs/cms/building-blocks/module-theme-fields#form 

[Mariuszsz]

Thanks a lot... you are right. I forgot about it. One more question. Do you think that the sent message could be editable outside the code?

[piersg]

Yeah, if you include a form field in a custom module it automatically includes a thank you message rich text field.

[MichalC]

Hello @piersg , thank you for quick reply. The problem is that it used to work all fine, and I am already using it that way : 

The problem is that if you will add two sam modules on one page, form from the second module is loading in the first one,

As I mentioned, I have added two modules and each of them has same conteiner ID (which is added automaticly) and I think that can cause the problem.  

I have created simple page, try to hit refresh button while you visit this page, it will load different forms at each time
here is a sample : page