In this ‘onclick popup’ tutorial, we will show you how to add a form to a popup, trigger it with the click of a button, and close upon clicking the “Submit” button of the form, all using Elementor’s Popup Builder.
Hey Guys, Cassey here today we’ll create a page with a button that triggers a pop-up with a form and a pop-up that closes once you fill out the form and click Submit.
Sound complicated? With Elementor pop-ups it’s easy peasy. Let’s check it out.
So first off let’s load a page from our library. I’ll use this one you can see it already has a button so we can use it to trigger our pop-up.
For now let’s just publish our page and we’ll come back to it later after we create our pop-up.
So moving on to creating our pop-up go to templates and under pop-ups click add new pop-up. Let’s use a premade template. Hmm…how about this one now I know it’s design doesn’t fit our page but a quick tip here when uploading a page template as we did it uploads all the mages into our WordPress media library so we can now easily choose an image for a pop-up.
Let’s do it. Click the column handle here to enter its setting go to style and let’s change the column background image here. Change the text in the heading widget remove the message field in the form widget. Change the buttons color and now I think we’re all good.
Next we want the button to close the pop-up so under actions after submit choose pop-up and open the pop-up tab here and under action choose close pop-up. You can also switch to don’t show again once someone submits the form but let’s leave that out for now. Publish the pop-up and set the conditions and triggers, meaning where and when the pop-up will be displayed in this example we want a button to trigger our pop-up so we don’t need any conditions, triggers or advanced rules. So click Save and close.
Quick recap we’ve set up a pop-up with a form that when hitting the submit button sends a form and closes it.
Cool, now back to our page. Let’s click on the button here to edit its settings. Now click on dynamic next to the link and under actions click pop-up then click on the wrench icon and under action choose: Open pop-up under the pop-up field search for your pop-up and click it now when a user clicks on the button they’ll see our pop-up update the page. And let’s test it out.
Go to our page, click the button and there you go! There’s our pop-up fill in the details and click the send button and voila our pop-up closes.
Well that’s all for now folks make sure you subscribe to our YouTube channel for more videos and pop-ups catch you later.
Colors and Typography are the building blocks of any website. Elementor's global colors & Fonts enable you to change your colors and fonts all in one place, and have it update everywhere you placed it across your entire site.
Elementor Theme Builder, a single place to manage your ENTIRE site in a visual and intuitive way: headers, footers, global page templates, global post templates, and more. Every part of the site is intuitively within reach, making the task of designing a complete website that much easier.
Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.