To watch the corresponding tutorial video click here Off Canvas Frontend Admin Form with Elementor Pro – Video

Download the Template from This Tutorial: https://www.dynamiapps.com/elementor-templates/?template=form-in-off-canvas.json

Introduction

This guide will walk you through the process of displaying a frontend form, such as a product submission form, inside an Elementor Pro Off-Canvas widget using Frontend Admin. With Elementor Pro, you can use the Off-Canvas widget to display your frontend form dynamically, allowing users to add new entries without leaving the page, enhancing the user experience.

Steps to Implement

Step 1: Edit with Elementor

1. Open the Elementor editor.
2. Locate your Grid Loop widget, which displays your existing listings.
3. Add a button that will trigger the Off-Canvas widget.
4. In the button settings:
   • Go to Dynamic Tags.
   • Click Off-Canvas and open its settings.
   • Select the Off-Canvas widget (if not added yet, proceed to Step 2).

Step 2: Add the Off-Canvas Widget

1. Click Add Element in Elementor.
2. Search for Off-Canvas and drag it below your button.
3. The Off-Canvas widget in Elementor Pro is where you will house your frontend form, making it accessible without navigating away from the page.

Step 3: Display the Frontend Form

1. Inside the Off-Canvas widget:
   • Add a Heading (e.g., “Add New Entry”).
   • Drag the Frontend Form widget below the heading.
2. Configure the form with necessary fields, such as:
   • Product Type
   • Short Description
   • Price & Sale Price
   • Stock Management Options

Step 4: Configure Form Actions

1. Navigate to the Actions tab in the Frontend Form settings.
2. Set the form to reload the page after submission to ensure new entries appear immediately.

Step 5: Set Form Permissions

• By default, the form is set so that all logged-in users can submit entries.
• Adjust these settings according to your requirements to control who can submit entries.

Step 6: Add a Cancel Button

To improve user experience, add a Cancel button:

1. Drag a Button widget into the Off-Canvas widget.
2. Change the label to “Cancel” and center it.
3. Set the button action to close the Off-Canvas widget:
   • Click Dynamic Tags.
   • Scroll to Actions → Off-Canvas.
   • Select the Off-Canvas widget.
4. Customize the button color to red for better visibility.

Final Result

Now, users can easily submit a new entry directly from the Elementor Pro Off-Canvas widget. This approach enhances user engagement by allowing instant form submissions without navigating away from the page.

Plugins Used in This Tutorial:

Plugins Used in This Tutorial:

Elementor Pro (affiliate link): https://be.elementor.com/visit/?bta=5626&brand=elementor
Frontend Admin Pro
WooCommerce (for product submission): https://wordpress.org/plugins/woocommerce/