# Event for Dropdown Banner Form

**URL:** <https://community.hubspot.com/t/event-for-dropdown-banner-form/28198>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [November 19, 2020, 5:42am UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198 "2020-11-19T05:42:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![manojdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manojdev/32/63860_2.png) [@manojdev](https://community.hubspot.com/u/manojdev)\
**Post date:** [November 19, 2020, 5:42am UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/1 "2020-11-19T05:42:10Z")

</div>

Is there any event for dropdown banner form when it is about to be shown/animating and on closing the banner?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 19, 2020, 9:24pm UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/2 "2020-11-19T21:24:50Z")

</div>

Hey @manojdev

Are you asking if the HubSpot Dropdown banner has an event or if you can create an event?

What are you wanting to do?

---

<div class="post-metadata">

**Author:** ![manojdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manojdev/32/63860_2.png) [@manojdev](https://community.hubspot.com/u/manojdev)\
**Post date:** [November 20, 2020, 5:12am UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/3 "2020-11-20T05:12:18Z")

</div>

Hi Dennis,

Does HubSpot Dropdown banner has any event like when banner will be shown and also how can I move the position of the banner to bottom?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 20, 2020, 3:57pm UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/4 "2020-11-20T15:57:44Z")

</div>

@stefen have you ever hijacked the dropdown banner to display elsewhere?

@manojdev , you can set when and to whome the banner will be displayed in the [form settings](https://knowledge.hubspot.com/pop-up-forms/create-pop-up-forms#type)

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [November 20, 2020, 4:03pm UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/5 "2020-11-20T16:03:44Z")

</div>

@dennisedson @manojdev can’t say that i’ve tried hacking a HubSpot popup form. If I need something custom I will typically build it myself. It’s not too difficult if you use the [HTML Dialog element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) if you only need modern browser support. If you need older browser support [Magnific Popup](https://dimsemenov.com/plugins/magnific-popup/) is also a pretty simple one that is very popular.

---

<div class="post-metadata">

**Author:** ![manojdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manojdev/32/63860_2.png) [@manojdev](https://community.hubspot.com/u/manojdev)\
**Post date:** [November 21, 2020, 12:47am UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/6 "2020-11-21T00:47:27Z")

</div>

Hey @stefen ,

I got your point. I also prefer to build a custom banner. But I wanted email submission for my banner on click and integration of hubspot for it. As hubspot has that feature of the banner so tried to implement it with some customization. It seems like I won’t be having much control of it.

---

<div class="post-metadata">

**Author:** ![jonchim](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonchim/32/88818_2.png) [@jonchim](https://community.hubspot.com/u/jonchim)\
**Post date:** [November 20, 2020, 8:10pm UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/7 "2020-11-20T20:10:39Z")

</div>

Hey @manojdev ,

In the pop-up forms targeting settings towards the bottom you can control when the banner will be shown.  
 ![]()

With a little bit of CSS you should be able to position the banner to live at the bottom as well.  
If you target the .leadinModal class you can set top to initial and bottom to a value 0 you may need some !important tags.  
This is what the default modal outputs in HubSpot

.leadinModal {  
position: fixed;  
top: initial; /\* change this \*/  
right: 0;  
bottom: 0 !important; /\* change this \*/  
left: 0;  
overflow: visible;  
-webkit-overflow-scrolling: touch;  
z-index: 9999;  
font-size: 16px;  
}

Hope that works and feel free to shoot us a link so we can take a look if it doesn’t work

// edit  
As @manojdev, the banner will animate so using the below styles will remove that animation

.leadinModal-content {  
animation: none !important;  
}

---

<div class="post-metadata">

**Author:** ![manojdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/manojdev/32/63860_2.png) [@manojdev](https://community.hubspot.com/u/manojdev)\
**Post date:** [November 21, 2020, 12:49am UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/8 "2020-11-21T00:49:19Z")

</div>

@jonchim ,

Thanks for the helping out for moving banner to bottom. I also needed to disable the animation for .leaninModal else the banner will start animating from top to bottom in this case.

---

<div class="post-metadata">

**Author:** ![jonchim](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonchim/32/88818_2.png) [@jonchim](https://community.hubspot.com/u/jonchim)\
**Post date:** [November 23, 2020, 1:21pm UTC](https://community.hubspot.com/t/event-for-dropdown-banner-form/28198/9 "2020-11-23T13:21:45Z")

</div>

Hey @manojdev,

No problem good catch, targeting the .leadinModal-content class with animation of none should do the trick.

.leadinModal-content {  
animation: none !important;  
}
