Overview
Marketers frequently employ lead generation pop-ups on their websites to gather important information from users, such as phone numbers and email addresses. In order to provide a seamless user experience, it's crucial to carefully consider the dismissal options for these pop-ups. MoEngage offers the ability to automatically dismiss the pop-up after a certain number of seconds. However, in certain situations, marketers may prefer for the pop-up to be dismissed only after the form has been submitted. This document will detail how to achieve this specific use case as shown in the video below.
Campaign Creation
Follow the steps below to create this campaign:
- Create an OSM campaign with a trigger criteria that suits your business needs.
- Add the below code block in Custom HTML.
Custom HTML
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=ABeeZee|Abel|Aclonica|Acme|Actor|Advent+Pro|Alata|Alatsi|Aldrich|Alef|Alegreya+Sans|Alegreya+Sans+SC|Allerta|Allerta+Stencil|Almarai|Amaranth|Amiko|Anaheim|Andika|Andika+New+Basic|Antic|Anton|Archivo|Archivo+Black|Archivo+Narrow|Arimo|Armata|Arsenal|Arya|Asap|Asap+Condensed|Assistant|Asul|Athiti|Average+Sans|B612|Bai+Jamjuree|Barlow|Barlow+Condensed|Barlow+Semi+Condensed|Basic|Be+Vietnam|Belleza|BenchNine|Biryani|Black+And+White+Picture|Black+Han+Sans|Blinker|Bubbler+One|Cabin|Cabin+Condensed|Cagliostro|Cairo|Cambay|Candal|Cantarell|Cantora+One|Capriola|Carme|Carrois+Gothic|Carrois+Gothic+SC|Catamaran|Chakra+Petch|Changa|Chathura|Chau+Philomene+One|Chivo|Coda+Caption|Commissioner|Convergence|Cuprum|DM+Sans|Darker+Grotesque|Days+One|Denk+One|Dhurjati|Didact+Gothic|Do+Hyeon|Doppio+One|Dorsa|Dosis|Duru+Sans|Economica|El+Messiri|Electrolize|Encode+Sans|Encode+Sans+Condensed|Encode+Sans+Expanded|Encode+Sans+Semi+Condensed|Encode+Sans+Semi+Expanded|Englebert|Epilogue|Exo|Exo+2|Fahkwang|Farro|Federo|Fira+Sans|Fira+Sans+Condensed|Fira+Sans+Extra+Condensed|Fjalla+One|Francois+One|Fresca|GFS+Neohellenic|Gafata|Galdeano|Gayathri|Geo|Gidugu|Gothic+A1|Gotu|Gudea|Hammersmith+One|Harmattan|Heebo|Hind|Hind+Guntur|Hind+Madurai|Hind+Siliguri|Hind+Vadodara|Homenaje|IBM+Plex+Sans|IBM+Plex+Sans+Condensed|Imprima|Inder|Inria+Sans|Inter|Istok+Web|Jaldi|Jockey+One|Josefin+Sans|Jost|Jua|Julius+Sans+One|Jura|K2D|Kanit|Kantumruy|Karla|Khand|Khula|Kite+One|KoHo|Kodchasan|Kosugi|Kosugi+Maru|Krona+One|Krub|Kulim+Park|Kumbh+Sans|Lato|Lekton|Lexend+Deca|Lexend+Exa|Lexend+Giga|Lexend+Mega|Lexend+Peta|Lexend+Tera|Lexend+Zetta|Libre+Franklin|Livvic|M+PLUS+1p|M+PLUS+Rounded+1c|Mada|Magra|Mako|Mallanna|Mandali|Manjari|Manrope|Marmelad|Martel+Sans|Marvel|Maven+Pro|Meera+Inimai|Merriweather+Sans|Metrophobic|Michroma|Mina|Miriam+Libre|Mitr|Molengo|Monda|Montserrat|Montserrat+Alternates|Montserrat+Subrayada|Mouse+Memoirs|Mukta|Mukta+Mahee|Mukta+Malar|Mukta+Vaani|Mulish|NTR|Nanum+Gothic|News+Cycle|Niramit|Nobile|Notable|Noto+Sans|Noto+Sans+HK|Noto+Sans+JP|Noto+Sans+KR|Noto+Sans+SC|Noto+Sans+TC|Numans|Nunito|Nunito+Sans|Open+Sans|Open+Sans+Condensed|Orbitron|Orienta|Oswald|Overpass|Oxygen|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|Padauk|Palanquin|Palanquin+Dark|Pathway+Gothic+One|Pattaya|Pavanam|Paytone+One|Philosopher|Play|Pontano+Sans|Poppins|Port+Lligat+Sans|Pragati+Narrow|Prompt|Proza+Libre|Public+Sans|Puritan|Quantico|Quattrocento+Sans|Questrial|Quicksand|Rajdhani|Raleway|Ramabhadra|Rambla|Rationale|Recursive|Red+Hat+Display|Red+Hat+Text|Reem+Kufi|Roboto|Roboto+Condensed|Ropa+Sans|Rosario|Rubik|Rubik+Mono+One|Ruda|Ruluko|Rum+Raisin|Russo+One|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Sansita|Sarabun|Sarala|Sarpanch|Sawarabi+Gothic|Sawarabi+Mincho|Scada|Secular+One|Sen|Seymour+One|Shanti|Share+Tech|Signika|Signika+Negative|Sintony|Six+Caps|Snippet|Sora|Source+Sans+Pro|Space+Grotesk|Spartan|Spinnaker|Strait|Stylish|Sulphur+Point|Sunflower|Syncopate|Syne|Tajawal|Tauri|Teko|Telex|Tenali+Ramakrishna|Tenor+Sans|Text+Me+One|Thasadith|Timmana|Titillium+Web|Tomorrow|Trispace|Ubuntu|Ubuntu+Condensed|Varela|Varela+Round|Varta|Viga|Voltaire|Wendy+One|Wire+One|Work+Sans|Yanone+Kaffeesatz|Yantramanav"> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
.lead-gen-container {
width: 600px;
height: 400px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
background: #ffffff;
text-align: center;
width: 55%;
background: linear-gradient(180deg, #385A95 0%, #162E59 100%) !important;
}
.flex-v-container {
display: flex;
flex-direction: column;
margin-top: 34px;
padding-right: 40px;
}
.flex-v-container>div {
display: flex;
flex-direction: column;
}
.input-container {
margin-top: 10px;
padding: 0 13px;
border: 0px solid transparent;
border-bottom: 1px solid #ccc;
height: 30px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 11px;
line-height: 9px;
color: #A9A9A9;
}
.button-container {
margin-top: 20px;
padding: 13px 0;
background: #FFC219;
color: #ffffff;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
font-weight: bold;
font-family: Montserrat;
font-size: 14px;
cursor: pointer;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 11px;
line-height: 15px;
/* identical to box height */
text-align: center;
text-transform: uppercase;
color: #063D64;
}
.header {
font-family: 'Open Sans';
font-style: normal;
font-weight: 900;
font-size: 22px;
line-height: 110%;
color: #FFC219;
text-align: left;
margin: -10;
}
.title {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
text-align: left;
margin: 24px 0 0 0;
}
.close-icon {
position: absolute;
top: 10px;
right: 10px;
border: none;
font-size: 20px;
cursor: pointer;
color: #FFFFFF
background: transparent;
}
button:focus {
outline: none;
}
input:focus {
outline: none;
border-bottom: 1px solid #000000;
}
body {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-repeat: no-repeat;
font-size: 12px;
}
@media only screen and (max-width: 600px) {
.container {
width: 100%;
background-size: 100%;
padding-left: 0;
}
.lead-gen-container {
width: 90%;
flex-direction: column;
height: 500px;
}
.no-bounds:first-child {
padding-top: 31px;
}
.header {
text-align: center;
}
.title {
text-align: center;
}
.bg-image {
width: 100% !important;
background: url('https://www.holiday-factory.com/assets/img/moengage-bg-mobile.jpg') no-repeat bottom center !important;
background-position: center;
background-size: cover;
}
.flex-v-container {
width: 80%;
padding: 0;
position: relative;
flex-direction: column !important;
margin: 16px auto;
gap: 9px;
}
.flex-v-container>div {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.flex-v-container>div>label {
position: absolute;
top: -4px;
line-height: unset !important;
}
.email {
margin-top: 0 !important;
}
.button-container {
margin-top: 0 !important
}
.subscribe {
flex-direction: column !important;
width: 80%;
margin-top: unset !important;
margin-bottom: 46px !important;
}
.input-container {
width: 100%;
margin-top: 14px !important
}
}
.moe-error {
border: 1px solid #ec4b39;
}
.moe-error-text.invisible {
display: none;
}
.moe-error-text {
color: red;
font-size: 12px;
margin-top: 1px;
}
.hidden {
display: none
}
.bg-image {
width: 45%;
background: url('https://www.holiday-factory.com/assets/img/moengage-bg.jpg') no-repeat bottom center;
height: 100%;
background-position: center;
background-size: cover;
}
.white {
color: #fff;
}
.flex-v-container>div>label {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-align: left;
color: #F9FCFE;
}
.email {
margin-top: 16px;
}
.modal{
display: none;
text-align: center;
position: relative;
height:100%;
width:100%;
background-color: linear-gradient(180deg, #385A95 0%, #162E59 100%) !important;
margin-top: 200px;
border: none;
box-sizing: border-box;
color: #FFFFFF;
font-size: 25px;
}
</style>
</head>
<body data-editor-type="MOE_EDITOR" data-template-type="LEAD_GEN" marginheight="0" data--w-e-b="center" class="" data-new-gr-c-s-check-loaded="14.1080.0" data-gr-ext-installed="" style="z-index: 9999;" data-new-gr-c-s-loaded="14.1080.0">
<div style="display: flex; position: relative;" class="lead-gen-container" id="complete_cont">
<div class="container moe-container moe-element" data-id="CONTAINER" style="z-index: 999999;">
<div id="id01" class="modal header12 moe-element" data-id="HEADER2" style="z-index: 99999;padding-left: 20px;padding-right: 150px;top: -30px;width: 500px;margin-top: 180px;margin-right: 10px;right: 20px;"> <p> Thank You for subscribing</p></div>
<div id="other" class="no-bounds" style="display:inline; padding-left: 20px;">
<p id="one" class="header moe-element" data-id="HEADER1" style="z-index: 9999; display: inline-block; margin-top: 3px; margin-left: 0px; margin-right: 80px;" contenteditable="false"><span class="white">Let’s</span> Travel<br><span class="white" style="z-index: 9999;">the World</span> together!</p>
<p id="two" class="title moe-element" data-id="HEADER2" style="z-index: 999999; display: inline-block; color: rgb(255, 255, 255); font-size: 12px; margin: 6px 37px -60px 0px; text-align: left; border-radius: 0px;" contenteditable="false">Get immediate access to our Secret Deals, Latest Offers and More.</p>
<p style="z-index: 9999; display: none; color: rgb(255, 255, 255); font-size: 12px; margin: 6px 100px -50px 0px; text-align: left; border-radius: 0px;" contenteditable="false">{% if UserAttribute['uid'] is defined %}MOE_NOT_SEND{% endif %}</p>. <!-- This popup is only for non registered users -->
</div>
<div class="flex-v-container no-bounds" style="padding-left: 20px;">
<div id="namediv">
<label for="firstname">First Name</label>
<input placeholder="First Name" class="input-container moe-element" data-id="INPUT1" id="TEXT_INPUT_1" data-user="u_fn" style="z-index: 9999; margin-top: 0px; margin-bottom: 0px;">
</div>
<div id="emaildiv">
<label for="email" class="email">Email Address</label>
<input placeholder="Email Address" class="input-container moe-element" data-id="INPUT2" id="TEXT_INPUT_2" data-user="u_em" data-input-validation-type="email" required="" style="z-index: 9999;margin-top: 0px; margin-bottom: 0px;">
<label class="moe-error-text invisible">This field is required</label>
</div>
</div>
<div class="flex-v-container subscribe no-bounds" style="display: flex; padding-left:20px">
<span class="button-container moe-element" id="lead-gen-submit" onclick="document.getElementById('id01').style.display='block'; onclick=document.getElementById('other').style.display='none'; onclick=document.getElementById('namediv').style.display='none'; onclick=document.getElementById('emaildiv').style.display='none'; onclick=document.getElementById('lead-gen-submit').style.display='none'; onclick=timoutfun();" data-id="SUBMIT">Subscribe Now</span>
</div>
<button class="close-icon moe-element moe-inapp-close" id="moe-close-element" data-id="CLOSE">x</button>
</div>
<div class="bg-image">
<img class="hidden" src="">
</div>
</div>
<script>
const buttonElem = document.getElementById('lead-gen-submit');
const inputElement = document.getElementById('TEXT_INPUT_1');
const inputElement1 = document.getElementById('TEXT_INPUT_2');
buttonElem.disabled = true;
function removeError(targetElement) {
const nextSiblings = targetElement.nextElementSibling;
if (targetElement && targetElement.classList.contains("moe-error")) {
targetElement.classList.remove("moe-error");
}
if (nextSiblings) {
nextSiblings.classList.add('invisible');
}
}
function addError(targetElement, validationMsg) {
const nextSiblings = targetElement.nextElementSibling;
targetElement.classList.add("moe-error");
if (nextSiblings && nextSiblings.classList.contains('invisible')) {
nextSiblings.classList.remove('invisible');
}
if (nextSiblings && validationMsg) {
nextSiblings.textContent = validationMsg;
}
}
function isEmailAddressValid(email) {
const emailRegex =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailRegex.test(String(email.trim()).toLowerCase());
}
function isFormDataValid() {
let isFormValid = true;
const inputElements = document.querySelectorAll("input");
for (let i = 0; i < inputElements.length; i++) {
let validationMsg;
let isValid = true;
if (
inputElements[i].hasAttribute("required") &&
!inputElements[i].value
) {
isValid = false;
validationMsg = 'This field is required';
}
// email validation
if (isValid && inputElements[i].dataset.inputValidationType === "email") {
if (!isEmailAddressValid(inputElements[i].value)) {
isValid = false;
validationMsg = 'Please enter valid email address';
}
}
if (!isValid) {
addError(inputElements[i], validationMsg);
isFormValid = false;
} else {
removeError(inputElements[i]);
}
}
return isFormValid;
}
function submitLeadgenData(targetElement) {
const isMoeInAppCloseBtnAvailable = targetElement && targetElement.classList.contains("moe-inapp-close");
const isMoeInAppClickBtnAvailable = targetElement && targetElement.classList.contains('moe-inapp-click');
if (!isFormDataValid()) {
// remove moe-inapp-close class to prevent popup close
// if (isMoeInAppCloseBtnAvailable) {
// targetElement.classList.remove("moe-inapp-close");
// }
// remove moe-inapp-click class to prevent click tracking
if (isMoeInAppClickBtnAvailable) {
targetElement.classList.remove("moe-inapp-click");
}
return false;
}
// if (!isMoeInAppCloseBtnAvailable) {
// targetElement.classList.add("moe-inapp-close");
// }
if (!isMoeInAppClickBtnAvailable) {
targetElement.classList.add('moe-inapp-click');
}
const ATTR_MAP = {
uid: "USER_ATTRIBUTE_UNIQUE_ID",
u_em: "USER_ATTRIBUTE_USER_EMAIL",
u_mb: "USER_ATTRIBUTE_USER_MOBILE",
u_fn: "USER_ATTRIBUTE_USER_FIRST_NAME",
u_ln: "USER_ATTRIBUTE_USER_LAST_NAME",
u_n: "USER_ATTRIBUTE_USER_NAME",
u_gd: "USER_ATTRIBUTE_USER_GENDER",
u_bd: "USER_ATTRIBUTE_USER_BDAY",
};
const attributeObj = {};
const inputElements = document.querySelectorAll("input");
for (let i = 0; i < inputElements.length; i++) {
const inputElement = inputElements[i];
if (inputElement.style.display !== "none") {
const userAttribute = ATTR_MAP[inputElement.dataset.user] || inputElement.dataset.user;
window.parent.Moengage.add_user_attribute(userAttribute, inputElement.value);
attributeObj[userAttribute] = inputElement.value;
}
}
window.parent.Moengage.add_unique_user_id(attributeObj.USER_ATTRIBUTE_USER_EMAIL)
window.parent.Moengage.track_event("MOE_RESPONSE_SUBMITTED", attributeObj);
}
function enableButton() {
if (inputElement.style.display !== 'none' && inputElement1.style.display !== 'none') {
if (inputElement.value.length && inputElement1.value.length) {
buttonElem.disabled = false;
}
} else if (inputElement.style.display !== 'none') {
if (inputElement.value.length) {
buttonElem.disabled = false;
}
} else if (inputElement1.style.display !== 'none') {
if (inputElement1.value.length) {
buttonElem.disabled = false;
}
}
}
inputElement.addEventListener('input', (event) => {
enableButton();
});
inputElement1.addEventListener('input', (event) => {
enableButton();
});
document.getElementById('lead-gen-submit').addEventListener('click', (event) => {
if (window.parent.Moengage) {
submitLeadgenData(event.target);
}
});
var modal = document.getElementById('id01')
function timoutfun() {setTimeout(function(){
window.parent.Moengage.onsite.displayManager.dismissInapp("*campaign_id*");
}, 2000);
//2000 refers to the time in milliseconds
};
</script>
<grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration>
</body></html>