Elementor Form Builder Addon

The Elementor Form Builder Addon is an innovative tool designed to help you craft highly personalized ticket booking forms that align perfectly with your website’s aesthetics. By seamlessly integrating with the Elementor Page Builder, it offers a new standard for precision and creativity, allowing you to move beyond default layouts and showcase your distinct brand style effortlessly. The Elementor Form Builder Addon is not just an enhancement; it’s a new standard for precision and creativity within the MEC plugin.

Initial Setup & Requirements

Before you begin, ensure you have the following requirements met:

• MEC Pro: This addon requires the Pro version of Modern Events Calendar; it is not compatible with MEC Lite.

• Elementor Page Builder: You must have the Elementor plugin installed and activated.

• Addon Activation: Install the addon by uploading the ZIP file and activating it via the WordPress Plugins section.

• Enable Post Type: Navigate to Elementor > Settings > General and enable the Form Builder post type to ensure the addon integrates correctly with the Elementor editor,.

Creating Your Custom Form

All forms are managed and created within a dedicated menu. Navigate to MEC > Form Builder to begin.

Step-by-Step Creation

1. Click the Add New With Elementor button.

2. Create a new template and select the option to open it with the Elementor editor.

3. Inside the editor, find the MEC Form Builder widget and drag it into one of your page sections.

4. Click Add Item to begin adding fields to your form

Field Configuration

Every field you add can be customized with the following options:

• Field Type: Choose from various prepared types to suit your data collection needs.

• Field Map: Map individual fields to specific data points, such as a WooCommerce billing address.

• Required Field: Toggle this to define which information is mandatory for the user.

• Label & Placeholder: Set the text that appears above the field (Label) and the ghost text inside it (Placeholder).

• Fields Width: Organize your layout by choosing between Half-Width (two-column), Third-Width (three-column), or Single-Line (row-based) displays,.

Pro Tip: You can easily rearrange your fields by clicking and dragging them up or down in the list to change their order.

Customization and Styling

The Style tab within the Elementor editor offers extensive options to sync the form with your website’s color palette and design.

• Visual Design: You can set custom typography, adjust padding, modify borders, and customize margins.

• Color Schemes: Apply specific colors to match your branding across all form elements.

• Layout Flexibility: Beyond basic widths, you can utilize full-width or multi-column layouts to provide a professional user experience.

---

Assigning Your Forms

Once your form is designed and published, you must assign it to your events. You can do this globally or on a per-event basis.

Global Assignment

Use this method if you want the same custom design for every event on your site:

• Navigate to MEC Settings > Booking > Booking Form.

• Select the Elementor Form Builder radio button.

• Choose your specific template from the dropdown menu and save changes

Individual Assignment

Use this method to give a specific event a unique look for its booking form:

• Open the back-end editor for your desired event.

• In the Booking Form settings, uncheck the box for Inherit from global options.

• Select Elementor Form Builder and choose your custom template from the dropdown.

Your custom booking is now complete and ready to use.

Use Cases (When This Addon is Useful)

• Branded Event Registration: Perfect for organizers who want their booking forms to match their corporate identity or specific event theme.

• Advanced Data Collection: Ideal when you need to map specific form fields to WooCommerce billing data for streamlined accounting.

• Complex Form Layouts: Useful for events requiring organized, multi-column forms (e.g., side-by-side fields for first and last names) to save vertical space.

Situations This Addon May Not Be Ideal

• Concurrent Form Builders: You cannot use the classic form builder and the Elementor Form Builder simultaneously for the same event.

• Conditional Logic Requirements: This addon currently does not support built-in conditional logic; all configured fields will always be visible.

• Non-Elementor Sites: This addon requires the Elementor Page Builder and will not function with other builders or the default WordPress editor,.

• MEC Lite Users: Full functionality requires MEC Pro to access the necessary booking features.

Troubleshooting for Beginners

• Form Fields Not Appearing: If your fields do not show up after publishing, clear your website and browser cache. Also, ensure both MEC Pro and Elementor are fully updated.

• Error 500 on Edit: This is often a server memory issue. Increase your PHP memory limit to 512MB in your config.php file or contact your host.

• File Upload Issues: If users cannot upload large files, you must adjust the upload_max_filesize directive in your server’s php.ini file,.

• Missing “Form Builder” Option: Ensure you have enabled the Form Builder post type under Elementor > Settings > General,.

FAQ

1: How do I install and activate the Elementor Form Builder Addon for MEC?

First, ensure that both the Modern Events Calendar (MEC) Pro and the Elementor Page Builder are installed and activated on your WordPress site. Afterward, install the addon by uploading the plugin ZIP file. Once installed, activate the addon from the WordPress dashboard under the Plugins section. Then, navigate to Elementor > Settings > General and enable the ‘Form Builder’ post type to integrate it with Elementor.

2: Can I create a unique booking form for each event using the Elementor Form Builder Addon?

Yes, you can design a separate booking form for each event. To do this, go to the event’s editing page, uncheck the “Inherit from global options” box under the booking form settings, and select your desired form from the dropdown menu.

3: Is it possible to use both the classic form builder and the Elementor Form Builder Addon simultaneously for an event?

No, you cannot use both form builders at the same time for a single event. You must choose either the classic form builder or the Elementor Form Builder Addon for each event. However, you can configure both builders and select the preferred one per event.

4: How can I apply a custom form to all events globally?

To set a custom form as the default for all events, navigate to MEC Settings > Booking > Booking Form. Here, you can either create a new form using the classic form builder or select a form designed with the Elementor Form Builder Addon to be applied globally. Ensure that the “Inherit from global options” box is checked in single events settings to use this global form.

5: What should I do if I encounter an Error 500 screen while editing with Elementor?

An Error 500 typically indicates server configuration issues. Ensure you’re using the latest version of the Elementor Form Builder Addon. If the problem persists, increase the PHP memory limit to 512MB in the config.php file. If the problem still persists, review your server settings or contact your hosting provider for assistance. If needed, reach out to MEC support for further help.

6: Does the Elementor Form Builder Addon work with MEC Lite (free)?

No, the Elementor Form Builder Addon does not work with MEC Lite. It utilizes the booking feature exclusive to MEC Pro and requires MEC Pro for full functionality.

7: How do I adjust the maximum file upload size for file fields in my forms?

The maximum file upload size is determined by your server’s php.ini file, specifically the upload_max_filesize directive. To increase the limit, you’ll need to modify this setting. It’s recommended to contact your hosting provider for assistance with this adjustment.

10: What customization options are available with the Elementor Form Builder Addon?

The addon offers extensive customization options, including the ability to set typography, adjust padding, modify borders, customize margins, and apply colors that align with your website’s design. You can also lay out form fields in various configurations, such as full-width or multi-column layouts, providing flexibility in form design.

11: Can I integrate third-party payment gateways with the Elementor Form Builder Addon?

The Elementor Form Builder Addon itself does not directly integrate with third-party payment gateways. However, since it operates within the Modern Events Calendar (MEC) booking system, you can use MEC’s built-in payment gateways (such as PayPal, Stripe, and WooCommerce) for processing transactions. Ensure that your MEC Pro booking settings are configured correctly to support payments alongside your customized forms.

12: How can I add conditional logic to form fields in the Elementor Form Builder Addon?

Currently, the Elementor Form Builder Addon does not provide built-in conditional logic for form fields. All fields appear as configured without conditional visibility options. 

13: How do I troubleshoot if my form fields do not appear correctly after publishing?

If form fields are not displaying as expected, try the following:

1. Check if Elementor is fully updated alongside MEC Pro.
2. Clear your website and browser cache to load the latest form version.
3. Disable conflicting plugins, as third-party plugins may conflict with Elementor’s form rendering.
4. Verify theme compatibility, as some themes may override form styles.
5. If the issue persists, check your browser’s developer console for errors or reach out to MEC support.