Display form via Form Selector in custom module

SOLVE
Highlighted
Top Contributor | Platinum Partner

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

0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Top Contributor | Platinum Partner

@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! 

View solution in original post

10 Replies 10
Highlighted
Advisor | Diamond Partner

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 widgetsmy 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

form-switcher-2.JPG

 

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 placecopy&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







check Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Highlighted
Top Contributor | Platinum Partner

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

0 Upvotes
Highlighted
Advisor | Diamond Partner

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








check Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Highlighted
Top Contributor | Platinum Partner

@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 %}
0 Upvotes
Highlighted
Esteemed Contributor | Platinum Partner

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

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



Will you please help the community and give me some street cred by marking my answer as a solution if helped you? I'm fixing to buy a minivan and my cool points are running low.

Curious cats can find me at Ascend Inbound Marketing

Highlighted
Top Contributor | Platinum Partner

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

 

Highlighted
Advisor | Diamond Partner

@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








check Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Highlighted
Top Contributor | Platinum Partner

@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.

0 Upvotes
Highlighted
Top Advisor | Platinum Partner

@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.

0 Upvotes
Highlighted
Solution
Top Contributor | Platinum Partner

@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! 

View solution in original post