Display form via Form Selector in custom module

[Craig]

Hi everyone. I have a custom module, where a form selector is given as an option based on the user selecting 'Form' as the content type for this column. The other options are rich text and image, and both work fine. 

However, when I try to output the form, I just get the form object as a string.

{{ column.form }}

returns:

{form_id=01c7695d-bla-bla, response_type=inline, message=Thanks for submitting the form., gotowebinar_webinar_key=null}

in the template. I've also tried the following:

{% set formId = column.form.form_id %}
{% form "my_form" form_to_use='"' + formId + '"' %}

but this returns nothing at all.

Thanks in advance

[Anton]

Hi @Craig,

I've written a small module to test this out and it works if you paste the "snippet" from the form-widget into your desired html-part. 

Here are some screens and the code from my module

my widgets

The code:

<div class="row">
  <div class="container">
    <div class="span12">
    {% if module.selector == "text" %}
      <div class="custom-module-text-only">{{ module.text }}</div>
    	{% elif module.selctor == "image"%}
      <div class="custom-module-text-and-image text-part">
      	{{ module.text }}
      </div>
      <div class="custom-module-text-and-image image-part">
      	{{ module.image }}
      </div>
    	{% elif module.selector == "form" %}
      <div class="custom-module-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}}" gotowebinar_webinar_key="{{ module.module.form.gotowebinar_webinar_key }}" %}
      </div>
    {% endif %}
    </div>
  </div>
</div>

This is how it looks after you place it into your page/template

I think the most important difference/part is, that you copy the "snippet" and not the "value"(see screen below)

copy&paste the snippet into the desired place

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[Craig]

Hi @Anton - unfortunately this still doesn't work for me - console error as below:

v2.js:12 Please, pass a portal id and form id to render your HubSpot form

Have tried adding 

portal_id="###" and portalId="###"

but get the same console error

[Anton]

Hi @Craig, 

could you post the complete code snippet of your module or a link to a page where it's used? 

Thanks

regards,

Anton

[Craig]

@Anton, sure:

{% for row in module.row %}
    
    	<div class="row {{ row.html_class }}">
    	
        {% for column in row.column %}

          <div class="{{ column.column_width }}">

            {% if column.content_type == 'rich_text' %}

              {{ column.rich_text_content }}

            {% elif column.content_type == 'image' %}

              <img class="img-fluid" src="{{ column.image.src }}">

            {% elif %}

            {% elif column.content_type == '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}}" %}

            {% elif column.content_type == 'cta' %}
							
            	{{ cta(column.cta)  }} 
              

            {% endif %}

          </div>

        {% endfor %}
        
    </div>
    
    {% endfor %}

[John]

Here's my "have you checked your pockets?" reply 😉

Do the module's form values have default values, or are they blank?

[Craig]

Hi @John - I thought my pockets were empty but I just checked and found a £1 coin - so thanks for that!

You mean the actual form fields? Ie in the form that I select, does that form contain fields with default values?

In case you missed the bit about the portal ID error - the error I get with the code is:

v2.js:12 Please, pass a portal id and form id to render your HubSpot form

Thanks

[Anton]

@Craig

try to replace 

 {% elif column.content_type == '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}}" %}

 

with just a simple

 {% elif column.content_type == 'form' %}
{% form %}

Beside that you can try to replace all of the single quotemarks with double quotemarks. Maybe this is the issue.

Example:

from

 {% if column.content_type == 'rich_text' %}

to

 {% if column.content_type == "rich_text" %}

regards,

Anton

[Craig]

@Anton using 

{% form %} 

means I'm not using the form selector so they won't get the right form.

And the conditional isn't the issue (the code within it runs accordingly) - plus 'rich_text' is the same as "rich_text" when evaluating a string.

[tjoyce]

@Craig, @Anton - This could be a bonafied bug in HubSpot. They quietly overnight pushed out major updates to their form code about 3 weeks ago. Try using an embed code and not the module, just to see if you get better results. It might help you narrow down the issue. 

I'm getting the same results as @Anton, I created a simple module with a textfield that I can add the form id and then did 

{% form form_to_use="{{ module.formid }}" %}

The only difference being that you must have your custom fields grouped because @Craig, you are calling module.form.form_id. It's the only thing i see that stands out.

[Craig · Accepted solution]

@tjoyce it was the nesting, well spotted.

I was correctly grabbing the form ID originally, and for whatever reason it didn't work - probably error in adding the string within the HubL.

But when I updated the code which added the string ID correctly, I had 

module.form.form_id

rather than 

column.form.form_id

Updated to the above and it works.

Thanks all for the help!