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"
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?
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.
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.
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!
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.
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.
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.
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.
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.
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.