Modal Pop Up Team Member

I am trying to develop a team member module with a pop up module box. Here is a preview link to what I have so far.

https://www.ascensionrs.com/meet-the-team.html-0?hs_preview=rnYVFdbD-6734615586

Is there a way to link the entire module including image to link to pop up instead of just a button that says learn more. More like this example here as the entire module links to the pop up: http://www.hubmate.co/keynote/team-popup-form

Thanks in advance for any feedback!

Hey @IAM, you should be able to simply wrap your entire .wcs section with your anchor link in your custom module here: Design Manager | HubSpot

Your code from lines 1-10 would look like this:

<a class="wcs-cta-button" href="#tmp{{ name }}" rel="modal : open">
 <div class="wcs"> <div class="wcs-col-12 wcs-pop-the-form" style="background-color: {{ module.background_color.color }}"> <div class="wcs-col-12 wcs-page-center"> {% inline_rich_text field="callout_text" value="{{ module.callout_text }}" %} </div> </div> </div></a>

Thank you for the response. I tried that, but something appears to be conflicting because the pop up module doesn’t show up now.

https://www.ascensionrs.com/meet-the-team.html-0?hs_preview=rnYVFdbD-6734615586

Thoughts? Thank you in advance!

Hi @IAM, there was a simple syntax error where there was a space in the `modal:open` attribute (my reply had the spaces so that was my fault). I removed them and the popup now works :slightly_smiling_face:

Thank you cbarley! That worked. :slightly_smiling_face:

I have a problem with this pop up, I create a Landing Page and make a pop up with a form, but the form doesn´t appeare.

I put the same in another part of the page and It shows completely but in the other is hidden.

Help

I need this same solution is there a tutorial somewhere on this?

Hi @LRGramos

Are you looking for a general tutorial on how to make a popup?

Here is a possible tutorial for you.

I do not believe there is a HubSpot specific tutorial, but I will add it to my list to look into :grinning_face: