5 min read

Multi-step form for Webflow: How to make open popup with second form after the 1st form submits

Multi-step form for Webflow: How to make open popup with second form after the 1st form submits

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.

Subscribe to newsletter

Subscribe to receive the latest blog posts to your inbox every week.

By subscribing you agree to with our Privacy Policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Website pre-launch checklist

69 steps pre-launch checklist is the most complex checklist developed by years of experience in Karpi Studio.

You will find how to test and fix:
- loading speed issues,
- responsivity issues on all current devices,
- SEO issues,
- and many more.

€30 Now: €9.00
Check it now
Home
about
work
Blog
Contact

Suggested articles