Creating a Drop-Down Survey Link on Homepage

[MAGNETmarketing]

My company would like website visitors to see a drop-down bar when they first visit our website, with a button linking to an external survey we'd like visitors to take. We don't want to collect emails, but we want a clickable, temporary drop down (not a menu, nor a form) that visitors will see through the end of December. Is that possible with the current HubSpot tools?

[DanielSanchez]

Hi @MAGNETmarketing 

Yes, is possible. You need create one custom module to this function. You have any developers on your team? If yes, in HubSpot CMS for Developers Certification Jeff teaches you how to easily create custom modules. 

If you dont have who create the modules, u can search in Marketplace if have one module avaliable to download or buy, or contact an expert to create this module.

I send now one simple code for you create one popup-form without javascript, if this solve your problem.

In Design Manager, go to File > New File > Custom Module.

Insert the code bellow:

HTML

<div id="openModal" class="modalDialog popup-auto-open">
  <div> <a href="#openModal" title="Close" class="close" style="background:#d00;color:fff;">X</a>
    Insert here your content, can see image or text
  </div>
</div>

CSS

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 1;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: auto;
}

.modalDialog:target {
  opacity: 0;
  pointer-events: none;
}

.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  padding:2px;
  border-radius:100%;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
    box-shadow: 0 0 5px #333333;
    padding: 5px;
    border-radius: 100%;
    transition: 0.1s linear all;
}

.popup-auto-open img{
  max-width:100%;
}

Now, just to pull the module created to template where you need use this popup.

More advanced: you can add fields to configure this popup in template or content editor, and enable or disable this. In this post i say about change class based in choice by field in content editor: https://community.hubspot.com/t5/CMS-Development/Custom-module-for-triggering-classes/m-p/306681#M14...

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂