Written by
Pavel Karpisek
Pavel Karpisek
Published on
April 17, 2023
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.
Home
Reviews
Ynvisible
Blog
Contact

Suggested articles

Unleash Your Imagination: Grab Our Studio's Epic Capability Deck!

Thanks for downloading the
Epic Capability Deck

  1. Check your mailbox
  2. Click on the Link
  3. Download the PDF
Oops! Something went wrong while submitting the form.