Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures

Table of Contents

When it comes to creating forms in WordPress, Elementor Pro's form widget is the last option for most WP designers and developers because of some limitations. This guide will explain how to extend the capability of the Elementor Form widget using Dynamic.ooo addons for Elementor.

We will be creating a book session for which users will be able to pick a doctor from our database as the doctor they wish to see for their medical checkup and counseling.

The demo of what we this is what you have in the iframe below.

The magic of Dynamic.ooo is when you pick an option from the available Select field for Physician Type.

In case you don't already have it (required to follow the steps below) you can get Dynamic.ooo at a discount here.

Let's create an Elementor Pro form to start with

Create all basic form fields you don't need Dynamic.ooo. In our example, as seen above, these are the Name, Email, Phone No, Location, and Physician Type.

Extending E Pro form features with Dynamic.ooo

Since other fields in the form were created based on options that existed in the Physician Type select field, you have to give this field an ID. This ID will be used to dynamically pull data when users select what type of physician they want to see.

Opening the "Advanced" tab of the field and setting the ID to "physician"
Opening the "Advanced" tab of the field and setting the ID to "physician"

How to add a Dynamic Select field to your Elementor Pro form

Once the field has been given an ID. proceed to set other fields based on what is needed. In our case, I added the field provided by Dynamic.ooo called Dynamic Select and I have labeled it "Specify" as seen in the image above.

Configure your Dynamic select to properly pull the right data
Configure your Dynamic select to properly pull the right data
  • Type: as you can see, the type of field is set to Dynamic select.
  • Reference Field ID: the reference field ID is set to "physician", which is the ID of the Physician Type field.
  • Options: this is where you are required to add the options that will be displayed when the user selects an option in the Physician Type field.
  • use square brackets and options to create data in your Dynamic select. In our form, we want to pull sub-specialties when the user picks a Pediatrician or Gynecologist. So our option will look like this:

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures 1

As you can see, we put the options in the Physician Type select field in square brackets and the option that will be displayed if the options(Physician Type) are picked. Here, we have [Pediatrician] and [Gynecologist]. Under the referenced option, add the options you want users to select and that is done.

How to add conditional logic to your Elementor Pro form

Dynamic.ooo makes it possible to show fields based on some user's action in your Elementor Pro form. Although the process of creating this condition isn't as straightforward as you will get in other WP form plugins, it still is something worth having. Probably, in the future, they will make the process easier, especially for beginners.

The steps involved in creating conditions in Elementor forms using Dynamic.ooo is as follow:

Condition tab in form field added by Dynamic.ooo
Condition tab in form field added by Dynamic.ooo

If you have any programming knowledge, writing the conditions in Dynamic.ooo is simple. All you have to do is use the reference ID and the option you want to check. In our situation, the condition is added to the Specify field and we want to show the field based on the options the user picked from the Physician Type field.

To properly have this setup, I used the Physician ID and options in the select field. Remember that our ID is "physician" and we have four options(Select, Pediatrician, Gynecologist, and Neurologist) in the field. We want to show the Specify field based on whether the user picked Pediatrician or Gynecologist.

So, we write our conditions like this:

physician == "Pediatrician" or physician == "Gynecologist"

And if you don't wish to manually write the code yourself, then you can use the Condition Generator provided by Dynamic.ooo to create your conditions. Copy and paste in the Condition Expression box when done.

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures 2
Condition Expression box

As you can see below, you can create condition expressions easily with the Condition Generator.

Condition Generator by Dynamic.ooo
Condition Generator by Dynamic.ooo

Once you are done creating the expressions using the Condition Generator, copy the result given to you by the generator and paste it into the condition expression box, and save and reload the page to test.

How to add a dynamically populated Select field to your Elementor Pro form

This is one of the most useful extensions for the Elementor Pro form provided by Dynamic.ooo. Have you ever wanted to create a form where you can dynamically pull data from your posts and CPT into the form for users to select? Well, if this is you...Dynamic.ooo has made it possible to achieve this.

In this tutorial, I want the user to select the doctor they will love to have a consultation with, and to do this, all I had to do was to add the Select field to my form.

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures 3

Then, in the Options box, instead of manually adding the options for our select field as we do with the Elementor form, we have to open the Dynamic tag by clicking on the icon.

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures 4
Open the dynamic tag to see options from Dynamic.ooo

Scroll down on the opened panel to where you have Dynamic.ooo and select "My Post". The reason why I am selecting My Post is that I want to pull content from a custom post type. If you want to pull content from your blog's post or Woocommerce product, Dynamic.ooo already has that by default. Because we have no woocommerce installed on our site, you can't find products under the Dynamic.ooo section of the panel, but you can see Post, second on the list, after Cryptocurrency.

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures 5
Dynamic.ooo extends the capabilities of Elementor's form select field to allow you to pull data from posts, products, CPTs, etc.

After selecting My Posts, you have to open the "My Posts" settings to configure it to pull the exact data you need. In our case, we need to only pull published data from the Doctor's CPT.

Elementor Pro Forms: Icons, Select2, Logic, PDF, Signatures 6
Settings to pull the data we need to display.

I have chosen to display the data in alphabetical order instead of by date, which is the default setting from this wonderful addon. I have also added the conditions we have in the Specify field to the Select Doctor field and you can see that both fields will only appear if you choose Pediatrician or Gynecologist.

If Dynamic.ooo can make it possible for this extension to be fine-tuned so that we can actually pull the exact data we want, for example, manually adding the doctors we want or fetching doctors under a taxonomy, then this addon will be the complete form solution for WordPress.

How to add an icon selection to your Elementor Pro form

(coming soon)

How to add a signature field to your Elementor Pro form

(coming soon)

How to add a Select2 field to your Elementor Pro form

(coming soon)

How to generate a PDF dynamically from your Elementor Pro form

(coming soon)

Conclusion

While the form extensions provided by this addon take Elementor Form to new heights, I couldn't capture all that is possible with this addon.

For instance, the location Autocomplete feature by Dynamic.ooo should have been discussed in this tutorial. You probably already know what it does though, as it's frequently seen online. It's that address autocomplete, powered by Google maps API. Yep, that's available with Dynamic.ooo as well.

I recommend Dynamic.ooo to web design agencies building websites using WordPress and Elementor. It can be used for complex websites as well as smaller projects like landing pages, which often require an advanced form.

Looking for something else? Search across 2445 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply