Include Form Fill on Lightbox Pop Up
Hi @JyotiSharmaV
I have this old code lying around, which should look something like the below. I didn't create it, so I won't be able to assist on any updates, but hopefully it can help get you started:
<script>
// Lightbox
var att_config = {
// =========================== USER DEFINED CONFIGURATION ===========================
title: "Check out this great deal.",
subtitle: "Here are more details about this deal, don't miss out on this great deal.",
declineText: "NO THANKS",
imageUrl: "https://accrease.com/wp-content/uploads/2024/04/summit_recap.jpg",
buttonText: "GO HERE",
buttonLink: "https://www.adobe.com/marketing-cloud/target.html",
delay: 2,
clickBackgroundToClose: false
// =========================== END USER DEFINED CONFIGURATION ===========================
};
(function(){"use strict";
var title = att_config.title || "";
var subtitle = att_config.subtitle || "";
var buttonText = att_config.buttonText || "";
var buttonLink = att_config.buttonLink || "";
var declineText = att_config.declineText || "";
var template = `
<div id="att_lightbox">
<div class="att_lightbox_background"></div>
<div class="att_popup">
<div class="att_lightbox_left">
</div>
<div class="att_lightbox_right">
<div class="att_lightbox_right_contents">
<h1 class="att_lightbox_header">${title}</h1>
<p class="att_lightbox_subhheader">${subtitle}</p>
<form id="att_lightbox_form">
<input type="text" id="firstName" name="firstName" placeholder="First Name" required />
<input type="text" id="lastName" name="lastName" placeholder="Last Name" required />
<input type="email" id="email" name="email" placeholder="Email" required />
<button type="submit" class="att_lightbox_submit">Submit</button>
</form>
<a href="${buttonLink}" class="att_lightbox_button" rel="nofollow noopener">${buttonText}</a>
<a id="att_lightbox_close" href="#">${declineText}</a>
</div>
</div>
</div>
</div>
`;
var bgImage = att_config.imageUrl ? `background-image: url(${att_config.imageUrl});` : "";
var style = `
#att_lightbox {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.att_lightbox_background {
display: block;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: black;
opacity: 0.75;
z-index: 1000;
margin: 0;
padding: 0;
}
.att_popup * {
font-family: Helvetica, Arial, sans-serif;
}
.att_popup {
max-width: 800px;
max-height: 600px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
z-index: 1001;
border-radius: 1px;
}
.att_lightbox_left {
max-width: 540px;
width: 100%;
height: 100%;
background-color: white;
${bgImage}
background-size: auto 100%;
background-position: center;
}
.att_lightbox_right {
background-color: white;
display: block;
width: 100%;
height: 100%;
position: relative;
}
.att_lightbox_right_contents {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
height: calc(100% - 40px);
width: calc(100% - 40px);
}
.att_lightbox_header {
text-align: center;
font-size: 32pt;
color: #221E1F;
margin: 0;
padding: 1rem;
line-height: 1.35;
}
.att_lightbox_subhheader {
font-size: 14pt;
text-align: center;
color: #221E1F;
line-height: 1.35;
margin: 20px 30px;
padding: 0;
}
form#att_lightbox_form {
display: flex;
flex-direction: column;
width: 80%;
margin-bottom: 20px;
}
#att_lightbox_form input {
margin: 5px 0;
padding: 10px;
font-size: 12pt;
}
.att_lightbox_submit {
height: 42px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 2px;
font-size: 11pt;
cursor: pointer;
}
.att_lightbox_submit:hover {
background-color: #388E3C;
}
.att_lightbox_button {
height: 42px;
width: auto;
min-width: 80%;
background-color: #4CAF50;
color: white;
border-radius: 2px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 11pt;
margin: 10px;
}
.att_lightbox_button:hover {
background-color: #388E3C;
text-decoration: none;
cursor: pointer;
}
#att_lightbox_close {
font-size: 12pt;
color: #4A4A4A;
text-align: center;
text-decoration: none;
margin: 10px;
font-weight: 300;
}
#att_lightbox_close:hover {
text-decoration: underline;
}
@media (max-width: 801px) {
.att_popup {
margin: 20px;
}
.att_lightbox_left {
display: none
}
}
`;
var handlers = function() {
var t = att_config.delay || 5;
function n() {
document.getElementById("att_lightbox").style.display = "none";
}
if (att_config.delay !== false) {
setTimeout(function() {
if (!att_config.fired) {
document.getElementById("att_lightbox").style.display = "flex";
att_config.fired = true;
}
}, 1000 * t);
}
document.getElementById("att_lightbox_close").addEventListener("click", function(t) {
t.preventDefault();
n();
});
document.querySelector(".att_lightbox_background").addEventListener("click", function(t) {
if (att_config.clickBackgroundToClose) {
t.preventDefault();
n();
}
});
document.getElementById("att_lightbox_form").addEventListener("submit", function(e) {
e.preventDefault();
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
console.log("Form Submitted: ", { firstName, lastName, email });
alert("Thank you for submitting your details!");
n();
});
};
injector({ template: template, style: style, handlers: handlers });
"use strict";
function injector(e) {
var t = e.el || document.body;
var l = document.createElement("div");
if (e.templateClass) l.classList.add(e.templateClass);
l.innerHTML = e.template ? e.template.replace(/(\r\n\t|\n|\r\t)/gm, "") : "";
t.appendChild(l);
var n = document.createElement("style");
n.innerText = e.style ? e.style.replace(/(\r\n\t|\n|\r\t)/gm, "") : "";
document.head.appendChild(n);
if (e.handlers && typeof e.handlers === "function") e.handlers();
}
})();
</script>
@kandersen, I am curious where the data would get captured when you have the form filled out in the Lightbox pop-up template. Ultimately we want to capture the user information in our database.
Also, looks like this Lightbox template is bit rigid as when I am avoiding code for buttonText & buttonLink it is not displaying the pop-up. And, even when I am using the above code the form is getting displayed in VEC but not in the Activity QA link. The pop-up is coming blank
As said, I didn't create the code, so I won't be able to assist you address any issues. If I was you, I'd throw it into chatGPT and see if it could help fix the issues.
As for where the form will go. You define this in the form tag via action and method attributes - read how to here.
