Description
- Click button > Open Popup with Form Block > Popup appears but Form doesn’t appear
My case
- Use JS code to add Inquire button to Product Detail
- Click Inquire button will open Form Popup. Form from Not Linked Page
- Popup shows but Form doesn’t appear in Popup
- Chrome Dev Tool shows missing Form Block tag in Popup
- WM Popup and other lightbox plugins has same problem
Solution
Use code like this to handle problem. Code contains Prefill Product Name
<script>
// CRITICAL: Define this FIRST, before any other scripts
(function() {
'use strict';
// Immediately add form definitions to import map
function ensureFormDefinitions() {
const loader = window.websiteComponents?.loader;
if (loader) {
loader.importMap = loader.importMap || {};
loader.importMap['website.components.form.visitor'] =
'https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.form/b48b7a06-1432-4835-8826-73f8f715a275_132/website.components.form.visitor.js';
loader.importMap['website.components.form.handlers'] =
'https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.form/b48b7a06-1432-4835-8826-73f8f715a275_132/website.components.form.handlers.js';
console.log("Form definitions added to import map");
return true;
}
return false;
}
// Try immediately
if (!ensureFormDefinitions()) {
const checkInterval = setInterval(function() {
if (ensureFormDefinitions()) {
clearInterval(checkInterval);
}
}, 50);
setTimeout(function() {
clearInterval(checkInterval);
}, 5000);
}
document.addEventListener('DOMContentLoaded', ensureFormDefinitions);
})();
</script>
<script>
// Use EVENT LISTENER instead of hooks
(function() {
'use strict';
console.log("Setting up wmPopup event listener for prefill");
// Listen for the popup open event
document.addEventListener('wmPopup:afterOpenPopup', function(event) {
console.log("=== POPUP EVENT FIRED ===");
console.log("Event detail:", event.detail);
const popupUrl = event.detail?.url;
console.log("Popup URL:", popupUrl);
console.log("Page title:", document.title);
if (popupUrl === '/contact') {
console.log("✓ Contact popup detected via event");
// Wait for form to be ready
setTimeout(function() {
const formBlock = document.querySelector('.wm-popup-content [data-block-type="1337"]');
console.log("Form block found:", !!formBlock);
if (formBlock) {
// Ensure import map
const loader = window.websiteComponents?.loader;
if (loader) {
loader.importMap = loader.importMap || {};
loader.importMap['website.components.form.visitor'] =
'https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.form/b48b7a06-1432-4835-8826-73f8f715a275_132/website.components.form.visitor.js';
loader.importMap['website.components.form.handlers'] =
'https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.form/b48b7a06-1432-4835-8826-73f8f715a275_132/website.components.form.handlers.js';
}
// Initialize form
if (window.Squarespace && window.Y) {
try {
const formNode = window.Y.one(formBlock);
if (window.Squarespace.initializeForm) {
window.Squarespace.initializeForm(window.Y, formNode);
console.log("✓ Form initialized");
}
} catch (error) {
console.error("Error initializing form:", error);
}
}
// Start prefill attempts
const pageTitle = document.title;
let attempts = 0;
const maxAttempts = 15;
function tryPrefill() {
attempts++;
console.log("--- Prefill attempt", attempts, "---");
const productField = document.querySelector('input#text-1abb1f2f-b802-45bc-b1dc-eaf7752e799c-field');
if (productField) {
console.log("✓ Field found!");
console.log("Field value before:", productField.value);
console.log("Field disabled:", productField.disabled);
console.log("Field visible:", productField.offsetParent !== null);
// Set value aggressively
const setValue = (val) => {
// Direct assignment
productField.value = val;
// Native setter
try {
const setter = Object.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"value"
).set;
setter.call(productField, val);
} catch (e) {
console.log("Setter error:", e);
}
// Trigger events
productField.dispatchEvent(new Event('input', { bubbles: true }));
productField.dispatchEvent(new Event('change', { bubbles: true }));
productField.dispatchEvent(new Event('blur', { bubbles: true }));
// React-specific
const tracker = productField._valueTracker;
if (tracker) {
tracker.setValue('');
}
productField.dispatchEvent(new Event('input', { bubbles: true }));
console.log("Value set to:", val);
console.log("Field value after:", productField.value);
};
setValue(pageTitle);
// Verify
setTimeout(function() {
console.log("Verification check - Current value:", productField.value);
if (productField.value !== pageTitle) {
console.log("Value didn't stick, trying again...");
setValue(pageTitle);
} else {
console.log("✓✓✓ SUCCESS! Value is set correctly");
}
}, 150);
// Setup monitoring
const form = productField.closest('form');
if (form && !form.dataset.prefillMonitoring) {
form.dataset.prefillMonitoring = 'true';
form.addEventListener('input', function() {
setTimeout(function() {
if (!productField.value) {
console.log("Field cleared, restoring...");
setValue(pageTitle);
}
}, 10);
}, true);
form.addEventListener('submit', function() {
if (!productField.value) {
console.log("Restoring before submit");
setValue(pageTitle);
}
}, true);
console.log("✓ Monitoring setup complete");
}
} else {
console.log("✗ Field not found yet");
if (attempts < maxAttempts) {
setTimeout(tryPrefill, 400);
} else {
console.log("Max attempts reached");
}
}
}
// Start trying to prefill
console.log("Starting prefill in 1 second...");
setTimeout(tryPrefill, 1000);
}
}, 300);
}
});
console.log("✓ Event listener registered");
})();
</script>
<script>
(function() {
'use strict';
function addInquireButtons() {
console.log("Adding Inquire buttons...");
var wrappers = document.querySelectorAll('.product-add-to-cart');
console.log("Found " + wrappers.length + " wrappers");
wrappers.forEach(function(wrapper) {
if (wrapper.querySelector('.second-button')) {
return;
}
var inquireButton = document.createElement('a');
inquireButton.className = 'btn btn--border theme-btn--primary-inverse sqs-button-element--primary second-button';
inquireButton.href = '#wm-popup=/contact#block-02c12286a51774064037';
inquireButton.textContent = 'Inquire';
wrapper.appendChild(inquireButton);
});
}
addInquireButtons();
window.addEventListener("load", function() {
addInquireButtons();
});
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var shouldCheck = false;
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && node.querySelector) {
if (node.querySelector('.sqs-add-to-cart-button-wrapper') ||
node.classList.contains('sqs-add-to-cart-button-wrapper')) {
shouldCheck = true;
}
}
});
});
if (shouldCheck) {
addInquireButtons();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
})();
</script>