Skip to main content

Elementor

Build your forms and write custom twig code using Elementor!

Introduction

info

Premium feature! This feature is available in the addon to the premium extension.

Our plugin supports Elementor. We offer several widgets that are compatible with Elementor (including Elementor Pro). To edit a form using Elementor, you need to install and activate the 'Dataverse Integration Elementor Extension' plugin. Please note that this functionality is available only with the premium version of our plugin.

note

You may also need to install and activate Elementor Pro.

Form widget

Widget Name - Form

Category - Pro

Description: It is a native form of Elementor, but you should add Send to Dataverse action after submit.

All you need to do is drag the Form widget into the content area, create the necessary fields and Save their ID.

Elementor formSave id

Next, navigate to Actions After Submit, click + and add the Send to Dataverse action.

Send to Dataverse action

To choose a table save the form and get back to the Pages -> All pages and find the page and click Configure Binding. Here you can choose a table for new records.

Binding configuration

Click Edit with Elementor and Send to Dataverse. Here you will see the chosen table in the Table dropdown. After selecting an action, for example create, you need to add Fields Mapping. Click +ADD ITEM. Here, fill in Form field (which is the field ID that was saved previously) and Table column (which is the logical name for the column) for each field.

Mapping in Elementor
note

To ensure updated field values are displayed after submission, set the Do not reset form values after submitting option to Yes.

Do not reset form values after submitting

How to create a field for a lookup column

Steps:

  1. Add a new field and set its type to Dataverse Lookup.

  2. Specify the corresponding table and view.

Create a lookup field
  1. Map this field with the column logical name in the Send to Dataverse action.

How to create a field for a Date Time column

To create a field for a Date Time column, follow these steps:

  1. Add Two Fields:
  • Date Field: Create a field specifically for the date.
Elementor date
  • Time Field: Create another field specifically for the time.
Elementor time
  1. In the Send to Dataverse section:
  • Assign the same column logical name for both the date and time fields.

  • Use appropriate postfixes such as _local_date, _local_time, _utc_date, or _utc_time to manage timezone adjustments.

Elementor time field
Elementor date field

Dataverse Admin Area Settings:

Adjust the ICDS_DATETIME_VALUE setting with options like:

  • Legacy
  • UTC
  • Local

Examples for the createdon column which has User Local behavior:

LegacyUTCLocal
createdon_utc_dateUTCUTCUTC
createdon_utc_timeUTCUTCUTC
createdon_local_dateconvert the date to the user's timezoneconvert the date to the user's timezoneconvert the date to the user's timezone
createdon_local_timeconvert the time to the user's timezoneconvert the time to the user's timezoneconvert the time to the user's timezone

How to create a field for a Decimal or Float Column

Steps:

  1. Add the Dataverse Number Field:
Elementor decimal
  1. Configure column logical name:

In the Send to Dataverse section:

  • Set the column logical name in the Table column.
  • Specify the field ID in the Form field.
Elementor decimal2

How to create a field for a Choice Column

Example: You have a choice field with day options.

Choice label

Steps:

  1. Create a Select Field:

Set the options in the format label|value as shown in the image below.

Days
  1. Configure the column logical name in the Send to Dataverse section:
  • Set the column logical name in the Table column.
  • Specify the field ID in the Form field.

Twig widget

Widget Name - Twig Template

Category - Dataverse

Description: A simple and visual widget. Write your twig code and you will immediately see the generated content in the content area.

Field widget

Widget Name - Dataverse Field

Category - Dataverse

Description: To use this feature, simply select a table and then choose a column from that table which you wish to display.

Dynamic tags

One of the simplest methods to display a field value for any record is by using dynamic tags. First, configure the binding for the page by selecting a table and the binding method. Then, return to page editing and, in the Elementor Text Editor widget, click the Dynamic Tags button (symbolized by a coins icon). Next, select the 'Dynamic field' option and click the settings button. Now, you can choose any field from which to display a record value.

Date Time fields in the Dataverse field widget

You can see several options for Date Time and Date Only fields. For example, if we have a Date Time value of 2025-10-01T21:00:00Z, the field will display the following values for a user in the UTC -4h timezone:

  • Column Name Only: 2025-10-01T21:00:00Z (No timezone conversion)
  • Column Name + Local DateTime: 2025-10-01T17:00:00 -04:00 (Timezone conversion according to the user’s timezone)
  • Column Name + Local Date: 2025-10-01 (Date part only, converted to the user’s timezone)
  • Column Name + Local Time: 17:00:00 (Time part only, converted to the user’s timezone)

Default record in editing mode

You can enter a record GUID to be used as the default record in the page editing context. Simply find the page, click Configure Binding, select a table and enter an id in the Default record textbox.

Elementor default