Elementor Pro Form

Author: Nasir Ahmed 165 views

Overview

Elementor has gained much popularity in recent years. Elementor Pro has built-in contact form widget in it. Advanced Form Integration plugin can integrate this Elementor Form into many other platforms.

Elementor Pro form works differently than other WordPress forms. Usually, on other forms, we create and design forms under their own menu and then use a shortcode to show them on the front end. But Elementor Pro Form is created directly on a page or post or template. 

There are three different methods to integrate Elementor Pro Form. I will now explain all one by one.

First Method

This it most common method and exactly the same way how the AFI plugin connects to other platform. Select sender form, select receiver platform, map fields and you are done. Let’s see how easily we can create this integration.

  • Get the Page or Post ID and Form Name

Go to the page on your website where the form exists. Click on Edit with Elementor . You will see the Post ID on the URL. Select the Form and you will find the Form Name on the left pane. Remember both Post ID and the Form Name.

On the above example screenshot the Post ID is 2120 and the Form Name is Contact Us.

  • Select the same Post ID and Form Name

Now create a new integration and select the same Post ID and Form Name as sender platform. Follow the steps below:

  1. Go to WordPress Admin > AFI Menu > Add New .

  2. A default title will be auto-filled in the Integration Title input box. You can change it to something relevant.

  3. In Trigger > Form/Data Provider select Elementor Pro Form.

  4. The Form/Task Name dropdown will show a list of all the Elementor Forms that were created in different pages of the website. Items will be named in post_id form_name format. The name for the form on the above example screenshot will be 2120 Contact Us. We need to select it.

  5. In Action > Platform dropdown, select the platform name to where you want to send the data. If you don't see the platform, go to plugin settings page and activate it. Complete the fields mapping. It can be different for different platforms. Please check out the Receiver Platforms documentation page.

  6. Conditional Logic can be applied if required.

  7. Click on Save Integration button and you are done.

Now fill the form with test data and submit, it should be sent to the receiver platform that was configured. If you don’t see the new data in the receiver platform, check the AFI > Log menu if any error was listed.

Form as a GLOBAL widget

When a form is added as a GLOBAL widget, a single form is shared on different pages. In this case, you may not see the actual Post ID to select in the Form/Data Provider dropdown. Select the original Post ID+Form Name and complete integration. Then go to the form settings and add the integration ID as shown in the second method below. 

Supported Form Fields

Here is the list of supported form fields in Elementor Pro Form that can be sent over to other platforms:

Field Supported Output
Text
Yes
Same as input
Email
Yes
Same as input
Textarea
Yes
Same as input
URL
Yes
Same as input
Tel
Yes
Same as input
Radio
Yes
Selected vlue
Select
Yes
Selected value
Checkbox
Yes
Comma-separated values
Acceptance
Yes
on (when selected)
Number
Yes
Same as input
Date
Yes
In YYYY-MM-DD format

Time

No
24H format
File Upload
Yes
Uploaded file link, comma-separated for multiple files
Password
Yes
Same as input

Second Method

The first method generally works on all cases. Still we have got a few reports that the integration is not working. So if you follow the first method but the integration is not working and there is no error log in AFI > Log menu then you just need to perform one more step.

  • Get the Integration ID

Go to the integration page that you created using the first method. You will get the ID on the title. Copy it.

On the above example screenshot the Post ID is 2120 and the Form Name is Contact Us.

  • Select Advanced Form Integration in Actions After Submit

Go to the form settings, click on the Actions After Submit input box. Select Advanced Form Integration from the dropdown.

  • Save the Integration ID

In the Advanced Form Integration section save the integration ID. If you want to connect this same form to multiple integrations then add comma-separated IDs. 

Now test the integration by filling out the form. Remember that, follow this second method only if the first method does not work. Otherwise, it may create duplicate entries as both methods will work separately. 

Third Method

It is a manual method. To setup integrations in this way follow the instructions below:

  • Select Trigger

Go to  WordPress Admin > AFI Menu > Add New . In Trigger > Form/Data Provider select Elementor Pro Form (Manual Method) .

In Form/Task Name select Manually add form field IDs.

  • Manually map form field IDs

In action select the receiver platform that you want to connect. While mapping the fields like name, email, phone, etc., manually copy each field ID from the form, enclose it with double curly braces and add it to the relevant input box. See the screenshots below.

After all the required field IDs are placed, save the integration.

  • Save the Integration ID

Now follow the second method and save the Integration ID to form settings. The setup is complete now. Do a few tests by filling out the form.

Conditional Logic

Conditional Logic can be used based on user-submitted data, so you can filter which submission you want to allow and which not. For instance, you may want to accept only the submissions where the user has agreed to terms and conditions. So use an acceptance field at the bottom of the form that takes the user’s consent. If you check the supported form fields table, you will see that the acceptance field sends the text on when it is marked. We can use a conditional logic like the screenshot below:

On this page