Using the same form in Lightboxes for Different Event Registrations | Community
Skip to main content
A
AndrewCl4
New Participant
March 19, 2021
Solved

Using the same form in Lightboxes for Different Event Registrations

  • March 19, 2021
  • 1 reply
  • 3304 views

Hi everyone,

Trying to figure out if this is possible - interested if we can use the same form on a landing page that populates via a lightbox, but add something that allows us to then differentiate between the different lightbox-populating CTAs on the page. The reasoning behind this is it would allow us to promote registrations for different events OR promote different gated pieces of content all on one central page but we could use the same universal form each time (right now we are creating custom forms and then using that form submission to trigger the appropriate smart campaign for these "central hub" type pages). 

I thought I could add something to the lightbox link and then trigger off of "fills out form" with a "clicked link, link contains" logic to differentiate between the different CTA boxes on the page but haven't gotten this to work. The html for the lightbox CTA is 

<a href="javascript&colon;void(0)" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

so I tried creating tokens and adding those to the link, and also tried adding an ID to the link via the "advanced" settings i.e. 

<a href="javascript&colon;void(0)?mktId={{my.Event 1}}" class="CTA resource_form" style="text-decoration: none; outline: 0;" target="_blank" id="Form One">Register Now</a>

but haven't gotten this to pick up, looking at my lead's activity log after testing it seems like the lightbox forms aren't registering as a "clicked link on webpage" so that's obviously a hinder to my strategy.

 

If anyone has any ideas or has executed something similar please let me know, and thank you in advance for any help oy guidance you can provide!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

First, I can't help but mention you don't need to entity-encode the colon here:

<a href="javascript&colon;void(0)" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

 

The colon is not only valid but expected in an href:

<a href="javascript&colon;void(0)" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

 

 Just as it would be here:

<a href="https://example.com" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

 

Now to your question, when you're popping up the lightbox, you know what link was clicked (since the click event is what you're capturing). So store the link info in a hidden field. Like so:

 

MktoForms2 :: Detect Link that Launched Lightbox v1.1.0

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
March 19, 2021

First, I can't help but mention you don't need to entity-encode the colon here:

<a href="javascript&colon;void(0)" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

 

The colon is not only valid but expected in an href:

<a href="javascript&colon;void(0)" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

 

 Just as it would be here:

<a href="https://example.com" class="CTA resource_form" style="text-decoration: none; outline: 0;">Register Now</a>

 

Now to your question, when you're popping up the lightbox, you know what link was clicked (since the click event is what you're capturing). So store the link info in a hidden field. Like so:

 

MktoForms2 :: Detect Link that Launched Lightbox v1.1.0

saraht-2
saraht-2
New Participant
April 19, 2022

Hi there, I am having a similar issue, and thanks to some help from @SanfordWhiteman (THANK YOU!), I have gotten the form to load on the link for New York City on this page:

info.axissecurity.com/Summit.html

 

However, the form is popping up full screen and also multiple times so I must have done something screwy. 

This is the code I added to the LP template:

  <script src="//info.axissecurity.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_2154"></form>
<script>function showMessage() {
MktoForms2.loadForm("//info.axissecurity.com", "786-ZZF-162", 2154, function (form){MktoForms2.lightbox(form).show();});
};</script>

 and this is the link code:

<a href="#" onclick="showMessage();">New York, NY</a>

 

Any help is greatly appreciated 🙂

SanfordWhiteman
SanfordWhiteman
New Participant
April 19, 2022

Hmm. The full-width is coming from separate CSS on the page, not related directly to the lightbox code.

 

But for the lightbox, you want to use the approach in the CodePen linked to above. Don’t attach directly to the link click. More like this (note HTML, CSS, and JS panes of the Pen):

MktoForms2 :: nation/323935

    Terms & ConditionsAccessibility statement

    Loading footer...