Elementor Form Builder Addon

The Elementor Form Builder Addon is a new addon for MEC which employs Elementor Page Builder.

It allows you to style ticket forms however you want. In order to use Form Builder, you need to have MEC Pro and Elementor Page Builder installed and activated.


For installation, first, make sure that both MEC and Elementor Page Builder are installed and activated. Then, head over to your WordPress Dashboard > Plugins > Add New and upload, install, and activate the addon.

NOTE: The addon works with MEC version 4.2.3 and higher.

Plugin install 1 - Elementor Form Builder Addon
Elementor Form Builder Addon

Elementor Form Builder Addon Settings:

Make sure to enable this option from Elementor > Settings > General.

elementor settings form builder select - Elementor Form Builder Addon

 In order to create your first form, please go to MEC > Form Builder and click on Add New With Elementor.

Styling tickets with Modern Events Calendar Form Builder Addon

The first time, the page is blank.

MEC Form Builder 1 - Elementor Form Builder Addon

Choose your title and then click “Edit With Elementor.”

MEC Form Builder 2 - Elementor Form Builder Addon

You will then be redirected to Elementor Page Builder. Then find “MEC Form Builder” and place it in one of the sections.

MEC Form Builder 3 - Elementor Form Builder Addon

Click “Add Item”, and add fields to the form. Then you can set the field type for this particular field.

Elementor Ticket Form 1 - Elementor Form Builder Addon

There’s also another option with which you can divide the width of the field To do this, simply use these options:

This option enables your form to have 2 columns and the fields will be placed in pairs next to one another.

This option enables your form to have 3 columns and the fields will be placed in pairs next to one another.

This option enables your form to have controls in a single row.

Required Field
By which you can make a field necessary for proceeding. Also, you can rearrange the fields by dragging and dropping them.

Elementor Ticket Form 2 - Elementor Form Builder Addon

Also, you can map each field to the listed field here:

Elementor Ticket Form 3 - Elementor Form Builder Addon

For example, here we choose the billing address from Woocommerce here:

Elementor Ticket Form 4 - Elementor Form Builder Addon

Here you can see info on the front-end of the booking form(single event page):

Elementor Ticket Form 7 - Elementor Form Builder Addon

 Go to the Style tab, and blend the style of your form with the style of your website.

Elementor Ticket Form 8 - Elementor Form Builder Addon
Elementor Ticket Form 9 - Elementor Form Builder Addon

Now you can publish the form. Head over to the dashboard and enable this form for your desired event (https://webnus.net/dox/modern-events-calendar/add-a-booking-system/ ).

Two ways to set the Modern Events Calendar form builder addon 

In order to enable the form in the back-end of an event with a ticket, you need to uncheck the box for “Inherit from global options” in MEC Settings > Booking Form.

Now you have two options to choose your form.

1- You can use the traditional method and create your form in MEC Settings > Booking Form which has the default style.

Elementor Ticket Form 10 - Elementor Form Builder Addon

2- You can also click on “Elementor Form Builder,” and select your desired form which you created before; by simply selecting it from the drop-down menu.

Elementor Ticket Form 11 - Elementor Form Builder Addon

There is another way to set this form, in this way you can set this form as the default Booking Form on all published events. In order to enable this form, you must go to the M.E.Calendar > Settings > Booking > Booking Form.

Elementor Ticket Form 12 - Elementor Form Builder Addon

Now update your event or publish it if you just created it and then click View Event. Click the register button to be redirected to the booking section or have the booking module pop up open.

Elementor Ticket Form 13 - Elementor Form Builder Addon

Complete the purchase, and then the form you have created will be available there. Check everything to make sure everything you created with Modern Events Calendar from Builder Addon is working accordingly.

Elementor Ticket Form 14 - Elementor Form Builder Addon

For the file’s fields, you need to make some adjustments.

1. You can set certain limits for uploading files from MEC Settings > Upload Field. These limits include the size of the file or its format.

2. The size for the file to upload is set by the php.ini file which is the file handling your site’s server: upload_max_filesize on the php.ini file. For more information please contact your host provider.

Some Note:

  1. You can create a separate form for each event.
  2. Both the classic form builder and the Elementor form builder addon can be configured.
  3. For a classic, go to MEC Settings > Booking > Form Builder and you have the option to set a global form for all your events or you can customize your very own form from the event’s editing page. or skip all that and have created your very own forms using the Elementor addon.


01. What do I do when I get the Error 500 screen on Elementor’s editor?

Make sure to use the latest version of the add-on and check your server’s configuration with the help of this post: https://webnus.net/dox/modern-events-calendar/what-are-best-wordpress-php-settings If doesn’t help, make sure to contact us and we’ll help you out. 

02. I want to translate the add-on. How can I do that?

Make sure to read this post on how to translate: https://webnus.net/dox/modern-events-calendar/translate-mec.

03. Does this add-on work with MEC Lite?

No, that’s because Form Builder utilizes the booking feature that is exclusive to MEC Pro and not available in MEC Lite.

04. How can I create a form that is exclusive to a ticket?

You can’t create forms exclusive to specific tickets, but you can make a specific form for each event.

05. Can I use the classic form together with the Elementor Form Builder?

Yes, but you can use one or the other. They can’t be used at the same time in an event.

06. I’ve installed the add-on, but I get an error when I try to access Elementors’ editor:

Please go to WordPress Dashboard > Settings > Permalink and set your website’s permalinks on the Post name. Afterward, the editor will become functional.


Report Out Dated Content

If you think the content of this page does not reflect updated information, please let us know.

Report Now

Avatar for Doris Cooper
Avatar for Doris Cooper
Avatar for Doris Cooper
Avatar for Doris Cooper
Maciej December 2, 2019
| |

Im having problems with this addon. In the area where one chooses the between the classic and elementor dosent work. And the  elementor bbuilder part is missing. Cant even fnd it – spescialy after instaling the shortcode bulider

Avatar for Doris Cooper
Chris November 8, 2019
| |

Hi there. Can I use this form for customizing an Add Event form as well? Or is it just for Booking forms?

Avatar for Doris Cooper
Charles July 31, 2019
| |

French version please !