In this tutorial users will now learn how to create forms with the Jet popup plugin. It does support all types of forms including signup forms, contact forms, Privacy policy and GDPR Forms. Users can create forms using Elementors’ drag and drop feature with various elements, set popup triggers and display location ,use various templates to different widgets and many more. Below are some steps to follow to create a sample form.
Step 1. Plugin Installation
The first thing users should ensure is to install and activate Elementor page builder before heading over to Jetpopup.
- To do so, login to your site’s Dashboard > Plugins > Add new.
- You can then search for the Elementor plugin and install.
- Follow the same step to install Jetpopup addon as it’s a recommendation plugin by Typer theme.
Step 2. Create a New Popup
Once the plugin has been installed users can create new popups.
- To do so head over to your WordPress Dashboard and find JetPopup on the left panel.
- Next click on ” Add New Popup ” in order to create a new popup.
- Users can also create a new popup from the “All popup” page.
- Once clicked enter the name of your popup on the next page then hit “Publish”.
- It should then reload the page to bring an option to edit the popup with Elementor thus, simply click on ” Edit with Elementor “.
Step 3. Customizing Popup with Elementor
Next you are redirected to the live builder’s page where you can customize or add modules for your popup depending on how you want it to look.
- To do so click on the plus icon button to add a layout(section). In this case we chose to add a row section.
- Then drag and drop a Headline module to the top. This will be the title that describes your popup.
- Below it drag and drop a text editor module which will provide further info of the popup.
- Next, you need to drag and drop a ” subscribe ” module which contains the fields of the popup form.
- Users can then adjust the settings such as adding a submit icon, including additional fields, and choosing the layout type (block & inline).
- Below that you can then add a popup action button that can let users close the popup or direct them to a link. Ensure you edit the styling options to make it look decent.
Step 4. Manage Popup Settings
Once you have created all content and saved it you need to manage some settings such as the display conditions and appearance.
- To do this, head over to the bottom left corner of Elementor and click on the settings gear icon.
- There are the general settings that describe the title and status of your popup.
- Under popup settings, you will find animation settings that you can choose from. Also when to open the popup (open event), if or not to show the popup once and an option to load the content with Ajax.
- Next is the display settings where users can set the display conditions of the popup. This is done on a lightbox where the user can add various rules/conditions on which pages the popup should appear.