Include Form Fill on Lightbox Pop Up

Forum|Forum|1 year ago
October 21, 2024
1 reply
912 views

I am wondering how I can incorporate a form via Adobe Target to capture user data like first name, last name, email address, etc. within the Lightbox pop-up templates.

https://experienceleague.adobe.com/en/docs/target/using/experiences/vec/modifications/experience-templates

Right now lightbox allows you to set the CTA button which takes you to a landing page where you can have the form to fill however, I want the user to fill out the form on that Lightbox pop-up and capture the data. Not sure how this can be done. Any thoughts on how can we implement this?

Best answer by kandersen-1

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.

kandersen-1

Community Advisor

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>

Test forum signature

JyotiSharmaV

Author

Community Advisor

@kandersen-1, 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

kandersen-1

Accepted solution

Community Advisor

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.

Test forum signature

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded