How to do it?
- Add class=ks-cta-form inside the form element (child of the Webflow Form)
- Add id="modalWrapper" in the main modal div block, style it and add secondary class "ks-hidden" and make display: none
- On X inside the modal add id "ksCloseCtaForm"
Add the code before the end of </body>
Webflow.push(function () {
$(document).ready(function () {
// Select the form element by class name
const ctaForm = $(".ks-cta-form");
// Attach a submit event listener to the form
ctaForm.submit(function (event) {
event.preventDefault();
// Find the element with ID "modalWrapper" and remove the "ks-hidden" class
const resultModal = $("#modalWrapper");
resultModal.removeClass("ks-hidden");
});
// Select the element with ID "ksCloseCtaForm"
const ksCloseCtaForm = $("#ksCloseCtaForm");
// Attach a click event listener to the close button
ksCloseCtaForm.click(function (event) {
event.preventDefault();
// Find the element with ID "modalWrapper" and add the "ks-hidden" class
const resultModal = $("#modalWrapper");
resultModal.addClass("ks-hidden");
});
});
});
Here is the working solution, here is preview mode and for the clonable - write me on twitter: https://twitter.com/p_karpisek.