How to Add WPForms to Elementor Popups with an Input Mask

Overview

Would you like to have your form appear in a popup while using a WPForms input mask? If you’re using Elementor’s popup and WPForms input mask, there is a small snippet of code to add to ensure that the input mask will be used correctly. In this tutorial, we’ll show you how to create a popup in Elementor that will display a form with an input mask.

Setup

There are a couple of things you’ll need to set up first. We’ll detail each step below.

Setting up the input mask

First, you’ll need to set up your form to use an input mask. If you need any assistance in setting up an input mask, please review this documentation.

Setting up the Elementor popup

Next, you’ll need to set up the Elementor popup. If you need any assistance with that, Elementor has some documentation on that for you to follow.

Adding the code to your site

Finally, you’ll need to copy the code snippet below to your site.

<script>
    if (window.jQuery) {
        jQuery('.wpforms-masked-input').inputmask();
    }
</script>

And that’s it! You’ve now successfully created an Elementor popup while using a WPForms input mask. Would you like to customize the Date field? Take a look at our article on How to Customize the Date Time Field Date Options.