Form widget in blog footer cannot be overridden

andyrobertson
Member

For some reason I'm not able to duplicate this pop-up form on this page into the footer: http://blog.dmg.energy/blog

 

I notice I'm not able to drag/drop a custom module into a global group, so I've been trying to copy/paste this code into a Custom HubL instead:

 

<!-- The button -->
<a href="#{{ widget.modal_button|md5 }}" class="open-popup-link hs-button primary large" style="background-color: #c3cf00; border: 2px solid #c3cf00; color: #ffffff;" >{{ widget.modal_button }}</a>

<!-- the modal popup is hidden until the button is clicked -->
<div id="{{ widget.modal_button|md5 }}" class="white-popup mfp-hide">
    {% form "my_form" form_to_use='4b15db2b-bfd7-472b-9d3f-ff8208b7bc40', title='Get Updates!', overridable=True %}
    <p style="font-size: 0.8em;">By submitting this form, you are subscribing to receive email communications from dmg :: events' blog. Please note you can unsubscribe from these communications at any time.</p>
    <p style="font-size: 0.8em;"><a href="mailto:customerservice@dmgevents.com">Contact us</a> for more information.</p>
</div>

<!-- Copy and paste your css file between the quotations in the href below -->
<link rel="stylesheet" href='{{ get_public_template_url("Custom/blog/web_page_basic/magnific-popup.css") }}'>
<style>
    .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;
    }
</style>

<!-- Copy and paste your js file between the quotations in the src below -->
<script src='{{ get_public_template_url("Custom/blog/web_page_basic/magnific-popup.js") }}'></script>
<script>
    $(document).ready(function() {
        $('.open-popup-link').magnificPopup({
          type:'inline',
          midClick: true
        });
    });
</script>

 

I keep getting this error whenever I try and publish the HubL: "The widget with the following name cannot be overrideable: my_form"

 

Any ideas?

0 Upvotes
16 Replies 16
Jsum
Key Advisor

Have you tried changing the system name "my_form" to something else like "my_form1"? 

0 Upvotes
andyrobertson
Member

Yeah, it gives me the same error but with the updated form name 😞

0 Upvotes
Jsum
Key Advisor

That is very strange. Short of getting into your portal to see exactly what you are doing I don't know that i can help. This is one issue I have not yet seen. 

 

Have you contacted support? maybe it is a bug. 

0 Upvotes
DaniellePeters
Top Contributor

Based on that error, I'd try removing overrideable=True from this line

 

{% form "my_form" form_to_use='4b15db2b-bfd7-472b-9d3f-ff8208b7bc40', title='Get Updates!', overridable=True %}

 

0 Upvotes
andyrobertson
Member

I'm still getting the same error unfortunately, I added 'overridable=True' as an experiment after finding a block syntax example here: http://designers.hubspot.com/docs/hubl/hubl-supported-modules

0 Upvotes
DaniellePeters
Top Contributor

Actually, taking another look, I would explictly set overrideable to False in this case. It defaults to True and you can't have modules that are editable on the page level (i.e. overrideable) within a global group.

0 Upvotes
andyrobertson
Member

Shoot, still getting the error

0 Upvotes
Jsum
Key Advisor

I am literally stabbing in the dark here, but try:

 

1. removing the the form (ctr +x to cut so it is copied) and saving. See if another error comes up. If so it is probably what is causing that error that is effecting the form.

 

2. removing the default form identifier and saving. Maybe it is the specific form you are using that is having trouble

 

3. if 1 allows you to save and you don't need this form to be editable ( I imagine it will be the same for all popups) Just swap out the form HubL for the embed code for the form which you can find in the gear drop down for the form on your forms dashboard.

 

I have seen a lot of scenerios and am usually pretty good at finding a solution, but this one has me in the dark. I can't think of any other way to make a form not overridable except setting it to false in the code. 

The only thing that you are setting on the form is the title, so that would be the only attribute trying to override the forms initial settings I would think. It's possible that the title is causing the error, maybe try removing that and seeing if it does the trick. 

0 Upvotes
andyrobertson
Member

I gave all three a shot, but to no avail.

 

If I remove the form the Hubl will publish properly, so it's definitely something to do with the form not being overridable.

 

Currently the embed code for the form is in the footer, but what I'm trying to accomplish is the same pop-up as at the top of the page ('Get Updates!' button).

 

I'm still stumped. Although I appreciate the help!

0 Upvotes
DaniellePeters
Top Contributor

This could have been resolved in your recent iteration but make sure you are spelling overrideable with an "e". It's misspelled as "overridable" in the original sample you posted.

0 Upvotes
andyrobertson
Member

Lol whoops! Changed the spelling but still nothing.

 

I actually found the form embed code and it'll save now but doesn't display the form or the paragraphs.. sigh.

 

<!-- The button -->
<a href="#{{ widget.modal_button|md5 }}" class="open-popup-link hs-button primary large" style="background-color: #c3cf00; border: 2px solid #c3cf00; color: #ffffff;" >{{ widget.modal_button }}</a>

<!-- the modal popup is hidden until the button is clicked -->
<div id="{{ widget.modal_button|md5 }}" class="white-popup mfp-hide">
    

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: '2886012',
    formId: 'a9e9eb26-c420-48fb-9760-7ab19c0fd276'
  });
</script>
    
    
    
    <p style="font-size: 0.8em;">By submitting this form, you are subscribing to receive email communications from dmg :: events' blog. Please note you can unsubscribe from these communications at any time.</p>
    <p style="font-size: 0.8em;"><a href="mailto:customerservice@dmgevents.com">Contact us</a> for more information.</p>
</div>

<!-- Copy and paste your css file between the quotations in the href below -->
<link rel="stylesheet" href='{{ get_public_template_url("Custom/blog/web_page_basic/magnific-popup.css") }}'>
<style>
    .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;
    }
    a.open-popup-link.hs-button.primary.large {
      font-size: 1.5em;
    }
</style>

<!-- Copy and paste your js file between the quotations in the src below -->
<script src='{{ get_public_template_url("Custom/blog/web_page_basic/magnific-popup.js") }}'></script>
<script>
    $(document).ready(function() {
        $('.open-popup-link').magnificPopup({
          type:'inline',
          midClick: true
        });
    });
</script>

 

I'll continue tinkering with it.

0 Upvotes
Jsum
Key Advisor

What happens when you change the form ID to a different form? I wonder if it is possible that because this form is currently being called in the head (perhaps set to overrideable=False?) it is interfering with your trying to call it in the footer. If a different form works then I would imagine this is why.

0 Upvotes
andyrobertson
Member

Well once I used the embed code the custom Hubl saved properly.

 

The issue I'm facing now is displaying the content. I'm guessing it's got something to do with the fact that I can't add any fields and copy their snippets.. but I'm not totally sure.

 

You can see the button in the footer but it's fairly non-functional now.

0 Upvotes
jason1242000
Participant

@andyrobertson

 

Hey! I saw your post and ran into the same problem with footer cannot be overridden.

 

It looks like when you use that code in a global module it doesnt work but the embed works. So very strange. I think it might be a glitch that might need to be resolved.

 

Thanks,

 

Jason.

redbranchmedia
Contributor | Partner

Same issue (which led me to this thread). 

 

Mine is a much simpler layout at this point, because I wanted to see if it would work. I'm adding a Hubl module to a Global module and getting the "the widget with the following name cannot be overridable" error, not matter what  name I use. 

 

{% choice "show_ei_modal" overrideable=True export_to_template_context=True, label="Would you like to show the Exit Intent Modal on this page?", choices="[[\"no\", \"No\"], [\"yes\", \"Yes\"]]" %}
{% if widget_data.show_ei_modal.value == yes %}
<div class="test"></div>
{% endif %}

Doesn't matter if overrideable is set to True or False. 

0 Upvotes
EricSalvi
HubSpot Employee

Hey @andyrobertson,
Just to let you know, I tried your code on one of my global footers and with what @DaniellePeters suggested is to change 

{% form "my_form" form_to_use='(Change to your Form ID)', title='Get Updates!', overrideable=False %}

worked perfectly for me.  
Also changed the above line to your embedded form code and your form works in my footer as well. Have you checked your Google Web Tools for console errors? Maybe some type of JavaScript interfering with it?
Do you have a link to a test page by any chance?