Elementor Form Builder Addon - Modern Events Calendar Knowledgebase Elementor Form Builder Addon - Modern Events Calendar Knowledgebase

Elementor Form Builder Addon

The Form Builder 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.

Elementor Settings:

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

 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.

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

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

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

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.

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

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

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

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

Now you can publish the form. Head over to the dashboard and enable this form for your desired event (https://www.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.

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.

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.

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.

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.

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.

For more details about this addon please watch this video.

Report Out Dated Content

If you think lorem ipsum then dolor site amet never

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 !