CMS Development

Craig
Top Contributor

Display form via Form Selector in custom module

SOLVE

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
Craig
Solution
Top Contributor

Display form via Form Selector in custom module

SOLVE

@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
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Display form via Form Selector in custom module

SOLVE

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
Anton Bujanowski Signature
0 Upvotes
Craig
Top Contributor

Display form via Form Selector in custom module

SOLVE

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
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Display form via Form Selector in custom module

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
Craig
Top Contributor

Display form via Form Selector in custom module

SOLVE

@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
John
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Display form via Form Selector in custom module

SOLVE

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

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



I like kudos almost as much as cake – a close second.

Craig
Top Contributor

Display form via Form Selector in custom module

SOLVE

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
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Display form via Form Selector in custom module

SOLVE

@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

Anton Bujanowski Signature
0 Upvotes
Craig
Top Contributor

Display form via Form Selector in custom module

SOLVE

@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
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Display form via Form Selector in custom module

SOLVE

@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
Craig
Solution
Top Contributor

Display form via Form Selector in custom module

SOLVE

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