modal pop up form

[fbroder]

Alright.....

So it seems like there are toooons of people having problems with making modal pop-ups on HubSpot. I'm driving myself crazy trying to figure this out. This an easy thing to implement on most other platforms. I know they are working on custom modules in the marketplace, but you'd think someone would come out with a very descriptive, comprehensive one and done module or explainer for this, as I'm sure there are lots of people that want this and don't want to go through the headache of trial and error with the lacking explainers.   I have been through a few explainers and can figure it out mostly but still get stuck.  I'm not incredibly design and code savy.....

Here is the issue.

My modal pops up and is partly obstructed by the header, also about 30% of the time the form just appears at the bottom.

Anyone out there help me make this? or have a detailed module instruction? 

Thanks!

 Hubspot!   create an easy way to do this!

[tjoyce]

I didn't realize their was such a need for popup forms. I'm adding this to the top of our feature list for the form designer.

[nickmanoogian]

Has a modal form been created yet for hubspot?

[David_M]

Nothing yet? No Modal window to insert a form?

[tjoyce]

https://community.hubspot.com/t5/CMS-Development/Popup-HubSpot-form-on-CTA-click/m-p/197140#M6825

[SaraLynnn1 · Accepted solution]

I had the same issue and searched everywhere for a solution...and finally found one in this free template from the Marketplace: products/synx/resource-page-with-lightbox-popup-form

It's not as straightforward or comprehensive in terms of an exact explanation for the process, but I was able to use it to create modal forms that did not have the errors you described in your post (also, I was able to use it for contact forms; it's not limited to 'resource downloads' as the name suggests). It basically provides the base HubL code for a custom module that allows you to choose the form you wish to feature in the modal box, and can be adjusted accordingly. I essentially used the custom module in my own templates (instead of trying to modify the existing one that is supplied).

Again, not the perfect solution, but it definitely saved me a ton of time and does the job well. I agree though that there should be a comprehensive guide to this issue--it took me hours of research to finally stumble across this, but I'm happy I did!

Hope that helps 🙂

[AndreaWeir]

Hi Sara Lynn, 

I am currently trying to implement the Synx modal popup form on one of my landing pages, but having trouble getting it to function properly. I'm hoping you might be able to help me out!

I'm not sure if part of the issue is the new design manager (as it does ask for modules to be "upgraded" to be used in the new version). 

Did you just make the "Download Button" module global and use it in another template? Is there anything else within the original synx template that needs to be used to make it function properly (like some code in the Synx header or something?) 

Please let me know if you have any insight on where I might be going wrong - I'm by no means an expert here, just trying to muddle something together.

Thanks so much in advance!!

[tmattocks]

Thank you SaraLynn. That was pretty easy to implement. Did you use a captcha? I added one, but it is so large with selecting the images that it pops below the scroll point and you can't select all the images. 

[SaraLynnn1]

@tmattocks No, I did not utilize a captcha. Honestly, I was so relieved to find a solution for the form modal displaying properly after many hours of troubleshooting, I figured I'd better not test my luck 

However, I did a little research, and it sounds like you are still using version 1 of Google's CAPTCHA, and not reCAPTCHA (see image below for reference). reCAPTCHAAssuming that's what is going on, I found a few references explaining how to get HubSpot to use this new version, and thus bypass the annoying (and yes, large!!) picture selection process.

Community Post

HubSpot Article (looks like this was updated just a week or so ago)

Hope that this helps! 

[tmattocks]

Thank you SaraLynn. 

One other question. Did you leave the template pretty much as is? It doesn't match my other templates and I can't seem to get the menu working on it. I was able to get the footer css changed but not the header menu css. 

It would be easier at this point to just leave the form page without a menu and add a close button to the page once they have completed it. I have spent hours trying to change the template to somewhat mimic what the other pages look like without much luck. I can't find any documents that explain how to add a close button. 

Thanks again for the tips.