How does Elementor Pro create a pop-up product inquiry form

Previously, Weiss notes introduced Elementor designs popup pop-up function This time, Lao Wei shared how to use Elementor to make pop-up product inquiry menus, which uses the popup pop-up function, which is also a record of the operation process.

We first use Elementor Pro to add the product detail page, then use the inquiry button on the template of the product detail page, click the button to call the popup to pop up the inquiry dialog window. In addition, Elementor Pro also has submissions to record inquiry information, so it is not necessary to install plug-ins such as Elementor contact form DB. The fewer plug-ins, the higher the performance of WordPress, and the faster the website.

At the same time, third-party form plug-ins such as Ninjaform, Wpforms, and contact form7 are not required. In addition, when such plug-ins are put into the popup, error prompts such as form submission failure will be displayed.

1. Preparation conditions

Elementor 、 Elementor Pro These two plug-ins are required.

It is also recommended to deploy an smtp function Post SMTP plug-in enables WordPress email SMTP Function.

2. Elementor Pro makes pop-up product inquiry form

In the column list on the left side of WordPress background, template>popup, click "Add popup" to add a new pop-up window.

At this time, after Lao Wei clicked the "Add" button, the screen turned white and kept refreshing without results. according to Elementor Editor Security Mode Solution We solved this problem.

The pop-up form can directly use the ready-made template in the official template library. Simply change the text and replace the image.

If you want to design by yourself, after closing the template library, drag the "Title" element and the "Form" element to the pop-up window.

• Change the title to contact us
• By default, the Form element adds three fields: name, email, and message. In addition, the honeypot field is added to shield the garbage robot.

Right click the Form element and select Store as global element, which can be used multiple times anywhere in Wang Han.

Click the "Publish" button at the bottom of the screen. In the pop-up publish settings, set it to Entire site.

The other two triggers and advanced rules can set the conditions after pop-up window and exit pop-up window.

For example, we can click the inquiry button on the product details page and pop up a window. We just need to associate the button with the Form form.

In the content tab of the button, click Link>Dynamic Label>Actions>popup.

Click popup again, click All and search the pop-up name added above in the search box to add it.

At this time, click the button to see the pop-up inquiry.

Add this global button on all product pages and the pages where you think it is necessary to place the button, test whether you can receive the inquiry email (pay attention to the trash bin), and check the inquiry record on the WordPress background>Element>Submissions page.

The inquiry email will be sent to your WordPress website administrator's email, or you can manually add a recipient email in the email to, separated by commas in English. Set the notification email title, body content, etc. Can also cc, Bcc, etc.